diff --git a/Classes/Backend/Preview/DefaultPreviewRenderer.php b/Classes/Backend/Preview/DefaultPreviewRenderer.php
new file mode 100644
index 00000000..bd288cfc
--- /dev/null
+++ b/Classes/Backend/Preview/DefaultPreviewRenderer.php
@@ -0,0 +1,248 @@
+<?php
+declare(strict_types=1);
+
+namespace T3SBS\T3sbootstrap\Backend\Preview;
+
+/*
+ * This file is part of the TYPO3 extension t3sbootstrap.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE file that was distributed with this source code.
+ */
+
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
+use TYPO3\CMS\Backend\Preview\StandardContentPreviewRenderer;
+use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
+use TYPO3\CMS\Core\Localization\LanguageService;
+use TYPO3\CMS\Core\Service\FlexFormService;
+
+class DefaultPreviewRenderer extends StandardContentPreviewRenderer
+{
+
+	/**
+	* Dedicated method for rendering preview header HTML for
+	* the page module only. Receives $item which is an instance of
+	* GridColumnItem which has a getter method to return the record.
+	*
+	* @param GridColumnItem
+	* @return string
+	*/
+	public function renderPageModulePreviewHeader(GridColumnItem $item): string
+	{
+		$record = $item->getRecord();
+		$itemLabels = $item->getContext()->getItemLabels();
+		$outHeader = '';
+
+		$content = parent::renderPageModulePreviewContent($item);
+		if ( ($content && $record['CType'] === 'list')
+			|| ($content && $record['CType'] === 'bullets')
+			|| ($content && $record['CType'] === 'table')
+			|| ($content && $record['CType'] === 'uploads')
+			|| ($content && $record['CType'] === 'login')
+			|| ($content && $record['CType'] === 'shortcut')
+			|| ($content && $record['CType'] === 'div')
+			|| ($content && $record['CType'] === 'html')
+		) {
+			return '';
+		}
+
+		if ($record['CType'] === 't3sbs_card') {
+			$flexformService = GeneralUtility::makeInstance(FlexFormService::class);
+			$flexconf = $flexformService->convertFlexFormContentToArray($record['pi_flexform']);
+			if ( $flexconf['header']['text'] ) {
+				 $outHeader .= parent::linkEditContent(parent::renderText($flexconf['header']['text']), $record) . '<br />';
+			}
+		}
+
+		if ($record['header']) {
+			$infoArr = [];
+			parent::getProcessedValue($item, 'header_position,header_layout,header_link', $infoArr);
+			$hiddenHeaderNote = '';
+			// If header layout is set to 'hidden', display an accordant note:
+			if ($record['header_layout'] == 100) {
+				$hiddenHeaderNote = ' <em>[' . htmlspecialchars(parent::getLanguageService()->sL('LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_layout.I.6')) . ']</em>';
+			}
+			$outHeader .= $record['date']
+				? htmlspecialchars($itemLabels['date'] . ' ' . BackendUtility::date($record['date'])) . '<br />'
+				: '';
+			$outHeader .= '<strong>' . parent::linkEditContent(parent::renderText($record['header']), $record)
+				. $hiddenHeaderNote . '</strong><br />';
+		}
+
+		$info = '';
+		$contentTypeLabels = $item->getContext()->getContentTypeLabels();
+		$contentType = $contentTypeLabels[$record['CType']];
+		$info = '<div style="padding:5px; border: 1px solid #563d7c; color:#563d7c; margin-bottom:5px" >'.$contentType.'</div>';
+
+		return $info.$outHeader;
+
+	}
+
+
+	/**
+	* Dedicated method for rendering preview body HTML for
+	* the page module only.
+	*
+	* @param GridColumnItem $item
+	* @return string
+	*/
+	public function renderPageModulePreviewContent(GridColumnItem $item): string
+	{
+		$out = '';
+		$record = $item->getRecord();
+		$content = parent::renderPageModulePreviewContent($item);
+
+		if ( ($content && $record['CType'] === 'list')
+			|| ($content && substr($record['CType'], 0, 4) === 'menu')
+			|| ($content && $record['CType'] === 'bullets')
+			|| ($content && $record['CType'] === 'table')
+			|| ($content && $record['CType'] === 'uploads')
+			|| ($content && $record['CType'] === 'login')
+			|| ($content && $record['CType'] === 'shortcut')
+			|| ($content && $record['CType'] === 'div')
+			|| ($content && $record['CType'] === 'html')
+			) {
+			return $content;
+		}
+
+		$contentTypeLabels = $item->getContext()->getContentTypeLabels();
+		$languageService = parent::getLanguageService();
+
+		$contentType = $contentTypeLabels[$record['CType']];
+		if (isset($contentType)) {
+
+			$extconf = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Configuration\ExtensionConfiguration::class)->get('t3sbootstrap');
+			$maxCharacters = $extconf['previewCropMaxCharacters'];
+			$append = ' ...';
+
+			if ($record['subheader']) {
+				$out .= parent::linkEditContent(parent::renderText($record['subheader']), $record) . '<br />';
+			}
+			if ($record['bodytext']) {
+				if ($extconf['previewCrop']) {
+					$contentObject = GeneralUtility::makeInstance(ContentObjectRenderer::class);
+					$text = $contentObject->cropHTML($record['bodytext'], $maxCharacters . '|' . $append . '|' . true);
+				} else {
+					$text = $record['bodytext'];
+				}
+				$out .= parent::linkEditContent(parent::renderText($text), $record);
+			}
+			if ($record['CType'] == 't3sbs_gallery') {
+				$out .= 'Columns: '.$record['imagecols'];
+				if ($record['CType'] == 't3sbs_gallery') {
+					$out .= '<br />Aspect ratio: '.$record['tx_t3sbootstrap_image_ratio'];
+				}
+			}
+			if ($record['CType'] === 't3sbs_card') {
+				$flexformService = GeneralUtility::makeInstance(FlexFormService::class);
+				$flexconf = $flexformService->convertFlexFormContentToArray($record['pi_flexform']);
+				if ( $flexconf['text']['top'] ) {
+					if ($extconf['previewCrop']) {
+						$contentObject = GeneralUtility::makeInstance(ContentObjectRenderer::class);
+						$text = $contentObject->cropHTML($flexconf['text']['top'], $maxCharacters . '|' . $append . '|' . true);
+					} else {
+						$text = $flexconf['text']['top'];
+					}
+					$out .= parent::linkEditContent(parent::renderText($text), $record) . '<br />';
+				}
+				if ( $flexconf['text']['bottom'] ) {
+					if ($extconf['previewCrop']) {
+						$contentObject = GeneralUtility::makeInstance(ContentObjectRenderer::class);
+						$text = $contentObject->cropHTML($flexconf['text']['bottom'], $maxCharacters . '|' . $append . '|' . true);
+					} else {
+						$text = $flexconf['text']['bottom'];
+					}
+					$out .= parent::linkEditContent(parent::renderText($text), $record) . '<br />';
+				}
+			}
+			if ($record['CType'] === 't3sbs_carousel') {
+				$flexformService = GeneralUtility::makeInstance(FlexFormService::class);
+				$flexconf = $flexformService->convertFlexFormContentToArray($record['tx_t3sbootstrap_flexform']);
+	  			if ( $flexconf['shift'] ) {
+					$flexconfOut .= '<br />- Shift: '.$flexconf['shift'];
+				}
+	  			if ( $flexconf['bgOverlay'] ) {
+					$flexconfOut .= '<br />- Background-Overlay';
+				}
+	  			if ( $flexconf['shift'] ) {
+					$flexconfOut .= '<br />- Shift: '.$flexconf['shift'];
+				}
+			}
+			if ($record['CType'] === 't3sbs_button') {
+				$flexformService = GeneralUtility::makeInstance(FlexFormService::class);
+				$flexconf = $flexformService->convertFlexFormContentToArray($record['tx_t3sbootstrap_flexform']);
+
+				if ( $flexconf['style'] ) {
+					$flexconfOut .= '<br />- Style: '.$flexconf['style'];
+				}
+				if ( $flexconf['size'] ) {
+					$flexconfOut .= '<br />- Size: '.$flexconf['size'];
+				}
+				if ( $flexconf['block'] ) {
+					$flexconfOut .= '<br />- Block: '.$flexconf['block'];
+				}
+				if ( $flexconf['outline'] ) {
+					$flexconfOut .= '<br />- Outline';
+				}
+			}
+			if ($record['CType'] === 't3sbs_toast') {
+				$flexformService = GeneralUtility::makeInstance(FlexFormService::class);
+				$flexconf = $flexformService->convertFlexFormContentToArray($record['tx_t3sbootstrap_flexform']);
+
+				if ( $flexconf['animation'] ) {
+					$flexconfOut .= '<br />- Animation';
+				}
+				if ( $flexconf['autohide'] ) {
+					$flexconfOut .= '<br />- Autohide';
+				}
+				if ( $flexconf['delay'] ) {
+					$flexconfOut .= '<br />- Delay: '.$flexconf['delay'];
+				}
+				if ( $flexconf['placement'] ) {
+					$flexconfOut .= '<br />- Placement: '.$flexconf['placement'];
+				}
+			}
+
+			if ($flexconfOut)
+			$out = $out.substr($flexconfOut, 6);
+
+			$media = $record['assets'] ?: $record['image'];
+			if ($media) {
+				$field = $record['assets'] ? 'assets' : 'image';
+				$out .= '<div style="margin:5px 5px 5px 0">'. parent::linkEditContent($this->getThumbCodeUnlinked($record, 'tt_content', $field), $record) . '</div>';
+			}
+
+		} else {
+			$message = sprintf(
+				 $languageService->sL('LLL:EXT:lang/locallang_core.xlf:labels.noMatchingValue'),
+				 $record['CType']
+			);
+			$out .= '<span class="label label-warning">' . htmlspecialchars($message) . '</span>';
+		}
+
+		return $out;
+	}
+
+
+	/**
+	* Dedicated method for wrapping a preview header and body HTML.
+	*
+	* @param string $previewHeader
+	* @param string $previewContent
+	* @param GridColumnItem $item
+	* @return string
+	*/
+	public function wrapPageModulePreview($previewHeader, $previewContent, GridColumnItem $item): string
+	{
+			$content = '<span class="exampleContent">' . $previewHeader . $previewContent . '</span>';
+			if ($item->isDisabled()) {
+				return '<span class="text-muted">' . $content . '</span>';
+			}
+
+			return $content;
+	}
+
+
+}
diff --git a/Classes/Backend/Preview/T3sbPreviewRenderer.php b/Classes/Backend/Preview/T3sbPreviewRenderer.php
new file mode 100644
index 00000000..fff4647f
--- /dev/null
+++ b/Classes/Backend/Preview/T3sbPreviewRenderer.php
@@ -0,0 +1,341 @@
+<?php
+declare(strict_types=1);
+
+namespace T3SBS\T3sbootstrap\Backend\Preview;
+
+/*
+ * This file is part of the TYPO3 extension t3sbootstrap.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE file that was distributed with this source code.
+ */
+
+use B13\Container\Backend\Grid\ContainerGridColumn;
+use B13\Container\Backend\Grid\ContainerGridColumnItem;
+use B13\Container\Domain\Factory\Exception;
+use B13\Container\Domain\Factory\PageView\Backend\ContainerFactory;
+use B13\Container\Tca\Registry;
+use TYPO3\CMS\Backend\Preview\StandardContentPreviewRenderer;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\Grid;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridRow;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Fluid\View\StandaloneView;
+use TYPO3\CMS\Core\Service\FlexFormService;
+
+class T3sbPreviewRenderer extends StandardContentPreviewRenderer
+{
+
+	/**
+	* @var Registry
+	*/
+	protected $tcaRegistry;
+
+	/**
+	* @var ContainerFactory
+	*/
+	protected $containerFactory;
+
+	public function __construct(Registry $tcaRegistry = null, ContainerFactory $containerFactory = null)
+	{
+		$this->tcaRegistry = $tcaRegistry ?? GeneralUtility::makeInstance(Registry::class);
+		$this->containerFactory = $containerFactory ?? GeneralUtility::makeInstance(ContainerFactory::class);
+	}
+
+
+	/**
+	* Dedicated method for rendering preview header HTML for
+	* the page module only. Receives $item which is an instance of
+	* GridColumnItem which has a getter method to return the record.
+	*
+	* @param GridColumnItem
+	* @return string
+	*/
+	public function renderPageModulePreviewHeader(GridColumnItem $item): string
+	{
+		$record = $item->getRecord();
+		$itemLabels = $item->getContext()->getItemLabels();
+		$outHeader = '';
+
+		if ($record['header']) {
+			$infoArr = [];
+			$this->getProcessedValue($item, 'header_position,header_layout,header_link', $infoArr);
+			$hiddenHeaderNote = '';
+			// If header layout is set to 'hidden', display an accordant note:
+			if ($record['header_layout'] == 100) {
+				$hiddenHeaderNote = ' <em>[' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_layout.I.6')) . ']</em>';
+			}
+			$outHeader = $record['date']
+				? htmlspecialchars($itemLabels['date'] . ' ' . BackendUtility::date($record['date'])) . '<br />'
+				: '';
+			$outHeader .= '<strong>' . $this->linkEditContent($this->renderText($record['header']), $record)
+				. $hiddenHeaderNote . '</strong><br />';
+		}
+
+		if ($record['subheader']) {
+			$outHeader .= parent::linkEditContent(parent::renderText($record['subheader']), $record) . '<br />';
+		}
+
+		$info = '';
+		$contentTypeLabels = $item->getContext()->getContentTypeLabels();
+		$contentType = $contentTypeLabels[$record['CType']];
+
+		switch ($record['CType']) {
+			case 'tabs_tab':
+			 	$info = '<div style="padding:5px; background-color:rgba(86, 61, 124, .5); color:#fff; margin-bottom:5px" >'.$contentType.'</div>';
+				break;
+			case 'collapsible_accordion':
+			 	$info = '<div style="padding:5px; background-color:rgba(86, 61, 124, .5); color:#fff; margin-bottom:5px" >'.$contentType.'</div>';
+				break;
+			default:
+				$info = '<div style="padding:5px; background-color:#563d7c; color:#fff; margin-bottom:5px" >'.$contentType.'</div>';
+		}
+
+		return $info.$outHeader;
+
+	}
+
+
+	public function renderPageModulePreviewContent(GridColumnItem $item): string
+	{
+
+		$content = parent::renderPageModulePreviewContent($item);
+		$context = $item->getContext();
+		$record = $item->getRecord();
+		$grid = GeneralUtility::makeInstance(Grid::class, $context);
+		try {
+			$container = $this->containerFactory->buildContainer((int)$record['uid']);
+		} catch (Exception $e) {
+			// not a container
+			return $content;
+		}
+
+		$flexformService = GeneralUtility::makeInstance(FlexFormService::class);
+		$flexconf = $flexformService->convertFlexFormContentToArray($record['tx_t3sbootstrap_flexform']);
+
+		if ($record['CType'] == 'two_columns' || $record['CType'] == 'three_columns' || $record['CType'] == 'four_columns' || $record['CType'] == 'six_columns') {
+   			if ( $flexconf['equalWidth'] ) {
+				$out .= '<br />- Equal Width';
+			}
+   			if ( $flexconf['equalHeight'] ) {
+				$out .= '<br />- Equal Height';
+			}
+   			if ( $flexconf['noGutters'] ) {
+				$out .= '<br />- No Gutters';
+			}
+		}
+		if ($record['CType'] == 'button_group') {
+   			if ( $flexconf['vertical'] ) {
+				$out .= '<br />- Vertical: '.$flexconf['vertical'];
+			}
+   			if ( $flexconf['size'] ) {
+				$out .= '<br />- Size: '.$flexconf['size'];
+			}
+   			if ( $flexconf['align'] ) {
+				$out .= '<br />- Align: '.$flexconf['align'];
+			}
+   			if ( $flexconf['fixedPosition'] ) {
+				$out .= '<br />- FixedPosition: '.$flexconf['fixedPosition'];
+			}
+		}
+		if ($record['CType'] == 'collapsible_accordion') {
+			$active = $flexconf['active'] ? 'TRUE' : 'FALSE';
+			$out .= '<br />- Active: '.$active;
+		}
+		if ($record['CType'] == 'collapsible_container' && is_string($flexconf['appearance'])) {
+			$out .= '<br />- Appearance: '.ucfirst($flexconf['appearance']);
+		}
+		if ($record['CType'] == 'carousel_container') {
+   			if ( $flexconf['width'] ) {
+				$out .= '<br />- Width: '.$flexconf['width'].'px';
+			}
+   			if ( $flexconf['ratio'] ) {
+				$out .= '<br />- Aspect ratio: '.$flexconf['ratio'];
+			}
+   			if ( $flexconf['interval'] ) {
+				$out .= '<br />- Interval: '.$flexconf['interval'];
+			}
+   			if ( $flexconf['link'] ) {
+				$out .= '<br />- Link: '.$flexconf['link'];
+			}
+   			if ( $flexconf['multislider'] ) {
+				$out .= '<br />- Multislider';
+			}
+   			if ( $flexconf['zoom'] ) {
+				$out .= '<br />- Zoom';
+			}
+		}
+		if ($record['CType'] == 'card_wrapper') {
+			$out .= '<br />- Wrapper: Card '.$flexconf['card_wrapper'];
+			if ( $flexconf['visibleCards'] ) {
+				$out .= '<br />- Visible Cards: '.$flexconf['visibleCards'];
+			}
+			if ( $flexconf['interval'] ) {
+				$out .= '<br />- Interval: '.$flexconf['interval'];
+			}
+		}
+		if ($record['CType'] == 'background_wrapper') {
+			if ( $flexconf['bgwlink'] ) {
+				$out .= '<br />- Link the entire Content Element';
+			}
+			if ( $flexconf['origImage'] ) {
+				$out .= '<br />- Image inside (no background-image but a real image)';
+			}
+			if ( $flexconf['bgAttachmentFixed'] ) {
+				$out .= '<br />- Background-attachment - fixed';
+			}
+			if ( $flexconf['enableAutoheight'] ) {
+				$out .= '<br />- Enable content overlay and autoheight for background-image';
+			}
+			if ( $flexconf['paddingTopBottom'] ) {
+				$out .= '<br />- Padding (top and bottom ): '.$flexconf['paddingTopBottom'].' rem';
+			}
+			if ( $flexconf['noMediaPaddingTopBottom'] ) {
+				$out .= '<br />- Padding (top and bottom ): '.$flexconf['noMediaPaddingTopBottom'].' rem';
+			}
+			if ( $flexconf['imgGrayscale'] ) {
+				$out .= '<br />- Grayscale: '.$flexconf['imgGrayscale'];
+			}
+			if ( $flexconf['imgSepia'] ) {
+				$out .= '<br />- Sepia: '.$flexconf['imgSepia'];
+			}
+			if ( $flexconf['imgOpacity'] ) {
+				$out .= '<br />- Opacity: '.$flexconf['imgOpacity'];
+			}
+			if ( $flexconf['imageRaster'] ) {
+				$out .= '<br />- Raster over the image/color';
+			}
+		}
+		if ($record['CType'] == 'parallax_wrapper') {
+			if ( $flexconf['speedFactor'] ) {
+				$out .= '<br />- Speed Factor: '.$flexconf['speedFactor'];
+			}
+			if ( $flexconf['paddingTopBottom'] ) {
+				$out .= '<br />- Padding (top and bottom ): '.$flexconf['paddingTopBottom'];
+			}
+			if ( $flexconf['imageRaster'] ) {
+				$out .= '<br />- Image Raster';
+			}
+		}
+		if ($record['CType'] === 'modal') {
+
+			if ( $flexconf['animation'] ) {
+				$out .= '<br />- Animation';
+			}
+			if ( $flexconf['size'] ) {
+				$out .= '<br />- Size: '.$flexconf['size'];
+			}
+			if ( $flexconf['buttonText'] ) {
+				$out .= '<br />- Button Text: '.$flexconf['buttonText'];
+			}
+			if ( $flexconf['button'] ) {
+				$out .= '<br />- Button: '.$flexconf['button'];
+			}
+			if ( $flexconf['style'] ) {
+				$out .= '<br />- Style: '.$flexconf['style'];
+			}
+			if ( $flexconf['fixedPosition'] ) {
+				$out .= '<br />- Fixed Position';
+			}
+		}
+		if ($record['CType'] == 'tabs_container') {
+			if ( $flexconf['display_type'] && is_string($flexconf['display_type']) ) {
+				$out .= '<br />- Appearance: '.ucfirst($flexconf['display_type']);
+			}
+			if ( $flexconf['switch_effect'] ) {
+				$out .= '<br />- Fade effect: '.$flexconf['switch_effect'];
+			}
+			if ( $flexconf['fill'] ) {
+				$out .= '<br />- Fill and justify: '.$flexconf['fill'];
+			}
+		}
+
+		$flexconfOut = '';
+		if ($out)
+		$flexconfOut .= parent::linkEditContent('<div>'.substr($out, 6).'</div>', $record);
+
+		$containerGrid = $this->tcaRegistry->getGrid($record['CType']);
+
+		foreach ($containerGrid as $row => $cols) {
+			$rowObject = GeneralUtility::makeInstance(GridRow::class, $context);
+
+			foreach ($cols as $col) {
+				$columnObject = GeneralUtility::makeInstance(ContainerGridColumn::class, $context, $col, $container);
+				$rowObject->addColumn($columnObject);
+				if (isset($col['colPos'])) {
+					$records = $container->getChildrenByColPos($col['colPos']);
+					foreach ($records as $contentRecord) {
+						$columnItem = GeneralUtility::makeInstance(ContainerGridColumnItem::class, $context, $columnObject, $contentRecord, $container);
+						$columnObject->addItem($columnItem);
+					}
+				}
+			}
+			$grid->addRow($rowObject);
+		}
+
+		$gridTemplate = $this->tcaRegistry->getGridTemplate($record['CType']);
+
+		$view = GeneralUtility::makeInstance(StandaloneView::class);
+		$view->setPartialRootPaths(['EXT:backend/Resources/Private/Partials/', 'EXT:container/Resources/Private/Partials/']);
+		$view->setTemplatePathAndFilename($gridTemplate);
+
+		$view->assign('hideRestrictedColumns', (bool)(BackendUtility::getPagesTSconfig($context->getPageId())['mod.']['web_layout.']['hideRestrictedCols'] ?? false));
+		$view->assign('newContentTitle', $this->getLanguageService()->getLL('newContentElement'));
+		$view->assign('newContentTitleShort', $this->getLanguageService()->getLL('content'));
+		$view->assign('allowEditContent', $this->getBackendUser()->check('tables_modify', 'tt_content'));
+		$view->assign('containerGrid', $grid);
+
+		$rendered = $view->render();
+
+		$media = $record['assets'] ?: $record['image'];
+		if ($media) {
+			$field = $record['assets'] ? 'assets' : 'image';
+			$flexconfOut .= '<div style="margin:5px">'. parent::linkEditContent($this->getThumbCodeUnlinked($record, 'tt_content', $field), $record) . '</div>';
+		}
+
+		$extconf = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Configuration\ExtensionConfiguration::class)->get('t3sbootstrap');
+
+		if ($extconf['previewClosedCollapsible']) {
+			$content = '<p><a style="color:#c7254e" data-toggle="collapse" href="#collapseContainer-'.$record['uid'].'" role="button" aria-expanded="false" aria-controls="collapseExample">
+				<span class="icon icon-size-small icon-state-default">
+					<span class="icon-markup">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g class="icon-color"><path d="M7.593 11.43L3.565 5.79A.5.5 0 0 1 3.972 5h8.057a.5.5 0 0 1 .407.791l-4.028 5.64a.5.5 0 0 1-.815-.001z"/></g></svg>
+					</span>
+				</span>
+			</a></p>
+			<div class="collapse" id="collapseContainer-'.$record['uid'].'">'.$content . $rendered.'</div>';
+		} else {
+			$content = '<p><a style="color:#c7254e" data-toggle="collapse" href="#collapseContainer-'.$record['uid'].'" role="button" aria-expanded="true" aria-controls="collapseExample">
+				<span class="icon icon-size-small icon-state-default">
+					<span class="icon-markup">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g class="icon-color"><path d="M7.593 11.43L3.565 5.79A.5.5 0 0 1 3.972 5h8.057a.5.5 0 0 1 .407.791l-4.028 5.64a.5.5 0 0 1-.815-.001z"/></g></svg>
+					</span>
+				</span>
+			</a></p>
+			<div class="collapse in" id="collapseContainer-'.$record['uid'].'">'.$content . $rendered.'</div>';
+		}
+
+		return $flexconfOut.$content;
+	}
+
+
+	/**
+	 * Dedicated method for wrapping a preview header and body HTML.
+	 *
+	 * @param string $previewHeader
+	 * @param string $previewContent
+	 * @param GridColumnItem $item
+	 * @return string
+	 */
+	public function wrapPageModulePreview($previewHeader, $previewContent, GridColumnItem $item): string
+	{
+			$content = '<span class="exampleContent" style="background-color: rgba(86, 61, 124, .1); display: block; padding:5px">' . $previewHeader . $previewContent . '</span>';
+			if ($item->isDisabled()) {
+				 return '<span class="text-muted">' . $content . '</span>';
+			 }
+
+			 return $content;
+	}
+
+}
diff --git a/Classes/Controller/ConfigController.php b/Classes/Controller/ConfigController.php
index 8e166b2b..633a17df 100644
--- a/Classes/Controller/ConfigController.php
+++ b/Classes/Controller/ConfigController.php
@@ -23,7 +23,6 @@
 use TYPO3\CMS\Core\Configuration\ExtensionConfiguration;
 use TYPO3\CMS\Core\Database\Query\Restriction\DeletedRestriction;
 use TYPO3\CMS\Core\Database\Query\QueryHelper;
-use TYPO3\CMS\Core\Page\PageRenderer;
 use TYPO3\CMS\Core\Information\Typo3Version;
 
 /**
@@ -118,16 +117,6 @@ public function initializeAction()
 		$this->rootConfig = $this->configRepository->findOneByPid($this->rootPageId);
  		$typo3Version = GeneralUtility::makeInstance(Typo3Version::class);
 		$this->version = (int)$typo3Version->getVersion();
-
-		$pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
-		$pageRenderer->loadRequireJsModule(
-			 'TYPO3/CMS/T3sbootstrap/T3sBootstrap',
-			 'function() { console.log("Loaded own module."); }'
-		);
-
-		if ($this->version === 11) {
-			$pageRenderer->addCssFile('/typo3conf/ext/t3sbootstrap/Resources/Public/Backend/bestyles11.css');
-		}
 	}
 
 
@@ -198,6 +187,7 @@ public function newAction(): void
 		$assignedOptions = self::getFieldsOptions();
 		$assignedOptions['pid'] = $this->currentUid;
 		$assignedOptions['tcaColumns'] = self::getTcaColumns();
+		$assignedOptions['t3version'] = $this->version;
 
 		if ( $this->rootConfig ) {
 			// config from rootline
@@ -542,7 +532,7 @@ public function getCustomScss( string $file ): array
 			}
 		}
 
-		return $assignedOptions;
+		return (array)$assignedOptions;
 	}
 
 
diff --git a/Classes/DataProcessing/BootstrapProcessor.php b/Classes/DataProcessing/BootstrapProcessor.php
index ff2bc11a..2618ca6c 100644
--- a/Classes/DataProcessing/BootstrapProcessor.php
+++ b/Classes/DataProcessing/BootstrapProcessor.php
@@ -308,6 +308,8 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 				$processedData['style'] = '';
 			}
 
+			$processedData['origImage'] = $parentflexconf['origImage'];
+
 			if ($parentflexconf['buttontext'])
 			$processedData['buttontext'] = trim(explode('|', $parentflexconf['buttontext'])[$processedData['data']['sys_language_uid']]);
 
@@ -439,7 +441,9 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 		 || $processedData['data']['CType'] == 'image' ) {
 			// if codesnippet
 			if ($extConf['codesnippet'] && $processedData['data']['bodytext']) {
-				$processedData['codesnippet'] = strpos($processedData['data']['bodytext'], '<pre>') ? TRUE : FALSE;
+				if (strpos($processedData['data']['bodytext'], '<pre>') !== FALSE) {
+					$processedData['codesnippet'] = TRUE;
+				}
 			}
 			// if media
 			if ($processedData['data']['assets'] || $processedData['data']['image'] || $processedData['data']['media']) {
@@ -449,6 +453,8 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 				if (is_array($processedData['files'])) {
 					foreach ($processedData['files'] as $file ) {
 						if ($file->getProperties()['tx_t3sbootstrap_hover_effect'])	$processedData['hoverEffect'] = TRUE;
+
+
 					}
 				}
 				$galleryUtility = GeneralUtility::makeInstance(GalleryHelper::class);
@@ -495,6 +501,7 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 			$processedData['addmedia']['imagezoom'] = $processedData['data']['image_zoom'];
 			$processedData['addmedia']['CType'] = $processedData['data']['CType'];
 			$processedData['addmedia']['ratio'] = $processedData['data']['tx_t3sbootstrap_image_ratio'];
+			$processedData['addmedia']['origImg'] = $processedData['data']['tx_t3sbootstrap_image_orig'];
 		}
 
 		// container class
diff --git a/Classes/DataProcessing/ConfigProcessor.php b/Classes/DataProcessing/ConfigProcessor.php
index bd399124..967aea11 100644
--- a/Classes/DataProcessing/ConfigProcessor.php
+++ b/Classes/DataProcessing/ConfigProcessor.php
@@ -18,6 +18,9 @@
 use T3SBS\T3sbootstrap\Utility\BackgroundImageUtility;
 use TYPO3\CMS\Core\Resource\FileRepository;
 use TYPO3\CMS\Core\Database\ConnectionPool;
+use TYPO3\CMS\Core\Configuration\ExtensionConfiguration;
+use TYPO3\CMS\Core\Database\QueryGenerator;
+
 
 class ConfigProcessor implements DataProcessorInterface
 {
@@ -208,18 +211,28 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 
 			$navbarClass .= $processedRecordVariables['navbarClass'] ? ' '.$processedRecordVariables['navbarClass'] : '';
 
-			if ( $processedRecordVariables['navbarColor'] == 'color' ) {
-				if ( $processedRecordVariables['navbarBackground'] ) {
-					$navbarStyle = 'background-color: '.$processedRecordVariables['navbarBackground'].';';
-					$processedData['config']['navbar']['style'] = $navbarStyle;
+			if ( $processedRecordVariables['navbarTransparent'] && $processedRecordVariables['navbarPlacement'] == 'fixed-top') {
+				if ( $processedRecordVariables['navbarColor'] == 'color' && $processedRecordVariables['navbarBackground'] ) {
+					$processedData['config']['navbar']['colorschemes'] = $processedRecordVariables['navbarBackground'];
+				} else {
+					$processedData['config']['navbar']['colorschemes'] = 'var(--'.$processedRecordVariables['navbarColor'].')';
+				}
+				$processedData['config']['navbar']['transparent'] = true;
+			} else {
+
+				if ( $processedRecordVariables['navbarColor'] == 'color' ) {
+					if ( $processedRecordVariables['navbarBackground'] ) {
+						$navbarStyle = 'background-color: '.$processedRecordVariables['navbarBackground'].';';
+						$processedData['config']['navbar']['style'] = $navbarStyle;
+					} else {
+						$processedData['config']['navbar']['shrinkColorschemes'] = 'bg-'.$processedRecordVariables['navbarShrinkcolorschemes'];
+						$processedData['config']['navbar']['colorschemes'] = 'bg-'.$processedRecordVariables['navbarColor'];
+					}
 				} else {
+					$navbarClass .= ' bg-'.$processedRecordVariables['navbarColor'];
 					$processedData['config']['navbar']['shrinkColorschemes'] = 'bg-'.$processedRecordVariables['navbarShrinkcolorschemes'];
 					$processedData['config']['navbar']['colorschemes'] = 'bg-'.$processedRecordVariables['navbarColor'];
 				}
-			} else {
-				$navbarClass .= ' bg-'.$processedRecordVariables['navbarColor'];
-				$processedData['config']['navbar']['shrinkColorschemes'] = 'bg-'.$processedRecordVariables['navbarShrinkcolorschemes'];
-				$processedData['config']['navbar']['colorschemes'] = 'bg-'.$processedRecordVariables['navbarColor'];
 			}
 
 			if ( ($processedRecordVariables['navbarPlacement'] == 'fixed-top' && $processedRecordVariables['navbarShrinkcolor'])
@@ -253,10 +266,16 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 			}
 			$processedData['config']['navbar']['justify'] = $processedRecordVariables['navbarJustify'] ? ' nav-fill w-100' : '';
 			$processedData['config']['navbar']['offcanvas'] = $processedRecordVariables['navbarOffcanvas'];
+			$processedData['config']['navbar']['animatedToggler'] = $processedRecordVariables['navbarAnimatedtoggler'];
 			if ( $processedRecordVariables['navbarSearchbox'] ) {
 				$processedData['config']['navbar']['searchbox'] = $processedRecordVariables['navbarSearchbox'];
 				$processedData['config']['navbar']['searchboxcolor'] = $processedRecordVariables['navbarEnable'] == 'light' ? 'dark' : 'light';
 			}
+
+			$extConf = GeneralUtility::makeInstance(ExtensionConfiguration::class)->get('t3sbootstrap');
+			if ( $extConf['navigationColor'] ) {
+				$processedData['config']['navbar']['navColorCSS'] = self::getNavigationColor();
+			}
 		}
 
 		/**
@@ -288,11 +307,11 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 				if ( count($fileObjects) > 1 ) {
 					// slider
 					$processedData['bgSlides'] =
-					 self::getBackgroundImageUtility()->getBgImage($uid, 'pages', TRUE, FALSE, [], FALSE, 0, $webp);
+					 self::getBackgroundImageUtility()->getBgImage($uid, 'pages', TRUE, FALSE, [], FALSE, 0, $webp, $contentObjectConfiguration['settings.']['bgMediaQueries']);
 				} else {
 					// background image
 					$processedData['config']['jumbotron']['bgImage'] =
-					 self::getBackgroundImageUtility()->getBgImage($uid, 'pages', TRUE, FALSE, [], FALSE, $processedData['data']['uid'], $webp);
+					 self::getBackgroundImageUtility()->getBgImage($uid, 'pages', TRUE, FALSE, [], FALSE, $processedData['data']['uid'], $webp, $contentObjectConfiguration['settings.']['bgMediaQueries']);
 				}
 
 			} elseif ( $processedRecordVariables['jumbotronBgimage'] == 'page' ) {
@@ -300,21 +319,20 @@ public function process(ContentObjectRenderer $cObj, array $contentObjectConfigu
 				if ( count($fileObjects) > 1 ) {
 					// slider
 					$processedData['bgSlides'] =
-					 self::getBackgroundImageUtility()->getBgImage($frontendController->id, 'pages', TRUE, FALSE, [], FALSE, 0, $webp);
+					 self::getBackgroundImageUtility()->getBgImage($frontendController->id, 'pages', TRUE, FALSE, [], FALSE, 0, $webp, $contentObjectConfiguration['settings.']['bgMediaQueries']);
 				} else {
 					// background image
 				$processedData['config']['jumbotron']['bgImage'] =
-				 self::getBackgroundImageUtility()->getBgImage($frontendController->id, 'pages', TRUE, FALSE, [], FALSE, 0, $webp);
+				 self::getBackgroundImageUtility()->getBgImage($frontendController->id, 'pages', TRUE, FALSE, [], FALSE, 0, $webp, $contentObjectConfiguration['settings.']['bgMediaQueries']);
 				}
 			}
 		}
 
-
 		/**
 		 * Background Image (body)
 		 */
 		if ( $contentObjectConfiguration['settings.']['config.']['backgroundImageEnable'] ) {
-			$bgImage = self::getBackgroundImageUtility()->getBgImage($frontendController->id, 'pages', FALSE, FALSE, [], TRUE, 0, $webp);
+			$bgImage = self::getBackgroundImageUtility()->getBgImage($frontendController->id, 'pages', FALSE, FALSE, [], TRUE, 0, $webp, $contentObjectConfiguration['settings.']['bgMediaQueries']);
 			if ( empty($bgImage) && $contentObjectConfiguration['settings.']['config.']['backgroundImageSlide'] ) {
 				foreach ($frontendController->rootLine as $page) {
 					$bgImage = self::getBackgroundImageUtility()
@@ -452,4 +470,79 @@ protected function getBackgroundImageUtility(): BackgroundImageUtility
 	}
 
 
+	/**
+	 * Generate CSS for navigation color
+	 *
+	 * @return string
+	 */
+	protected function getNavigationColor(): string
+	{
+		$queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)->getQueryBuilderForTable('pages');
+		$result = $queryBuilder
+			 ->select('uid','tx_t3sbootstrap_navigationcolor', 'tx_t3sbootstrap_navigationactivecolor', 'tx_t3sbootstrap_navigationhover','tx_t3sbootstrap_navigationbgcolor')
+			 ->from('pages')
+			 ->where(
+				$queryBuilder->expr()->orX(
+					$queryBuilder->expr()->neq('tx_t3sbootstrap_navigationcolor', $queryBuilder->createNamedParameter('')),
+					$queryBuilder->expr()->neq('tx_t3sbootstrap_navigationactivecolor', $queryBuilder->createNamedParameter('')),
+					$queryBuilder->expr()->neq('tx_t3sbootstrap_navigationhover', $queryBuilder->createNamedParameter('')),
+					$queryBuilder->expr()->neq('tx_t3sbootstrap_navigationbgcolor', $queryBuilder->createNamedParameter(''))
+				)
+			 )
+			 ->execute();
+
+		$navbarColors = $result->fetchAll();
+		$navbarColorCSS = '';
+
+		foreach($navbarColors as $navbarColor) {
+
+			$treePages = $this->getTreePids($navbarColor['uid']);
+
+			foreach($treePages as $treepageUid) {
+
+				if ($navbarColor['uid'] == $treepageUid) {
+
+					$item = '#nav-item-'.(int)$treepageUid;
+
+					if ($navbarColor['tx_t3sbootstrap_navigationactivecolor']) {
+						$navbarColorCSS .= $item.'.active .nav-link{color:'.$navbarColor['tx_t3sbootstrap_navigationbgcolor'].' !important}';
+					}
+
+				} else {
+
+					$item = '.dropdown-item-'.(int)$treepageUid;
+
+					if ($navbarColor['tx_t3sbootstrap_navigationcolor']) {
+						$navbarColorCSS .= $item.'{color:'.$navbarColor['tx_t3sbootstrap_navigationcolor'].' !important}';
+					}
+					if ($navbarColor['tx_t3sbootstrap_navigationactivecolor']) {
+						$navbarColorCSS .= $item.'.active{color:'.$navbarColor['tx_t3sbootstrap_navigationactivecolor'].' !important}';
+					}
+					if ($navbarColor['tx_t3sbootstrap_navigationbgcolor']) {
+						$navbarColorCSS .= $item.'.active{background:'.$navbarColor['tx_t3sbootstrap_navigationbgcolor'].' !important}';
+						$navbarColorCSS .= $item.':hover,'.$item.':focus{background:'.$navbarColor['tx_t3sbootstrap_navigationbgcolor'].' !important}';
+					}
+					if ($navbarColor['tx_t3sbootstrap_navigationhover']) {
+						$navbarColorCSS .= $item.':hover,'.$item.':focus{color:'.$navbarColor['tx_t3sbootstrap_navigationhover'].' !important}';
+						$navbarColorCSS .= $item.'.active:hover,'.$item.'.active:focus{color:'.$navbarColor['tx_t3sbootstrap_navigationhover'].' !important}';
+					}
+				}
+			}
+
+		}
+
+		return $navbarColorCSS;
+	}
+
+
+	function getTreePids($parent = 0): array
+	{
+		$queryGenerator = GeneralUtility::makeInstance(QueryGenerator::class);
+
+		 $childPids = $queryGenerator->getTreeList($parent, 999999, 0, 1);
+		 $childPids = explode(',',$childPids );
+
+	    return $childPids;
+	}
+
 }
diff --git a/Classes/Domain/Model/Config.php b/Classes/Domain/Model/Config.php
index 0fd6f325..4f3892a8 100644
--- a/Classes/Domain/Model/Config.php
+++ b/Classes/Domain/Model/Config.php
@@ -257,6 +257,13 @@ class Config extends AbstractEntity
 	 */
 	protected $navbarToggler = '';
 
+	/**
+	 * navbarAnimatedtoggler
+	 *
+	 * @var bool
+	 */
+	protected $navbarAnimatedtoggler = false;
+
 	/**
 	 * navbarBreakpoint
 	 *
@@ -271,6 +278,14 @@ class Config extends AbstractEntity
 	 */
 	protected $navbarOffcanvas = false;
 
+
+	/**
+	 * navbarTransparent
+	 *
+	 * @var bool
+	 */
+	protected $navbarTransparent = false;
+
 	/**
 	 * navbarHeight
 	 *
@@ -1730,6 +1745,68 @@ public function isNavbarOffcanvas()
 		return $this->navbarOffcanvas;
 	}
 
+	/**
+	 * Returns the navbarAnimatedtoggler
+	 *
+	 * @return bool $navbarAnimatedtoggler
+	 */
+	public function getNavbarAnimatedtoggler()
+	{
+		return $this->navbarAnimatedtoggler;
+	}
+
+	/**
+	 * Sets the navbarAnimatedtoggler
+	 *
+	 * @param bool $navbarAnimatedtoggler
+	 * @return void
+	 */
+	public function setNavbarAnimatedtoggler($navbarAnimatedtoggler)
+	{
+		$this->navbarAnimatedtoggler = $navbarAnimatedtoggler;
+	}
+
+	/**
+	 * Returns the boolean state of navbarAnimatedtoggler
+	 *
+	 * @return bool
+	 */
+	public function isNavbarAnimatedtoggler()
+	{
+		return $this->navbarAnimatedtoggler;
+	}
+
+	/**
+	 * Returns the navbarTransparent
+	 *
+	 * @return bool $navbarTransparent
+	 */
+	public function getNavbarTransparent()
+	{
+		return $this->navbarTransparent;
+	}
+
+	/**
+	 * Sets the navbarTransparent
+	 *
+	 * @param bool $navbarTransparent
+	 * @return void
+	 */
+	public function setNavbarTransparent($navbarTransparent)
+	{
+		$this->navbarTransparent = $navbarTransparent;
+	}
+
+	/**
+	 * Returns the boolean state of navbarTransparent
+	 *
+	 * @return bool
+	 */
+	public function isNavbarTransparent()
+	{
+		return $this->navbarTransparent;
+	}
+
 	/**
 	 * Returns the navbarHeight
 	 *
diff --git a/Classes/Helper/ClassHelper.php b/Classes/Helper/ClassHelper.php
index c00afe41..be54d5af 100644
--- a/Classes/Helper/ClassHelper.php
+++ b/Classes/Helper/ClassHelper.php
@@ -220,15 +220,24 @@ public function getTxContainerClass($data, $flexconf, $isVideo, $extConf): strin
 	 */
 	public function getHeaderClass($data): array
 	{
-		$header['class'] = $data['header_position'] ? ' text-'.$data['header_position'] : '';
+		$header['class'] = $data['header_position'] ? 'text-'.$data['header_position'] : '';
 		$header['hClass'] = '';
-
+		$header['hColorVar'] = '';
+		$header['hLine'] = '';
+	
 		if ( $data['tx_t3sbootstrap_header_class'] ) {
+			if (strpos($data['tx_t3sbootstrap_header_class'], 'h-line-1') !== false) {
+				$header['hLine'] = 'h-line-1';
+			}
+			if (strpos($data['tx_t3sbootstrap_header_class'], 'h-line-2') !== false) {
+				$header['hLine'] = 'h-line-2';
+			}
 			$textColors = explode(',','text-primary,text-secondary,text-danger,text-success,text-warning,
 			text-info,text-light,text-dark,text-body,text-muted,text-white');
 			foreach ($textColors as $textColor) {
 				if (strpos($data['tx_t3sbootstrap_header_class'], $textColor) !== false) {
 					$header['hClass'] .= $textColor;
+					$header['hColorVar'] = 'var(--'.substr($textColor, 5).')';
 					$data['tx_t3sbootstrap_header_class'] = trim(str_replace($textColor, '', $data['tx_t3sbootstrap_header_class']));
 					break;
 				}
diff --git a/Classes/Hooks/PageLayoutView/CardPreviewRenderer.php b/Classes/Hooks/PageLayoutView/CardPreviewRenderer.php
deleted file mode 100644
index e5c487ac..00000000
--- a/Classes/Hooks/PageLayoutView/CardPreviewRenderer.php
+++ /dev/null
@@ -1,80 +0,0 @@
-<?php
-namespace T3SBS\T3sbootstrap\Hooks\PageLayoutView;
-
-/*
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-use TYPO3\CMS\Core\Utility\GeneralUtility;
-use TYPO3\CMS\Core\Service\FlexFormService;
-use TYPO3\CMS\Backend\Utility\BackendUtility;
-use TYPO3\CMS\Backend\View\PageLayoutView;
-use TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface;
-
-/**
- * Contains a preview rendering for the page module of CType="t3sbs_card"
- */
-class CardPreviewRenderer implements PageLayoutViewDrawItemHookInterface
-{
-	/**
-	 * Preprocesses the preview rendering of a content element of type "t3sbs_card"
-	 *
-	 * @param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Calling parent object
-	 * @param bool $drawItem Whether to draw the item using the default functionality
-	 * @param string $headerContent Header content
-	 * @param string $itemContent Item content
-	 * @param array $row Record row of tt_content
-	 */
-	public function preProcess(
-		PageLayoutView &$parentObject,
-		&$drawItem,
-		&$headerContent,
-		&$itemContent,
-		array &$row
-	) {
-
-		if ($row['CType'] === 't3sbs_card') {
-
-			$flexformService = GeneralUtility::makeInstance(FlexFormService::class);
-			$flexconf = $flexformService->convertFlexFormContentToArray($row['pi_flexform']);
-
-			if ( $flexconf['text']['top'] ) {
-				$itemContent .= $parentObject->linkEditContent($parentObject->renderText($flexconf['text']['top']), $row) . '<br />';
-			} elseif ( $flexconf['text']['bottom'] ) {
-				$itemContent .= $parentObject->linkEditContent($parentObject->renderText($flexconf['text']['bottom']), $row) . '<br />';
-			}
-
-			if ($row['assets']) {
-				$itemContent .= $parentObject->linkEditContent($parentObject->getThumbCodeUnlinked($row, 'tt_content', 'assets'), $row) . '<br />';
-
-				$fileReferences = BackendUtility::resolveFileReferences('tt_content', 'assets', $row);
-
-				if (!empty($fileReferences)) {
-					$linkedContent = '';
-
-					foreach ($fileReferences as $fileReference) {
-						$description = $fileReference->getDescription();
-						if ($description !== null && $description !== '') {
-							$linkedContent .= htmlspecialchars($description) . '<br />';
-						}
-					}
-
-					$itemContent .= $parentObject->linkEditContent($linkedContent, $row);
-
-					unset($linkedContent);
-				}
-			}
-
-			$drawItem = false;
-		}
-	}
-}
diff --git a/Classes/UserFunction/TcaMatcher.php b/Classes/UserFunction/TcaMatcher.php
index 173bffa0..2921cfc0 100644
--- a/Classes/UserFunction/TcaMatcher.php
+++ b/Classes/UserFunction/TcaMatcher.php
@@ -339,4 +339,22 @@ public function isImage($arguments): bool
 	}
 
 
+	/**
+	 * isDropdownMenu
+	 *
+	 * @return bool
+	 */
+	public function isDropdownMenu($arguments): bool
+	{
+		$level = false;
+		$pageRepository = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Domain\Repository\PageRepository::class);
+		$parentPage = $pageRepository->getPage($arguments['record']['pid']);
+		if ($parentPage['is_siteroot']) {		
+			$level = true;
+		}
+
+		return $level;
+	}
+
+
 }
diff --git a/Classes/Utility/BackgroundImageUtility.php b/Classes/Utility/BackgroundImageUtility.php
index 8a7e78cc..10415dd6 100644
--- a/Classes/Utility/BackgroundImageUtility.php
+++ b/Classes/Utility/BackgroundImageUtility.php
@@ -33,10 +33,11 @@ class BackgroundImageUtility implements SingletonInterface
 	 * @param	bool	$body
 	 * @param	int		$currentUid
 	 * @param	bool	$webp
+	 * @param	string	$bgMediaQueries
 	 *
 	 * @return array
 	 */
-	public function getBgImage($uid, $table='tt_content', $jumbotron=FALSE, $bgColorOnly=FALSE, $flexconf=[], $body=FALSE, $currentUid=0, $webp=FALSE)
+	public function getBgImage($uid, $table='tt_content', $jumbotron=FALSE, $bgColorOnly=FALSE, $flexconf=[], $body=FALSE, $currentUid=0, $webp=FALSE, $bgMediaQueries='2560,1920,1200,992,768,576')
 	{
 		$frontendController = $this->getFrontendController();
 		$fileRepository = GeneralUtility::makeInstance(FileRepository::class);
@@ -56,7 +57,7 @@ public function getBgImage($uid, $table='tt_content', $jumbotron=FALSE, $bgColor
 				$image = $this->imageService()->getImage($file->getOriginalFile()->getUid(), $file->getOriginalFile(), 1);
 				$bgImages = $this->generateSrcsetImages($file, $image);
 				$imageUri_mobile = $webp ? $bgImages[576].'.webp' : $bgImages[576];
-				$css .= $this->generateCss('s'.$uid.'-'.$flexconf['bgimagePosition'], $file, $image, $webp, $flexconf);
+				$css .= $this->generateCss('s'.$uid.'-'.$flexconf['bgimagePosition'], $file, $image, $webp, $flexconf, FALSE, $bgMediaQueries);
 			} else {
 				// slider in jumbotron or two bg-images in two-columns
 				$uid = $frontendController->id;
@@ -65,7 +66,7 @@ public function getBgImage($uid, $table='tt_content', $jumbotron=FALSE, $bgColor
 					$image[$fileKey] = $this->imageService()->getImage((string)$file->getOriginalFile()->getUid(), $file->getOriginalFile(), true);
 					$bgImages[$fileKey] = $this->generateSrcsetImages($file, $image[$fileKey]);
 					$imageUri_mobile[$fileKey] = $webp ? $bgImages[$fileKey][576].'.webp' : $bgImages[$fileKey][576];
-					$css .= $this->generateCss('s'.$uid.'-'.$fileKey, $file, $image[$fileKey], $webp, $flexconf);
+					$css .= $this->generateCss('s'.$uid.'-'.$fileKey, $file, $image[$fileKey], $webp, $flexconf, FALSE, $bgMediaQueries);
 				}
 			}
 		} else {
@@ -79,9 +80,9 @@ public function getBgImage($uid, $table='tt_content', $jumbotron=FALSE, $bgColor
 					$uid = $uid . '-' . $flexconf['bgimagePosition'];
 				}
 				if ($jumbotron) {
-					$css = $this->generateCss('s'.$uid, $file, $image, $webp, $flexconf);
+					$css = $this->generateCss('s'.$uid, $file, $image, $webp, $flexconf, FALSE, $bgMediaQueries);
 				} elseif ($body) {
-					$css = $this->generateCss('page-'.$uid, $file, $image, $webp, $flexconf, TRUE);
+					$css = $this->generateCss('page-'.$uid, $file, $image, $webp, $flexconf, TRUE, $bgMediaQueries);
 				} else {
 					if ( $flexconf['enableAutoheight'] ) {
 						if ( $flexconf['addHeight'] ) {
@@ -90,9 +91,9 @@ public function getBgImage($uid, $table='tt_content', $jumbotron=FALSE, $bgColor
 							GeneralUtility::makeInstance(AssetCollector::class)
 								  ->addInlineJavaScript('addheight-'.$uid, $inline);
 						}
-						$css = $this->generateCss('bg-img-'.$uid, $file, $image, $webp, $flexconf);
+						$css = $this->generateCss('bg-img-'.$uid, $file, $image, $webp, $flexconf, FALSE, $bgMediaQueries);
 					} else {
-						$css = $this->generateCss('s'.$uid, $file, $image, $webp, $flexconf);
+						$css = $this->generateCss('s'.$uid, $file, $image, $webp, $flexconf, FALSE, $bgMediaQueries);
 					}
 				}
 
@@ -126,7 +127,7 @@ public function getBgImage($uid, $table='tt_content', $jumbotron=FALSE, $bgColor
 	 *
 	 * @return string $css
 	 */
-	private function generateCss( $uid, $file, $image, $webp, $flexconf=[], $body=FALSE ): string
+	private function generateCss( $uid, $file, $image, $webp, $flexconf=[], $body=FALSE, $bgMediaQueries): string
 	{
 		$imageRaster = $flexconf['imageRaster'] ? 'url(/typo3conf/ext/t3sbootstrap/Resources/Public/Images/raster.png), ' : '';
 
@@ -134,9 +135,10 @@ private function generateCss( $uid, $file, $image, $webp, $flexconf=[], $body=FA
 		$cropVariantCollection = CropVariantCollection::create((string) $processingInstructions['crop']);
 
 		$css = '';
+		$mediaQueries = explode(',', $bgMediaQueries);
 
-		$mediaQueries = [2560,1920,1200,992,768,576];
 		foreach ($mediaQueries as $querie) {
+			$querie = (int)$querie;
 			if ($querie == 576) {
 				$cropVariant = 'mobile';
 			} elseif ($querie == 768) {
@@ -153,9 +155,10 @@ private function generateCss( $uid, $file, $image, $webp, $flexconf=[], $body=FA
 
 			$processedImage = $this->imageService()->applyProcessingInstructions($image, $processingInstructions);
 
+
+
 			$css .= '@media (max-width: '.$querie.'px) {';
 			if ($webp) {
-
 				if ($body) {
 					$css .= '#'.$uid.'.no-webp {background-image:'.$imageRaster.' url("'.$this->imageService()->getImageUri($processedImage).'");}';
 					$css .= '#'.$uid.'.webp {background-image:'.$imageRaster.' url("'.$this->imageService()->getImageUri($processedImage).'.webp");}';
@@ -163,7 +166,6 @@ private function generateCss( $uid, $file, $image, $webp, $flexconf=[], $body=FA
 					$css .= '.no-webp #'.$uid.' {background-image:'.$imageRaster.' url("'.$this->imageService()->getImageUri($processedImage).'");}';
 					$css .= '.webp #'.$uid.' {background-image:'.$imageRaster.' url("'.$this->imageService()->getImageUri($processedImage).'.webp");}';
 				}
-
 			} else {
 				$css .= '#'.$uid.' {background-image:'.$imageRaster.' url("'.$this->imageService()->getImageUri($processedImage).'");}';
 			}
diff --git a/Classes/ViewHelpers/MediaViewHelper.php b/Classes/ViewHelpers/MediaViewHelper.php
index ca6906a9..bfb2eea9 100644
--- a/Classes/ViewHelpers/MediaViewHelper.php
+++ b/Classes/ViewHelpers/MediaViewHelper.php
@@ -49,6 +49,7 @@ public function initializeArguments()
 			'(min-width: %1$dpx) %1$dpx, 100vw'
 		);
 		$this->registerArgument('breakpoints', 'array', 'Image breakpoints from responsive design.', false, []);
+		$this->registerArgument('imgtag', 'bool', 'Use rendering suggested by picturefill.js', false, true);
 		$this->registerArgument('picturefill', 'bool', 'Use rendering suggested by picturefill.js', false, true);
 		$this->registerArgument('lazyload', 'int', 'Generate markup that supports lazyloading', false, 0);
 		$this->registerArgument('ratio', 'string', 'Image ratio', false, '');
@@ -76,12 +77,16 @@ public function initializeArguments()
 	 */
 	protected function renderImage(FileInterface $image, $width, $height, ?string $fileExtension=null)
 	{
-		if ($this->arguments['breakpoints']) {
-			return $this->renderPicture($image, $width, $height);
-		} elseif ($this->arguments['srcset']) {
-			return $this->renderImageSrcset($image, $width, $height);
+		if ($this->arguments['imgtag']) {
+			return self::renderImageTag($image, $width, $height, $fileExtension);
 		} else {
-			return parent::renderImage($image, $width, $height, $fileExtension);
+			if ($this->arguments['breakpoints']) {
+				return $this->renderPicture($image, $width, $height);
+			} elseif ($this->arguments['srcset']) {
+				return $this->renderImageSrcset($image, $width, $height);
+			} else {
+				return parent::renderImage($image, $width, $height, $fileExtension);
+			}
 		}
 	}
 
@@ -248,7 +253,71 @@ protected function generateFallbackImage(FileInterface $image, $width, Area $cro
 		return $fallbackImage;
 	}
 
+	/**
+	 * Render image tag
+	 *
+	 * @param	FileInterface $image
+	 * @param	string		 $width
+	 * @param	string		 $height
+	 *
+	 * @return string					Rendered image tag
+	 */
+	protected function renderImageTag(FileInterface $image, $width, $height)
+	{
+		 $cropVariant = 'default';
+		 $cropString = $image instanceof FileReference ? $image->getProperty('crop') : '';
 
+		if ( $this->arguments['ratio'] ) {
+			$cropString = self::getCropString($image);
+		}
+
+		 $cropVariantCollection = CropVariantCollection::create((string)$cropString);
+		 $cropArea = $cropVariantCollection->getCropArea($cropVariant);
+
+		if ( $this->arguments['ratio'] ) {
+			$m = $cropArea->getHeight() / $cropArea->getWidth();
+			$height = (int) ceil($height * $m);
+		}
+
+		 $processingInstructions = [
+			 'width' => $width,
+			 'height' => $height,
+			 'crop' => $cropArea->isEmpty() ? null : $cropArea->makeAbsoluteBasedOnFile($image),
+		 ];
+
+		 if (!empty($fileExtension)) {
+			 $processingInstructions['fileExtension'] = $fileExtension;
+		 }
+		 $imageService = $this->getImageService();
+		 $processedImage = $imageService->applyProcessingInstructions($image, $processingInstructions);
+		 $imageUri = $imageService->getImageUri($processedImage);
+
+		 if (!$this->tag->hasAttribute('data-focus-area')) {
+			 $focusArea = $cropVariantCollection->getFocusArea($cropVariant);
+			 if (!$focusArea->isEmpty()) {
+				 $this->tag->addAttribute('data-focus-area', $focusArea->makeAbsoluteBasedOnFile($image));
+			 }
+		 }
+		 $this->tag->addAttribute('src', $imageUri);
+		 $this->tag->addAttribute('width', $processedImage->getProperty('width'));
+		 $this->tag->addAttribute('height', $processedImage->getProperty('height'));
+		 if (in_array($this->arguments['loading'] ?? '', ['lazy', 'eager', 'auto'], true)) {
+			 $this->tag->addAttribute('loading', $this->arguments['loading']);
+		 }
+
+		 $alt = $image->getProperty('alternative');
+		 $title = $image->getProperty('title');
+
+		 // The alt-attribute is mandatory to have valid html-code, therefore add it even if it is empty
+		 if (empty($this->arguments['alt'])) {
+			 $this->tag->addAttribute('alt', $alt);
+		 }
+		 if (empty($this->arguments['title']) && $title) {
+			 $this->tag->addAttribute('title', $title);
+		 }
+
+	    return $this->tag->render();
+	}
 
 	/**
 	 * Returns an $cropString
diff --git a/Configuration/FlexForms/Container/CarouselContainer.xml b/Configuration/FlexForms/Container/CarouselContainer.xml
index b7349534..699c76cb 100644
--- a/Configuration/FlexForms/Container/CarouselContainer.xml
+++ b/Configuration/FlexForms/Container/CarouselContainer.xml
@@ -87,6 +87,15 @@
 						</TCEforms>
 					</ratio>
 
+					<origImage>
+						<TCEforms>
+							<label>Use Original Image</label>
+							<config>
+								<type>check</type>
+							</config>
+						</TCEforms>
+					</origImage>
+
 					<carouselFade>
 						<TCEforms>
 							<label>Switch carousel from horizontal sliding to crossfade</label>
diff --git a/Configuration/TCA/Overrides/pages.php b/Configuration/TCA/Overrides/pages.php
index ea770933..210be68c 100644
--- a/Configuration/TCA/Overrides/pages.php
+++ b/Configuration/TCA/Overrides/pages.php
@@ -103,7 +103,7 @@
 		'label'	=> 'e.g.: fab fa-typo3 fa-lg',
 		'config' => [
 			'type' => 'input',
-			'size' => '20',
+			'size' => 20,
 		]
 	],
 	'tx_t3sbootstrap_icon_only' => [
@@ -116,25 +116,127 @@
 	'tx_t3sbootstrap_titlecolor' => [
 		'label' => 'Page Title Color',
 		'exclude' => 1,
-		'description' => 'default if empty',
+		'description' => 'Hex color codes, RGB or CSS variables e.g. var(--primary)',
 		'config' => [
 			'type' => 'input',
-			'renderType' => 'colorpicker',
-			'size' => 20
+			'size' => 20,
+			'eval' => 'trim',
+			'valuePicker' => [
+				'items' => [
+					['var(--primary)', 'var(--primary)'],
+					['var(--secondary)', 'var(--secondary)'],
+					['var(--success)', 'var(--success)'],
+					['var(--danger)', 'var(--danger)'],
+					['var(--warning)', 'var(--warning)'],
+					['var(--info)', 'var(--info)']
+				],
+			],
 		],
 	],
 	'tx_t3sbootstrap_subtitlecolor' => [
 		'label' => 'Subtitle Color',
 		'exclude' => 1,
-		'description' => 'default if empty',
+		'description' => 'Hex color codes, RGB or CSS variables e.g. var(--primary)',
 		'config' => [
 			'type' => 'input',
-			'renderType' => 'colorpicker',
-			'size' => 20
+			'size' => 20,
+			'eval' => 'trim',
+			'valuePicker' => [
+				'items' => [
+					['var(--primary)', 'var(--primary)'],
+					['var(--secondary)', 'var(--secondary)'],
+					['var(--success)', 'var(--success)'],
+					['var(--danger)', 'var(--danger)'],
+					['var(--warning)', 'var(--warning)'],
+					['var(--info)', 'var(--info)']
+				],
+			],
+		],
+	],
+	'tx_t3sbootstrap_navigationcolor' => [
+		'label' => 'Color',
+		'displayCond' => 'USER:T3SBS\\T3sbootstrap\\UserFunction\\TcaMatcher->isDropdownMenu',
+		'exclude' => 1,
+		'description' => 'Hex color codes, RGB or CSS variables e.g. var(--primary)',
+		'config' => [
+			'type' => 'input',
+			'size' => 20,
+			'eval' => 'trim',
+			'valuePicker' => [
+				'items' => [
+					['var(--primary)', 'var(--primary)'],
+					['var(--secondary)', 'var(--secondary)'],
+					['var(--success)', 'var(--success)'],
+					['var(--danger)', 'var(--danger)'],
+					['var(--warning)', 'var(--warning)'],
+					['var(--info)', 'var(--info)']
+				],
+			],
+		],
+	],
+	'tx_t3sbootstrap_navigationactivecolor' => [
+		'label' => 'Active Color',
+		'displayCond' => 'USER:T3SBS\\T3sbootstrap\\UserFunction\\TcaMatcher->isDropdownMenu',
+		'exclude' => 1,
+		'description' => 'Hex color codes, RGB or CSS variables e.g. var(--primary)',
+		'config' => [
+			'type' => 'input',
+			'size' => 20,
+			'eval' => 'trim',
+			'valuePicker' => [
+				'items' => [
+					['var(--primary)', 'var(--primary)'],
+					['var(--secondary)', 'var(--secondary)'],
+					['var(--success)', 'var(--success)'],
+					['var(--danger)', 'var(--danger)'],
+					['var(--warning)', 'var(--warning)'],
+					['var(--info)', 'var(--info)']
+				],
+			],
+		],
+	],
+	'tx_t3sbootstrap_navigationhover' => [
+		'label' => 'Hover Color',
+		'displayCond' => 'USER:T3SBS\\T3sbootstrap\\UserFunction\\TcaMatcher->isDropdownMenu',
+		'exclude' => 1,
+		'description' => 'Hex color codes, RGB or CSS variables e.g. var(--primary)',
+		'config' => [
+			'type' => 'input',
+			'size' => 20,
+			'eval' => 'trim',
+			'valuePicker' => [
+				'items' => [
+					['var(--primary)', 'var(--primary)'],
+					['var(--secondary)', 'var(--secondary)'],
+					['var(--success)', 'var(--success)'],
+					['var(--danger)', 'var(--danger)'],
+					['var(--warning)', 'var(--warning)'],
+					['var(--info)', 'var(--info)']
+				],
+			],
+		],
+	],
+	'tx_t3sbootstrap_navigationbgcolor' => [
+		'label' => 'Background Active & Hover Color',
+		'displayCond' => 'USER:T3SBS\\T3sbootstrap\\UserFunction\\TcaMatcher->isDropdownMenu',
+		'exclude' => 1,
+		'description' => 'Hex color codes, RGB or CSS variables e.g. var(--primary)',
+		'config' => [
+			'type' => 'input',
+			'size' => 20,
+			'eval' => 'trim',
+			'valuePicker' => [
+				'items' => [
+					['var(--primary)', 'var(--primary)'],
+					['var(--secondary)', 'var(--secondary)'],
+					['var(--success)', 'var(--success)'],
+					['var(--danger)', 'var(--danger)'],
+					['var(--warning)', 'var(--warning)'],
+					['var(--info)', 'var(--info)']
+				],
+			],
 		],
 	]
-
-
 ];
 
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns('pages',$tempPagesColumns);
@@ -150,6 +252,28 @@
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette('pages', 'layout','--linebreak--,tx_t3sbootstrap_linkToTop','after:tx_t3sbootstrap_container');
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette('pages', 'layout','--linebreak--,tx_t3sbootstrap_megamenu','after:tx_t3sbootstrap_linkToTop');
 
+if (array_key_exists('navigationColor', $extconf) && $extconf['navigationColor'] === '1') {
+	# add palette Navigation Colors
+	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
+		'pages',
+		'--palette--; Navigation Colors for dropdown items;navColors',
+		'',
+		'after:title'
+	);
+
+	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
+		'pages', 'navColors','--linebreak--,tx_t3sbootstrap_navigationcolor','after:tx_t3sbootstrap_subtitlecolor'
+	);
+	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
+		'pages', 'navColors','--linebreak--,tx_t3sbootstrap_navigationactivecolor','after:tx_t3sbootstrap_navigationcolor'
+	);
+	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
+		'pages', 'navColors','--linebreak--,tx_t3sbootstrap_navigationhover','after:tx_t3sbootstrap_navigationactivecolor'
+	);
+	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
+		'pages', 'navColors','--linebreak--,tx_t3sbootstrap_navigationbgcolor','after:tx_t3sbootstrap_navigationhover'
+	);
+}
 
 if (array_key_exists('fontawesome', $extconf) && $extconf['fontawesome'] === '1') {
 
@@ -223,3 +347,8 @@
 	'Configuration/TSConfig/Registered/Header.tsconfig',
 	'Remove CType header'
 );
+\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::registerPageTSConfigFile(
+	't3sbootstrap',
+	'Configuration/TSConfig/Registered/Callouts.tsconfig',
+	'Add BS-Callouts options in Layout field'
+);
diff --git a/Configuration/TCA/Overrides/sys_file_reference.php b/Configuration/TCA/Overrides/sys_file_reference.php
index b3390b8a..3a924515 100644
--- a/Configuration/TCA/Overrides/sys_file_reference.php
+++ b/Configuration/TCA/Overrides/sys_file_reference.php
@@ -13,7 +13,7 @@
 		'label' => 'Extra Class - figure-tag',
 		'config' => [
 			'type' => 'input',
-			'size' => 20,
+			'size' => 40,
 			'eval' => 'trim',
 			'valuePicker' => [
 				'items' => [
@@ -24,6 +24,12 @@
 					[ 'mr-3 (margin-right)', 'mr-3', ],
 					[ 'mx-3 (margin-left and -right)', 'mx-3', ],
 					[ 'my-3 (margin-top and -bottom)', 'my-3', ],
+					[ 'Hover zoom (basic)', 'img-hover-zoom', ],
+					[ 'Hover zoom (rotate)', 'img-hover-zoom--zoom-n-rotate', ],
+					[ 'Hover zoom (slowmo)', 'img-hover-zoom--slowmo', ],
+					[ 'Hover zoom (brightness)', 'img-hover-zoom--brightness', ],
+					[ 'Hover zoom (blurzoom)', 'img-hover-zoom--blur', ],
+					[ 'Hover zoom (colorize)', 'img-hover-zoom--colorize', ]	
 				],
 			],
 		],
@@ -33,7 +39,7 @@
 		'label' => 'Extra Class - img-tag',
 		'config' => [
 			'type' => 'input',
-			'size' => 20,
+			'size' => 40,
 			'eval' => 'trim',
 			'valuePicker' => [
 				'items' => [
diff --git a/Configuration/TCA/Overrides/tt_content.php b/Configuration/TCA/Overrides/tt_content.php
index 2e47d912..c3a8c29b 100644
--- a/Configuration/TCA/Overrides/tt_content.php
+++ b/Configuration/TCA/Overrides/tt_content.php
@@ -40,7 +40,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-2_col.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Green.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'] = '
 		--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
@@ -77,7 +76,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-3_col.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Green.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['three_columns']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -98,7 +96,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-4_col.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Green.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['four_columns']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -121,7 +118,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-4_col.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Green.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['six_columns']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -141,7 +137,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-card-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Green.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['card_wrapper']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -161,7 +156,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/bars.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Red.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['button_group']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -180,7 +174,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-card-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Red.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['autoLayout_row']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -199,7 +192,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-background_wrapper.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Red.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['background_wrapper']['showitem'] = '
 		--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
@@ -245,7 +237,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-parallax_wrapper.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Red.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['parallax_wrapper']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['background_wrapper']['showitem'];
 
@@ -264,7 +255,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-card-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Red.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['container']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -283,7 +273,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-carousel-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Red.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['carousel_container']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -302,7 +291,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-accordion-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Blue.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['collapsible_container']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -321,7 +309,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-accordion-element.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Green.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['collapsible_accordion']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['background_wrapper']['showitem'];
 
@@ -340,7 +327,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-modal.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Blue.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['modal']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -359,7 +345,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-tab-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Blue.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['tabs_container']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -378,7 +363,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-tab-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Green.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['tabs_tab']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -397,7 +381,6 @@
 		)
 	)
 	->setIcon('EXT:t3sbootstrap/Resources/Public/Icons/Register/ge-accordion-container.svg')
-	->setBackendTemplate('EXT:t3sbootstrap/Resources/Private/Backend/Templates/Container/Red.html')
 );
 $GLOBALS['TCA']['tt_content']['types']['listGroup_wrapper']['showitem'] = $GLOBALS['TCA']['tt_content']['types']['two_columns']['showitem'];
 
@@ -526,7 +509,10 @@
 					['text-warning', 'text-warning'],
 					['text-info', 'text-info'],
 					['text-black', 'text-black'],
-					['text-white', 'text-white']
+					['text-white', 'text-white'],
+					['text-uppercase', 'text-uppercase'],
+					['One line left and right', 'h-line-1'],
+					['Two lines left and right', 'h-line-2']
 				],
 			],
 		],
@@ -875,6 +861,19 @@
 			'default' => ''
 		]
 	],
+	'tx_t3sbootstrap_image_orig' => [
+		'exclude' => 1,
+		'label' => 'Use Original Image',
+		'displayCond' => 'USER:T3SBS\T3sbootstrap\UserFunction\TcaMatcher->ratio_'.$extconf['origimage'],
+		'config' => [
+			'type' => 'check',
+				'items' => [
+				'1' => [
+					'0' => 'LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:labels.enabled'
+				]
+			]
+		]
+	],
 	'tx_t3sbootstrap_animateCss' => [
 		'exclude' => 1,
 		'l10n_display' => 'hideDiff',
@@ -1219,6 +1218,12 @@
 	'tx_t3sbootstrap_image_ratio',
 	'after:tx_t3sbootstrap_bordercolor'
 );
+\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
+	'tt_content',
+	'mediaAdjustments',
+	'tx_t3sbootstrap_image_orig',
+	'before:tx_t3sbootstrap_image_ratio'
+);
 
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
 	'tt_content',
@@ -1228,7 +1233,6 @@
 );
 
 
-
 # add palette bootstrap etc
 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
 	'tt_content',
@@ -1254,13 +1258,15 @@
 	'',
 	'after:layout'
 );
-# add palette animate
-\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
-	'tt_content',
-	'--palette--;Animation;animate',
-	'',
-	'after:layout'
-);
+# add palette animate if EXT:content_animations is not loaded
+if ( !\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('content_animations') ) {	
+	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
+		'tt_content',
+		'--palette--;Animation;animate',
+		'',
+		'after:layout'
+	);
+}
 
 $GLOBALS['TCA']['tt_content']['palettes']['bsHeaderExtra'] = [
   'showitem' => 'tx_t3sbootstrap_header_display, tx_t3sbootstrap_header_position, --linebreak--,
@@ -1284,7 +1290,7 @@
   'showitem' => 'tx_t3sbootstrap_extra_class,
   --linebreak--, tx_t3sbootstrap_container,
   --linebreak--, tx_t3sbootstrap_flexform'
-];	
+];
 }
 
 $GLOBALS['TCA']['tt_content']['palettes']['bootstrapColor'] = [
@@ -1311,3 +1317,17 @@
 
 
 $GLOBALS['TCA']['tt_content']['types']['list']['subtypes_excludelist']['t3sbootstrap_pi1'] = 'recursive,select_key,pages';
+
+if ( $extconf['preview'] ) {
+	/***************
+	 * Show preview of tt_content elements in page module
+	 */
+	$GLOBALS['TCA']['tt_content']['ctrl']['previewRenderer'] = T3SBS\T3sbootstrap\Backend\Preview\DefaultPreviewRenderer::class;
+	$containers = ['two_columns', 'three_columns', 'four_columns', 'six_columns', 'card_wrapper', 'button_group', 'autoLayout_row',
+	 'background_wrapper','parallax_wrapper',' container', 'carousel_container', 'collapsible_container', 'collapsible_accordion',
+	 'modal', 'tabs_container', 'tabs_tab', 'listGroup_wrapper'];
+	foreach ($containers as $container) {
+		$GLOBALS['TCA']['tt_content']['types'][trim($container)]['previewRenderer'] = T3SBS\T3sbootstrap\Backend\Preview\T3sbPreviewRenderer::class;
+	}
+}
+
diff --git a/Configuration/TCA/tx_t3sbootstrap_domain_model_config.php b/Configuration/TCA/tx_t3sbootstrap_domain_model_config.php
index d10636b4..57d63018 100644
--- a/Configuration/TCA/tx_t3sbootstrap_domain_model_config.php
+++ b/Configuration/TCA/tx_t3sbootstrap_domain_model_config.php
@@ -711,6 +711,7 @@
 					['bg-warning [warning]', 'warning'],
 					['bg-info [info]', 'info'],
 					['bg-white [white]', 'white'],
+					['bg-transparent [transparent]', 'transparent'],
 					['bg-color [color]', 'color'],
 				]
 			]
@@ -725,6 +726,22 @@
 				'type' => 'input'
 			]
 		],
+		'navbar_transparent' => [
+			'exclude' => false,
+			'label' => 'Transparent Navbar',
+			'accordion_id' => 3,
+			'accordion_sub' => '3-3',
+			'info' => 'Placement must be "fixed-top"',
+			'config' => [
+				'type' => 'check',
+				'items' => [
+					'1' => [
+						'0' => 'create a transparent navbar which changes its style on scroll'
+					]
+				]
+			]
+		],
+
 		'navbar_container' => [
 			'exclude' => false,
 			'label' => 'Container',
@@ -876,6 +893,20 @@
 				]
 			]
 		],
+		'navbar_animatedtoggler' => [
+			'exclude' => false,
+			'accordion_id' => 3,
+			'accordion_sub' => '3-6',
+			'label' => 'Animated Toggler',
+			'config' => [
+				'type' => 'check',
+					'items' => [
+					'1' => [
+						'0' => 'Doing it with plain HTML and pure CSS - does not work with "Offcanvas"'
+					]
+				]
+			]
+		],
 		'navbar_breakpoint' => [
 			'exclude' => false,
 			'label' => 'Breakpoint',
diff --git a/Configuration/TSConfig/CKEditor.tsconfig b/Configuration/TSConfig/CKEditor.tsconfig
index 6a0d5af8..b47c502a 100644
--- a/Configuration/TSConfig/CKEditor.tsconfig
+++ b/Configuration/TSConfig/CKEditor.tsconfig
@@ -74,7 +74,7 @@ RTE {
 			telephone.properties {
 				class.default =
 			}
-			properties.class.allowedClasses = phone-link, external-link, internal-link, email-link, download-link, btn, btn btn-primary, btn btn-secondary, btn btn-success, btn btn-danger, btn btn-warning, btn btn-info, btn btn-light, btn btn-dark, js-scroll-trigger
+			properties.class.allowedClasses = phone-link, external-link, internal-link, email-link, download-link, btn, btn btn-primary, btn btn-secondary, btn btn-success, btn btn-danger, btn btn-warning, btn btn-info, btn btn-light, btn btn-dark, js-scroll-trigger, text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light bg-dark, text-dark, text-muted, text-white bg-dark, stretched-link
 			queryParametersSelector.enabled = 0
 
 		}
diff --git a/Configuration/TSConfig/NewContentElements.tsconfig b/Configuration/TSConfig/NewContentElements.tsconfig
index 246ae8b5..0cd27136 100644
--- a/Configuration/TSConfig/NewContentElements.tsconfig
+++ b/Configuration/TSConfig/NewContentElements.tsconfig
@@ -23,25 +23,25 @@ mod.wizards {
 						tt_content_defValues.CType = t3sbs_card
 					}
 					t3sbscarousel {
-						iconIdentifier = bs-carousel
+						iconIdentifier = content-carousel-image
 						title = BS Carousel
 						description = A slideshow component for cycling through elements—images or slides of text—like a carousel.
 						tt_content_defValues.CType = t3sbs_carousel
 					}
 					t3sbutton {
-						iconIdentifier = bs-button
+						iconIdentifier = content-media
 						title = BS Button
 						description = Bootstrap includes several predefined button styles, each serving its own semantic purpose.
 						tt_content_defValues.CType = t3sbs_button
 					}
 					t3sbsfluidtemplate {
-						iconIdentifier = bs-fluidtemplate
+						iconIdentifier = module-templates
 						title = LLL:EXT:t3sbootstrap/Resources/Private/Language/locallang_be.xlf:t3sbs_fluidtemplate.title
 						description = LLL:EXT:t3sbootstrap/Resources/Private/Language/locallang_be.xlf:t3sbs_fluidtemplate.description
 						tt_content_defValues.CType = t3sbs_fluidtemplate
 					}
 					t3sbsgallery {
-						iconIdentifier = bs-gallery
+						iconIdentifier = apps-filetree-folder-media
 						title = LLL:EXT:t3sbootstrap/Resources/Private/Language/locallang_be.xlf:t3sbsgallery.title
 						description = LLL:EXT:t3sbootstrap/Resources/Private/Language/locallang_be.xlf:t3sbsgallery.description
 						tt_content_defValues.CType = t3sbs_gallery
diff --git a/Configuration/TSConfig/Registered/Callouts.tsconfig b/Configuration/TSConfig/Registered/Callouts.tsconfig
new file mode 100644
index 00000000..c3c0a429
--- /dev/null
+++ b/Configuration/TSConfig/Registered/Callouts.tsconfig
@@ -0,0 +1,31 @@
+TCEFORM.tt_content {
+	layout {
+		addItems {
+			94 = ------ T3SB ------
+			95 = Callout primary
+			96 = Callout info
+			97 = Callout success
+			98 = Callout warning
+			99 = Callout danger
+			100 = Callout secondary
+		}
+		altLabels {
+			94 = ------ T3SB ------
+			95 = Callout primary
+			96 = Callout info
+			97 = Callout success
+			98 = Callout warning
+			99 = Callout danger
+			100 = Callout secondary
+		}
+		classes {
+			94 = 
+			95 = bs-callout bs-callout-primary
+			96 = bs-callout bs-callout-info
+			97 = bs-callout bs-callout-success
+			98 = bs-callout bs-callout-warning
+			99 = bs-callout bs-callout-danger
+			100 = bs-callout bs-callout-secondary
+		}
+	}
+}
\ No newline at end of file
diff --git a/Configuration/TypoScript/Page/Template.typoscript b/Configuration/TypoScript/Page/Template.typoscript
index 7fad288c..500168fa 100644
--- a/Configuration/TypoScript/Page/Template.typoscript
+++ b/Configuration/TypoScript/Page/Template.typoscript
@@ -40,6 +40,7 @@ page {
 			backToTopClass = {$bootstrap.backToTopClass}
 			backToTopForAllPages = {$bootstrap.backToTopForAllPages}
 			gtm = {$bootstrap.gtm}
+			bgMediaQueries = {$bootstrap.image.bgMediaQueries}
 			navbar {
 				image.defaultPath = {$bootstrap.navbar.image.defaultPath}
 				image.width = {$bootstrap.navbar.image.width}
@@ -88,11 +89,13 @@ page {
 				navbarImage = {$bootstrap.config.navbarImage}
 				navbarColor = {$bootstrap.config.navbarColor}
 				navbarBackground = {$bootstrap.config.navbarBackground}
+				navbarTransparent = {$bootstrap.config.navbarTransparent}
 				navbarContainer = {$bootstrap.config.navbarContainer}
 				navbarPlacement = {$bootstrap.config.navbarPlacement}
 				navbarAlignment = {$bootstrap.config.navbarAlignment}
 				navbarClass = {$bootstrap.config.navbarClass}
 				navbarToggler = {$bootstrap.config.navbarToggler}
+				navbarAnimatedtoggler = {$bootstrap.config.navbarAnimatedtoggler}
 				navbarBreakpoint = {$bootstrap.config.navbarBreakpoint}
 				navbarOffcanvas = {$bootstrap.config.navbarOffcanvas}
 				navbarHeight = {$bootstrap.config.navbarHeight}
diff --git a/Configuration/TypoScript/constants.typoscript b/Configuration/TypoScript/constants.typoscript
index 045af30c..fe8959c6 100644
--- a/Configuration/TypoScript/constants.typoscript
+++ b/Configuration/TypoScript/constants.typoscript
@@ -32,8 +32,8 @@ bootstrap.cdn {
 	popperjs = 1.16.1
 	# cat=bootstrap-cdn/b-version/12; type=small; label=Fontawesome:
 	fontawesome = 5.15.1
-	# cat=bootstrap-cdn/b-version/20; type=small; label=jQuery library: jQuery 3.5.0 won't work with Bootstrap 4.4.1. Dropdowns and collapse don't work. Reverted to jQuery 3.4.1 to make it work.
-	jquery = 3.5.1
+	# cat=bootstrap-cdn/b-version/20; type=small; label=jQuery library: Downgrade to version 3.5.1 if you have any problems with this version.
+	jquery = 3.6.0
 	# cat=bootstrap-cdn/b-version/22; type=small; label=jQuery Easing:
 	jqueryEasing = 1.4.1
 	# cat=bootstrap-cdn/b-version/25; type=int+; label=Cookieconsent: set to 3 only to get v3.x (latest)
@@ -100,12 +100,14 @@ bootstrap.image {
 	maxWidthToast = 20
 	# cat=bootstrap-image/a-image/70; type=boolean; label=Disable auto row: the default "Gallery row width in % = auto" is set to "none" if activated.
 	disableAutoRow = 0
-	# cat=bootstrap-image/b-image/10; type=small; label=Additional Image Sizes for Desktop min-width 1200px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
+	# cat=bootstrap-image/b-image/10; type=small; label=Additional Image Sizes for Desktop min-width 1200px: comma-separated list of either image widths specified in pixels.
 	srcsetDesktop = 125, 255, 385, 576, 768, 992, 1200, 1440, 1920, 2650
-	# cat=bootstrap-image/b-image/20; type=small; label=Additional Image Sizes for Tablet min-width 576px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
+	# cat=bootstrap-image/b-image/20; type=small; label=Additional Image Sizes for Tablet min-width 576px: comma-separated list of either image widths specified in pixels.
 	srcsetTablet = 125, 255, 385, 576, 768, 992, 1200
-	# cat=bootstrap-image/b-image/30; type=small; label=Additional Image Sizes for Mobile max-width 575px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
+	# cat=bootstrap-image/b-image/30; type=small; label=Additional Image Sizes for Mobile max-width 575px: comma-separated list of either image widths specified in pixels.
 	srcsetMobile = 60, 100, 200, 385, 575
+	# cat=bootstrap-image/b-image/35; type=small; label=Additional Image Sizes for Background-Image: comma-separated list of either image widths specified in pixels.
+	bgMediaQueries = 2560, 1920, 1200, 992, 768, 576
 	# cat=bootstrap-image/c-image/010; type=int+; label=Threshold for Lazy load: if "lazyLoad" is activated in the EM config, the distance out of the viewport, expressed in pixel, before which to start loading the images.
 	lazyLoadThreshold = 0
 	# cat=bootstrap-image/c-image/020; type=boolean; label=Lazy load for images in the BG-Wrapper: not the BG-image
diff --git a/Resources/Private/Backend/Layouts/Default.html b/Resources/Private/Backend/Layouts/Default.html
index 37bc39f9..329bed5a 100644
--- a/Resources/Private/Backend/Layouts/Default.html
+++ b/Resources/Private/Backend/Layouts/Default.html
@@ -1,8 +1,14 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
 <div class="t3sb-config">
 	<f:if condition="{t3version} == 10">
-		<f:asset.css identifier="t3sbcss" href="EXT:t3sbootstrap/Resources/Public/Backend/bestyles10.css" />
+		<f:asset.css identifier="t3sbcss" href="EXT:t3sbootstrap/Resources/Public/Backend/bestyles-v10.css" />
 	</f:if>
+	<f:if condition="{t3version} == 11">
+		<f:asset.css identifier="t3sbcss" href="EXT:t3sbootstrap/Resources/Public/Backend/bestyles-v11.css" />
+	</f:if>
+
+	<f:be.pageRenderer includeRequireJsModules="{0:'TYPO3/CMS/T3sbootstrap/T3sBootstrap'}" />
+
 	<f:flashMessages/>
 	<f:if condition="{isSiteroot}">
 		<div class="t3sb-ext-navigation">
diff --git a/Resources/Private/Backend/Templates/Container/Blue.html b/Resources/Private/Backend/Templates/Container/Blue.html
deleted file mode 100644
index 2679785c..00000000
--- a/Resources/Private/Backend/Templates/Container/Blue.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<html
-    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-    xmlns:container="http://typo3.org/ns/B13/Container/ViewHelpers" 
-    data-namespace-typo3-fluid="true"
->
-<f:format.raw>{tx_container_grid}</f:format.raw>
-</html>
diff --git a/Resources/Private/Backend/Templates/Container/Green.html b/Resources/Private/Backend/Templates/Container/Green.html
deleted file mode 100644
index 2679785c..00000000
--- a/Resources/Private/Backend/Templates/Container/Green.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<html
-    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-    xmlns:container="http://typo3.org/ns/B13/Container/ViewHelpers" 
-    data-namespace-typo3-fluid="true"
->
-<f:format.raw>{tx_container_grid}</f:format.raw>
-</html>
diff --git a/Resources/Private/Backend/Templates/Container/Red.html b/Resources/Private/Backend/Templates/Container/Red.html
deleted file mode 100644
index 2679785c..00000000
--- a/Resources/Private/Backend/Templates/Container/Red.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<html
-    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-    xmlns:container="http://typo3.org/ns/B13/Container/ViewHelpers" 
-    data-namespace-typo3-fluid="true"
->
-<f:format.raw>{tx_container_grid}</f:format.raw>
-</html>
diff --git a/Resources/Private/Layouts/Content/Button.html b/Resources/Private/Layouts/Content/Button.html
index 016ca04b..dc718984 100644
--- a/Resources/Private/Layouts/Content/Button.html
+++ b/Resources/Private/Layouts/Content/Button.html
@@ -53,7 +53,7 @@
 	</f:asset.script>
 </f:if>
 <f:comment> Lightbox - same in News/Detail.html </f:comment>
-<f:if condition="({settings.lightboxSelection} && {data.image_zoom}) || ({settings.lightboxSelection} && {data.CType} == 't3sbs_gallery')">
+<f:if condition="{settings.lightboxSelection} && {lightBox}">
 	<f:comment> Baguette Box </f:comment>
 	<f:if condition="{settings.lightboxSelection} == 1">
 		<f:asset.script identifier="lightbox">
diff --git a/Resources/Private/Layouts/Content/Default.html b/Resources/Private/Layouts/Content/Default.html
index b99e7f4d..5bc647ec 100644
--- a/Resources/Private/Layouts/Content/Default.html
+++ b/Resources/Private/Layouts/Content/Default.html
@@ -110,7 +110,7 @@
 			</div>
 		</f:then>
 		<f:else>
-			<div id="c{data.uid}"{f:if(condition: '{class}',then: ' class="{class}"')}{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}>
+			<div id="c{data.uid}"{f:if(condition: '{class}',then: ' class="{class}"')}{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 				<f:render section="Header" optional="true">
 					<f:render partial="Header/All" arguments="{_all}" />
 				</f:render>
diff --git a/Resources/Private/Layouts/Content/ListgroupWrapper.html b/Resources/Private/Layouts/Content/ListgroupWrapper.html
index 3fe14ead..eb9cae36 100644
--- a/Resources/Private/Layouts/Content/ListgroupWrapper.html
+++ b/Resources/Private/Layouts/Content/ListgroupWrapper.html
@@ -53,7 +53,7 @@
 	</f:asset.script>
 </f:if>
 <f:comment> Lightbox - same in News/Detail.html </f:comment>
-<f:if condition="({settings.lightboxSelection} && {data.image_zoom}) || ({settings.lightboxSelection} && {data.CType} == 't3sbs_gallery')">
+<f:if condition="{settings.lightboxSelection} && {lightBox}">
 	<f:comment> Baguette Box </f:comment>
 	<f:if condition="{settings.lightboxSelection} == 1">
 		<f:asset.script identifier="lightbox">
diff --git a/Resources/Private/Partials/Content/Header/All.html b/Resources/Private/Partials/Content/Header/All.html
index 68dcf76b..67870381 100644
--- a/Resources/Private/Partials/Content/Header/All.html
+++ b/Resources/Private/Partials/Content/Header/All.html
@@ -1,4 +1,7 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<f:if condition="{header.hLine}">
+	<f:render section="inlineCSS" arguments="{_all}" />
+</f:if>
 <f:if condition="{data.header_layout} != 100">
 	<f:if condition="{data.header} || {data.subheader} || {data.date}">
 		<f:if condition="{data.header_layout} == '101'">
@@ -40,3 +43,19 @@
 		dateformat: settings.dateformat
 		}" />
 </f:section>
+
+<f:section name="inlineCSS">
+<f:if condition="{header.hLine} == 'h-line-1'">
+<f:variable name="hlayout">{f:if(condition: '{data.header_layout}',then: 'h{data.header_layout}', else: 'h{header.default}')}</f:variable>
+<f:asset.css identifier="headerInlineCss-{data.uid}">
+header.header-{data.uid}.h-line-1{overflow:hidden;}header.header-{data.uid}.h-line-1 {hlayout} {display: inline-block;position: relative;}header.header-{data.uid}.h-line-1 {hlayout}::before,header.header-{data.uid}.h-line-1 {hlayout}::after {content: "";position: absolute;border-top: 1px solid {header.hColorVar};top: 50%;width: 2000px;}header.header-{data.uid}.h-line-1 {hlayout}::before {margin-right: 15px;right: 100%;}header.header-{data.uid}.h-line-1 {hlayout}::after {margin-left: 15px;left: 100%;}
+</f:asset.css>
+</f:if>
+
+<f:if condition="{header.hLine} == 'h-line-2'">
+<f:variable name="hlayout">{f:if(condition: '{data.header_layout}',then: 'h{data.header_layout}', else: 'h{header.default}')}</f:variable>
+<f:asset.css identifier="headerInlineCss-{data.uid}">
+header.header-{data.uid}.h-line-2 {overflow:hidden;line-height: 0.5;}header.header-{data.uid}.h-line-2 {hlayout} {display: inline-block;position: relative;}header.header-{data.uid}.h-line-2 {hlayout}:before,header.header-{data.uid}.h-line-2 {hlayout}:after {content: "";position: absolute;height: 5px;border-bottom: 1px solid {header.hColorVar};border-top: 1px solid {header.hColorVar};top: 47%;width: 2000px;}header.header-{data.uid}.h-line-2 {hlayout}:before {right: 100%;margin-right: 15px;}header.header-{data.uid}.h-line-2 {hlayout}:after {left: 100%;margin-left: 15px;}
+</f:asset.css>
+</f:if>
+</f:section>
diff --git a/Resources/Private/Partials/Content/Media/Carousel.html b/Resources/Private/Partials/Content/Media/Carousel.html
index add25c9b..4746a078 100644
--- a/Resources/Private/Partials/Content/Media/Carousel.html
+++ b/Resources/Private/Partials/Content/Media/Carousel.html
@@ -68,11 +68,18 @@ <h5>{media.title -> f:format.html()}</h5>
 
 
 <f:section name="Slide">
-	<t3sb:media file="{file}" title="{file.title}" alt="{f:if(condition: file.alternative, then: '{file.alternative}', else: '{t3sb:alternative(title:file.title, name:file.name)}')}"
-	 class="img-fluid{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}{f:if(condition: '({file.properties.tx_t3sbootstrap_lazy_load} && {settings.lazyLoad} == 2) || {settings.lazyLoad} == 1', then: ' lazy')}"
-	  width="{dimensions.width}" height="auto" breakpoints="{
-		0: {'cropVariant': 'default', 'media': '(min-width: 1200px)', 'srcset': '{settings.srcsetDesktop}'},
-		1: {'cropVariant': 'tablet', 'media': '(min-width: 576px)', 'srcset': '{settings.srcsetTablet}'},
-		2: {'cropVariant': 'mobile', 'media': '(max-width: 575px)', 'srcset': '{settings.srcsetMobile}'}
-	}" picturefill="{settings.picturefill}" lazyload="{settings.lazyLoad}" ratio="{ratio}" />
+<f:if condition="{addmedia.origImg}">
+	<f:then>
+		<f:image class="img-fluid{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}" src="fileadmin/{file.identifier}" />
+	</f:then>
+	<f:else>
+		<t3sb:media file="{file}" title="{file.title}" alt="{f:if(condition: file.alternative, then: '{file.alternative}', else: '{t3sb:alternative(title:file.title, name:file.name)}')}"
+		 class="img-fluid{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}{f:if(condition: '({file.properties.tx_t3sbootstrap_lazy_load} && {settings.lazyLoad} == 2) || {settings.lazyLoad} == 1', then: ' lazy')}"
+		  width="{dimensions.width}" height="auto" breakpoints="{
+			0: {'cropVariant': 'default', 'media': '(min-width: 1200px)', 'srcset': '{settings.srcsetDesktop}'},
+			1: {'cropVariant': 'tablet', 'media': '(min-width: 576px)', 'srcset': '{settings.srcsetTablet}'},
+			2: {'cropVariant': 'mobile', 'media': '(max-width: 575px)', 'srcset': '{settings.srcsetMobile}'}
+		}" picturefill="{settings.picturefill}" lazyload="{settings.lazyLoad}" ratio="{ratio}" />
+	</f:else>
+</f:if>
 </f:section>
diff --git a/Resources/Private/Partials/Content/Media/Rendering/Image.html b/Resources/Private/Partials/Content/Media/Rendering/Image.html
index ca13348f..9ea4000e 100644
--- a/Resources/Private/Partials/Content/Media/Rendering/Image.html
+++ b/Resources/Private/Partials/Content/Media/Rendering/Image.html
@@ -1,36 +1,47 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
 	  xmlns:t3sb="http://typo3.org/ns/T3SBS/T3sbootstrap/ViewHelpers" data-namespace-typo3-fluid="true">
-<f:if condition="{file.properties.tx_t3sbootstrap_imgtag}">
+<f:if condition="{addmedia.origImg}">
 	<f:then>
-		<t3sb:media
-			file="{file}"
-			title="{f:if(condition: notitle, then: '', else: '{file.title}')}"
-			alt="{f:if(condition: file.alternative, then: '{file.alternative}', else: '{t3sb:alternative(title:file.title, name:file.name)}')}"
-			class="{addmedia.imgclass}{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}{f:if(condition: '{file.properties.tx_t3sbootstrap_lazy_load} && {settings.lazyLoad} == 2', then: ' lazy')}"
-			width="{dimensions.width}"
-			height="{dimensions.height}"
-			breakpoints=""
-			loading="{settings.lazyLoad}"
-		/>
+		<f:image class="img-fluid{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}" src="fileadmin/{file.identifier}" />
 	</f:then>
 	<f:else>
-		<t3sb:media
-			file="{file}"
-			title="{f:if(condition: notitle, then: '', else: '{file.title}')}"
-			alt="{f:if(condition: file.alternative, then: '{file.alternative}', else: '{t3sb:alternative(title:file.title, name:file.name)}')}"
-			class="{addmedia.imgclass}{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}{f:if(condition: '{file.properties.tx_t3sbootstrap_lazy_load} && {settings.lazyLoad} == 2', then: ' lazy')}"
-			width="{dimensions.width}"
-			height="{dimensions.height}"
-			breakpoints="{
-			0: {'cropVariant': 'default', 'media': '(min-width: 1200px)', 'srcset': '{settings.srcsetDesktop}'},
-			1: {'cropVariant': 'tablet', 'media': '(min-width: 576px)', 'srcset': '{settings.srcsetTablet}'},
-			2: {'cropVariant': 'mobile', 'media': '(max-width: 575px)', 'srcset': '{settings.srcsetMobile}'}
-			}"
-			picturefill="{settings.picturefill}"
-			lazyload="{settings.lazyLoad}"
-			ratio="{f:if(condition: '{dimensions.ratio}', then: '{dimensions.ratio}', else: '{addmedia.ratio}')}"
-		/>
-		</html>
+		<f:if condition="{file.properties.tx_t3sbootstrap_imgtag}">
+			<f:then>
+				<t3sb:media
+					file="{file}"
+					title="{f:if(condition: notitle, then: '', else: '{file.title}')}"
+					alt="{f:if(condition: file.alternative, then: '{file.alternative}', else: '{t3sb:alternative(title:file.title, name:file.name)}')}"
+					class="{addmedia.imgclass}{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}{f:if(condition: '{file.properties.tx_t3sbootstrap_lazy_load} && {settings.lazyLoad} == 2', then: ' lazy')}"
+					width="{dimensions.width}"
+					height="{dimensions.height}"
+					breakpoints=""
+					imgtag="true"
+					picturefill="{settings.picturefill}"
+					lazyload="{settings.lazyLoad}"
+					ratio="{f:if(condition: '{dimensions.ratio}', then: '{dimensions.ratio}', else: '{addmedia.ratio}')}"
+				/>
+			</f:then>
+			<f:else>
+				<t3sb:media
+					file="{file}"
+					title="{f:if(condition: notitle, then: '', else: '{file.title}')}"
+					alt="{f:if(condition: file.alternative, then: '{file.alternative}', else: '{t3sb:alternative(title:file.title, name:file.name)}')}"
+					class="{addmedia.imgclass}{f:if(condition: file.properties.tx_t3sbootstrap_extra_imgclass, then: ' {file.properties.tx_t3sbootstrap_extra_imgclass}')}{f:if(condition: '{file.properties.tx_t3sbootstrap_lazy_load} && {settings.lazyLoad} == 2', then: ' lazy')}"
+					width="{dimensions.width}"
+					height="{dimensions.height}"
+					breakpoints="{
+					0: {'cropVariant': 'default', 'media': '(min-width: 1200px)', 'srcset': '{settings.srcsetDesktop}'},
+					1: {'cropVariant': 'tablet', 'media': '(min-width: 576px)', 'srcset': '{settings.srcsetTablet}'},
+					2: {'cropVariant': 'mobile', 'media': '(max-width: 575px)', 'srcset': '{settings.srcsetMobile}'}
+					}"
+					imgtag="false"
+					picturefill="{settings.picturefill}"
+					lazyload="{settings.lazyLoad}"
+					ratio="{f:if(condition: '{dimensions.ratio}', then: '{dimensions.ratio}', else: '{addmedia.ratio}')}"
+				/>
+				</html>
+			</f:else>
+		</f:if>
 	</f:else>
 </f:if>
 
diff --git a/Resources/Private/Partials/Content/Media/Type/Image.html b/Resources/Private/Partials/Content/Media/Type/Image.html
index 4f41a434..4559b815 100644
--- a/Resources/Private/Partials/Content/Media/Type/Image.html
+++ b/Resources/Private/Partials/Content/Media/Type/Image.html
@@ -109,4 +109,4 @@
 		$(this).parent().parent().prev().removeClass("d-none");
 	});
 </f:asset.script>
-</f:section>
\ No newline at end of file
+</f:section>
diff --git a/Resources/Private/Partials/Page/Navbar/Assets.html b/Resources/Private/Partials/Page/Navbar/Assets.html
index 1e2b4fa2..8b714902 100644
--- a/Resources/Private/Partials/Page/Navbar/Assets.html
+++ b/Resources/Private/Partials/Page/Navbar/Assets.html
@@ -2,10 +2,10 @@
 	xmlns:t3sb="http://typo3.org/ns/T3SBS/T3sbootstrap/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:if condition="{config.navbar.placement} == 'fixed-bottom'">
 	<f:then>
-		<f:variable name="dropupdown" value="dropup" />	
+		<f:variable name="dropupdown" value="dropup" />
 	</f:then>
 	<f:else>
-		<f:variable name="dropupdown" value="dropdown" />		
+		<f:variable name="dropupdown" value="dropdown" />
 	</f:else>
 </f:if>
 <f:if condition="{settings.config.navbarSectionmenu}">
@@ -198,4 +198,44 @@
 	});
 </f:asset.script>
 </f:if>
+<f:if condition="{config.navbar.navColorCSS}">
+<f:asset.css identifier="navColorCSS">
+{config.navbar.navColorCSS}
+</f:asset.css>
+</f:if>
+
+<f:if condition="{config.navbar.transparent}">
+<f:asset.script identifier="navbartransparentJS">
+	// Navbar transparent - Navbar/Assets.html
+	if ( $(window).width() > {settings.navbar.{navbarBreakpoint}} ) {
+		$(window).on('scroll', function () {
+			if ( $(window).scrollTop() > 60 ) {
+				$('.navbar').css('background-color', '{config.navbar.colorschemes}');
+				$('.navbar').css('transition', 'background-color 0.5s ease');
+				$('.navbar').css('-webkit-transition', 'background-color 0.5s ease');
+				$('.navbar').css('-moz-transition', 'background-color 0.5s ease');
+<f:comment>
+				// change navbar color
+				$('.navbar').removeClass('navbar-light');			
+				$('.navbar').addClass('navbar-dark');			
+</f:comment>			
+			} else {
+				$('.navbar').css('background-color', 'var(--transparent)');
+				$('.navbar').css('transition', 'background-color 0.5s ease');
+				$('.navbar').css('-webkit-transition', 'background-color 0.5s ease');
+				$('.navbar').css('-moz-transition', 'background-color 0.5s ease');
+<f:comment>
+				// change navbar color
+				$('.navbar').removeClass('navbar-dark');			
+				$('.navbar').addClass('navbar-light');
+</f:comment>
+			}
+		});
+	} else {
+		$('.navbar').css('background-color', '{config.navbar.colorschemes}');
+	}
+</f:asset.script>
+</f:if>
+
+
 </html>
diff --git a/Resources/Private/Partials/Page/Navbar/Navbar.html b/Resources/Private/Partials/Page/Navbar/Navbar.html
index 52cb769c..8a2e1d0f 100644
--- a/Resources/Private/Partials/Page/Navbar/Navbar.html
+++ b/Resources/Private/Partials/Page/Navbar/Navbar.html
@@ -72,12 +72,12 @@
 			<f:render section="Toggler" arguments="{_all}" />
 		</f:else>
 	</f:if>
-	<div class="{f:if(condition:'{config.navbar.offcanvas}',then:'offcanvas-')}collapse navbar-collapse{f:if(condition:'{settings.config.navbarExtraRow}',then:' flex-column')}" id="navbarToggler">
+	<div class="{f:if(condition:'{config.navbar.offcanvas}',then:'offcanvas-')}collapse px-3 navbar-collapse{f:if(condition:'{settings.config.navbarExtraRow}',then:' flex-column')}" id="navbarToggler">
 		<f:if condition="{navbarMenu} || {sectionMenu}">
 			<f:if condition="{settings.config.navbarExtraRow}">
 				<f:render partial="Page/Navbar/NavbarExtraRow" arguments="{_all}" />
 			</f:if>
-			<ul class="navbar-nav{config.navbar.sectionMenu}{config.navbar.justify}{config.navbar.mauto}">
+			<ul class="navbar-nav pt-3 pt-sm-0{config.navbar.sectionMenu}{config.navbar.justify}{config.navbar.mauto}">
 				<f:if condition="{config.navbar.sectionMenu}">
 					<f:then>
 						<f:render section="SectionMenu" arguments="{_all}" />
@@ -112,12 +112,12 @@
 					</li>
 				</f:if>
 				<f:if condition="{languageNavigation} && {config.lang.uid} && {config.lang.hreflang} && {config.lang.title}">
-					<ul id="language_menu" class="navbar-nav{f:if(condition:'{config.navbar.mauto}',then:'{config.navbar.mauto}',else:' ml-auto')}">
+					<ul id="language_menu" class="navbar-nav pt-2 pt-sm-0{f:if(condition:'{config.navbar.mauto}',then:'{config.navbar.mauto}',else:' ml-auto')}">
 						<f:render partial="Page/Navbar/Language" arguments="{_all}" />
 					</ul>
 				</f:if>
 				<f:if condition="{navbarMenuRight.0} && !{config.navbar.justify} && !{config.navbar.mauto}">
-					<ul class="navbar-nav{f:if(condition:'{languageNavigation}',then:'',else:' ml-auto')}">
+					<ul class="navbar-nav pt-2 pt-sm-0{f:if(condition:'{languageNavigation}',then:'',else:' ml-auto')}">
 						<f:if condition="{settings.navbar.searchboxLink}">
 							<li class="nav-item">
 								<f:link.page class="nav-link" pageUid="{settings.navbar.searchboxLink}"><i class="fa-navlink fas fa-search mx-3"></i></f:link.page>
@@ -203,9 +203,18 @@ <h1 class="text-hide m-0 p-0 float-left mr-2" style="background-image: url('{con
 </f:section>
 
 <f:section name="Toggler">
-	<button class="navbar-toggler" type="button" data-toggle="{f:if(condition:'{config.navbar.offcanvas}',then:'offcanvas',else:'collapse')}" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
-		<span class="navbar-toggler-icon"></span>
-	</button>
+<f:if condition="{config.navbar.animatedToggler}">
+	<f:then>
+		<button class="navbar-toggler p-0 nav-icon collapsed" type="button" data-toggle="{f:if(condition:'{config.navbar.offcanvas}',then:'offcanvas',else:'collapse')}" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
+			<div></div>
+		</button>
+	</f:then>
+	<f:else>
+		<button class="navbar-toggler" type="button" data-toggle="{f:if(condition:'{config.navbar.offcanvas}',then:'offcanvas',else:'collapse')}" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+	</f:else>
+</f:if>
 </f:section>
 
 <f:section name="Menu">
@@ -258,11 +267,11 @@ <h1 class="text-hide m-0 p-0 float-left mr-2" style="background-image: url('{con
 <f:section name="Dropdown">
 	<f:if condition="{navbarItem.data.tx_t3sbootstrap_fontawesome_icon}">
 		<f:then>
-			<a class="nav-link dropdown-toggle" id="dropdown-menu-{navbarItem.data.uid}" href="{f:if(condition: config.navbar.clickableparent, then:'{f:uri.page(pageUid: navbarItem.data.uid)}' , else:'#')}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="{f:if(condition:'{navbarItem.data.tx_t3sbootstrap_icon_only}',then:'{navbarItem.title}',else:'')}">
+			<a class="nav-link dropdown-toggle dropdown-item-{navbarItem.data.uid}{f:if(condition: navbarItem.current, then:' active')}" id="dropdown-menu-{navbarItem.data.uid}" href="{f:if(condition: config.navbar.clickableparent, then:'{f:uri.page(pageUid: navbarItem.data.uid)}' , else:'#')}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="{f:if(condition:'{navbarItem.data.tx_t3sbootstrap_icon_only}',then:'{navbarItem.title}',else:'')}">
 				<i class="{navbarItem.data.tx_t3sbootstrap_fontawesome_icon}"></i>{f:if(condition:'{navbarItem.data.tx_t3sbootstrap_icon_only}',else:' {navbarItem.title}')}</a>
 		</f:then>
 		<f:else>
-			<a class="nav-link dropdown-toggle" id="dropdown-menu-{navbarItem.data.uid}" href="{f:if(condition: config.navbar.clickableparent, then:'{f:uri.page(pageUid: navbarItem.data.uid)}' , else:'#')}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+			<a class="nav-link dropdown-toggle dropdown-item-{navbarItem.data.uid}{f:if(condition: navbarItem.current, then:' active')}" id="dropdown-menu-{navbarItem.data.uid}" href="{f:if(condition: config.navbar.clickableparent, then:'{f:uri.page(pageUid: navbarItem.data.uid)}' , else:'#')}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
 				{navbarItem.title}
 			</a>
 		</f:else>
diff --git a/Resources/Private/Templates/Container/AutoLayoutRow.html b/Resources/Private/Templates/Container/AutoLayoutRow.html
index cbf5c9b8..2efb062d 100644
--- a/Resources/Private/Templates/Container/AutoLayoutRow.html
+++ b/Resources/Private/Templates/Container/AutoLayoutRow.html
@@ -1,7 +1,7 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 <f:layout name="Default" />
 <f:section name="Main">
-	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}>
+	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 	<f:for each="{col_272}" as="row">
 		{row.renderedContent -> f:format.raw()}
 	</f:for>
diff --git a/Resources/Private/Templates/Container/Buttongroup.html b/Resources/Private/Templates/Container/Buttongroup.html
index 26cd33d5..46b7605c 100644
--- a/Resources/Private/Templates/Container/Buttongroup.html
+++ b/Resources/Private/Templates/Container/Buttongroup.html
@@ -2,7 +2,7 @@
 <f:layout name="Button" />
 <f:section name="Main">
 <f:render partial="Header/All" arguments="{_all}" />
-<div{f:if(condition: '{class}',then: ' class="{class}"')} role="group" aria-label="btn-{data.uid}"{dataAnimate}>
+<div{f:if(condition: '{class}',then: ' class="{class}"')} role="group" aria-label="btn-{data.uid}"{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 	<f:for each="{col_271}" as="button">
 		{button.renderedContent -> f:format.raw()}
 	</f:for>
diff --git a/Resources/Private/Templates/Container/FourColumns.html b/Resources/Private/Templates/Container/FourColumns.html
index 0f211b13..eb8fc2e5 100644
--- a/Resources/Private/Templates/Container/FourColumns.html
+++ b/Resources/Private/Templates/Container/FourColumns.html
@@ -3,7 +3,7 @@
 <f:section name="Header">
 </f:section>
 <f:section name="Main">
-	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}>
+	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 		<f:if condition="{data.header} || {data.subheader} || {data.date}">
 			<div class="col-12">
 				<f:render partial="Header/All" arguments="{_all}" />
diff --git a/Resources/Private/Templates/Container/SixColumns.html b/Resources/Private/Templates/Container/SixColumns.html
index 47a4e233..318a6c41 100644
--- a/Resources/Private/Templates/Container/SixColumns.html
+++ b/Resources/Private/Templates/Container/SixColumns.html
@@ -3,7 +3,7 @@
 <f:section name="Header">
 </f:section>
 <f:section name="Main">
-	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}>
+	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 		<f:if condition="{data.header} || {data.subheader} || {data.date}">
 			<div class="col-12">
 				<f:render partial="Header/All" arguments="{_all}" />
diff --git a/Resources/Private/Templates/Container/Tab.html b/Resources/Private/Templates/Container/Tab.html
index 16944480..0334208d 100644
--- a/Resources/Private/Templates/Container/Tab.html
+++ b/Resources/Private/Templates/Container/Tab.html
@@ -1,5 +1,5 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
-<div id="tab-content-{data.uid}" class="tab-pane{f:if(condition: '{tab.switchEffect}',then: ' {tab.switchEffect}')}{f:if(condition:'{class}',then:' {class}')}" role="tabpanel" aria-labelledby="tab-{data.uid}">
+<div id="tab-content-{data.uid}" class="tab-pane{f:if(condition: '{tab.switchEffect}',then: ' {tab.switchEffect}')}{f:if(condition:'{class}',then:' {class}')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}" role="tabpanel" aria-labelledby="tab-{data.uid}">
 	<f:if condition="{tab.contentByPid}">
 		<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{tab.contentByPid}', colPos: '0'}"/>
 	</f:if>
diff --git a/Resources/Private/Templates/Container/TabContainer.html b/Resources/Private/Templates/Container/TabContainer.html
index 1f28a957..646bc4cd 100644
--- a/Resources/Private/Templates/Container/TabContainer.html
+++ b/Resources/Private/Templates/Container/TabContainer.html
@@ -27,7 +27,7 @@
 	}
 </f:asset.script>
 <f:if condition="{class} || {style}">
-	<div{f:if(condition:'{class}',then:' class="{class}"')}{f:if(condition:'{style}',then:' style="{style}"')}{dataAnimate}>
+	<div{f:if(condition:'{class}',then:' class="{class}"')}{f:if(condition:'{style}',then:' style="{style}"')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 </f:if>
 	<f:render partial="Header/All" arguments="{_all}" />
 	<f:switch expression="{tab.displayType}">
diff --git a/Resources/Private/Templates/Container/ThreeColumns.html b/Resources/Private/Templates/Container/ThreeColumns.html
index 15bf711b..896668af 100644
--- a/Resources/Private/Templates/Container/ThreeColumns.html
+++ b/Resources/Private/Templates/Container/ThreeColumns.html
@@ -3,7 +3,7 @@
 <f:section name="Header">
 </f:section>
 <f:section name="Main">
-	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}>
+	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 		<f:if condition="{data.header} || {data.subheader} || {data.date}">
 			<div class="col-12">
 				<f:render partial="Header/All" arguments="{_all}" />
diff --git a/Resources/Private/Templates/Container/TwoColumns.html b/Resources/Private/Templates/Container/TwoColumns.html
index 170310d0..70eca4a2 100644
--- a/Resources/Private/Templates/Container/TwoColumns.html
+++ b/Resources/Private/Templates/Container/TwoColumns.html
@@ -3,7 +3,7 @@
 <f:section name="Header">
 </f:section>
 <f:section name="Main">
-	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}>
+	<div class="row{f:if(condition: '{class}',then: ' {class}')}"{f:if(condition: '{style}',then: ' style="{style}"')}{dataAnimate}{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}>
 		<f:if condition="{data.header} || {data.subheader} || {data.date}">
 			<div class="col-12">
 				<f:render partial="Header/All" arguments="{_all}" />
diff --git a/Resources/Private/Templates/Content/MenuPages.html b/Resources/Private/Templates/Content/MenuPages.html
index 3fa4f834..2dd2534d 100644
--- a/Resources/Private/Templates/Content/MenuPages.html
+++ b/Resources/Private/Templates/Content/MenuPages.html
@@ -6,7 +6,7 @@
 	<ul class="nav menupages{menudirection}{menupills}{menuHorizontalAlignment}">
 		<f:for each="{menu}" as="page">
 			<li class="nav-item">
-				<a href="{page.link}"{f:if(condition:'{page.target}',then:' target="{page.target}"')} title="{page.title}" class="nav-link{f:if(condition:'{page.current}',then:' active')}">
+				<a href="{page.link}"{f:if(condition:'{page.target}',then:' target="{page.target}"')} title="{page.title}" class="nav-link dropdown-item-{page.data.uid}{f:if(condition:'{page.current}',then:' active')}">
 					<f:if condition="{page.nav_title}">
 						<f:then>
 							{page.nav_title}
diff --git a/Resources/Public/Backend/bestyles10.css b/Resources/Public/Backend/bestyles-v10.css
similarity index 100%
rename from Resources/Public/Backend/bestyles10.css
rename to Resources/Public/Backend/bestyles-v10.css
diff --git a/Resources/Public/Backend/bestyles11.css b/Resources/Public/Backend/bestyles-v11.css
similarity index 84%
rename from Resources/Public/Backend/bestyles11.css
rename to Resources/Public/Backend/bestyles-v11.css
index 4a5acf92..46920a8d 100644
--- a/Resources/Public/Backend/bestyles11.css
+++ b/Resources/Public/Backend/bestyles-v11.css
@@ -1,9 +1,4 @@
 
-
-.form-check {
-    padding-left: 0;
-}
-
 .btn:focus, .btn:active {
   outline: none !important;
   box-shadow: none !important;
@@ -25,13 +20,11 @@
 	margin-bottom: 0.2rem !important;
 }
 .card-header {
-
 	background-color: #563D7C !important;
 	border-color: #563D7C !important;
 }
 #accordionConstants .card-header,
 #accordionInfo .card-header {
-
 	background-color: white !important;
 	color: black !important;
 }
@@ -207,7 +200,7 @@ border-color: #7952b3 !important;
 }
 
 .t3sb-ext-navigation .navbar-nav .nav-link {
-    color: #000000;
+    color: rgba(0,0,0,.7);
     text-transform: capitalize;
     padding-left: 20px;
     padding: 12px 20px 12px 20px;
@@ -283,8 +276,8 @@ border-color: #7952b3 !important;
 
 .navbar-toggler-icon {
     display: inline-block;
-    width: 1.5em;
-    height: 1.5em;
+    width: 1.2em;
+    height: 1.2em;
     vertical-align: middle;
     content: "";
     background: no-repeat center center;
@@ -430,3 +423,72 @@ code {
     border-color: #28a745 !important;
 }
 
+
+
+
+
+
+
+
+
+
+
+.card-body, .panel-body {
+    flex: 1 1 auto;
+    padding: 1rem 1rem;
+}
+
+.btn {
+    display: inline-block;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #000;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+	background-color: transparent;
+    border: 1px solid transparent;
+        border-top-color: transparent;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        border-left-color: transparent;
+    padding: .375rem .75rem;
+    font-size: .75rem;
+    border-radius: .125rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.btn-warning {
+    color: #000;
+    background-color: #e8a33d;
+    border-color: #d88b1a;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
+}
+
+
+.form-control {
+    min-width: 120px;
+}
+.form-control {
+    display: block;
+    width: 100%;
+    padding: .375rem .75rem;
+    font-size: .75rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #333;
+    background-color: #fefefe;
+    background-clip: padding-box;
+    border: 1px solid #bbb;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: .125rem;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
diff --git a/Resources/Public/Backend/t3sbootstrap.css b/Resources/Public/Backend/t3sbootstrap.css
index d6bd3e32..70125381 100644
--- a/Resources/Public/Backend/t3sbootstrap.css
+++ b/Resources/Public/Backend/t3sbootstrap.css
@@ -246,6 +246,11 @@ cite {
 }
 
 
+.bg-dark {
+    background-color: #343a40!important;
+}
+
+
 .blockquote {
     margin-bottom: 1rem;
     font-size: 1.25rem;
diff --git a/Resources/Public/Styles/t3sbootstrap.css b/Resources/Public/Styles/t3sbootstrap.css
index 04f0bef3..45b88157 100644
--- a/Resources/Public/Styles/t3sbootstrap.css
+++ b/Resources/Public/Styles/t3sbootstrap.css
@@ -1,7 +1,8 @@
 /*!
  * t3sbootstrap.css
  */
-html{font-size:14px}a{outline:0}.subheader{margin:0}.alert{display:grid}.code{padding:.2rem .4rem;font-size:90%;color:#bd4147;background-color:rgba(86,61,124,.15);border-radius:.25rem;font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}mark{background-color:#ff0;color:#000}.back-to-top{position:fixed;bottom:2em;right:1.5em;text-decoration:none;color:#eee;background-color:transparent;opacity:.7;padding:1em;z-index:999}.back-to-top:hover{background-color:transparent;color:#999}.navbar-light .navbar-nav .nav-link.js-scroll-trigger.active{color:var(--light)}.dropdown-submenu{position:relative}.dropdown-submenu a::after{transform:rotate(-90deg);position:absolute;right:6px;top:.8em}.dropdown-submenu .dropdown-menu{top:0;left:100%;top:-.5rem;margin-left:0;margin-right:0}.dropup .dropdown-menu{top:auto;bottom:100%!important}.dropdown-item.parent-active{color:#151515;text-decoration:none;background-color:#f6f6f6}.dropdown-item.active.parent-active{color:#fff;text-decoration:none;background-color:var(--primary)}.dropdown-divider{display:block}.dropdown-menu-right .dropdown-submenu{position:relative}.dropdown-menu-right .dropdown-submenu .dropdown-menu{top:0;right:100%;left:auto;margin-top:-6px;margin-right:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right .dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px}.dropdown-menu-right .dropdown-submenu:hover>a:after{border-left-color:#fff}.dropdown-menu-right .dropdown-submenu.pull-left{float:none}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right{margin-left:0}.dropdown-menu-right .dropdown-submenu > a::after{display:none}.dropdown-menu-right .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-left:-.8rem;vertical-align:.255em;content:" ";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent;transform:rotate(90deg)}.dropdown-menu{margin:0}.fixed-bottom .dropdown-menu.show{display:inline-table}.fixed-bottom .dropdown-menu .dropdown-submenu .dropdown-menu{margin-top:-1rem}#main-navbar.shrink{height:auto;-webkit-transition:padding-top 0.3s,padding-bottom .3s;-moz-transition:padding-top 0.3s,padding-bottom .3s;transition:padding-top 0.3s,padding-bottom .3s}#main-navbar.navbar-shrink{padding:.5rem 1rem}#main-navbar .t3js-icon img{width:1.2rem;height:.9rem;margin-right:.5rem;margin-top:-.2rem}#sectionmenu,.submenu{min-width:130px}#sectionmenu .nav-link,.submenu .nav-link{position:relative}#sectionmenu .nav-link[data-toggle].collapsed:after,.submenu .nav-link[data-toggle].collapsed:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem}#sectionmenu .nav-link[data-toggle]:not(.collapsed):after,.submenu .nav-link[data-toggle]:not(.collapsed):after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem; -moz-transform: rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dropdown-toggle::after{transition:.7s}.dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}.ge_autoLayout_row figure,.card figure{margin:0}.card .list-group-item{color:#212529}a.card{color:inherit}a.card:hover{text-decoration:none}.card.card-effect-one img{-moz-transition:transform .5s ease-in-out!important;-webkit-transition:transform .5s ease-in-out!important;transition:transform .5s ease-in-out!important}.card.card-effect-one:hover{background-color:var(--light)}.card.card-effect-one:hover img{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.card.card-effect-one::before{content:"";position:absolute;z-index:-1;left:50%;right:50%;bottom:0;background:var(--primary);height:4px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.card.card-effect-one:hover::before,.card.card-effect-one:focus::before,.card.card-effect-one:active::before{left:0;right:0}.card.card-effect-one{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;overflow:hidden;-webkit-transform:scale(1)}.meta-nav.text-white a{color:#fff!important}div.alert p,div.alert ul{margin:0}#language{cursor:pointer}.tx-indexedsearch-redMarkup{color:red}.tx-indexedsearch-info p{margin:0}section.parallax{background-attachment:fixed;background-position:50% 0;background-repeat:no-repeat;background-size:cover;z-index:-1}section.multiple-parallax{background-attachment:fixed,fixed;background-position:left top,50% 0;background-repeat:repeat,no-repeat;background-size:auto,cover;z-index:-1}.absolute{position:absolute!important}.v-row{display:flex;flex-wrap:wrap}.jumbotron.background-image,section.background-image,div.background-image,.content-consent.background-image{background-repeat:no-repeat;background-size:cover;background-position:center center}.jumbotron.multiple-background-image,section.multiple-background-image,div.multiple-background-image{background-repeat:repeat,no-repeat;background-size:auto,cover;background-position:left top,center center}.jumbotron.background-fixed,section.background-fixed,div.background-fixed,div.background-fixed{background-attachment:fixed!important}.col{border:0 solid transparent}.frame-ruler-before:before{content:'';display:block;border-top:1px solid rgba(0,0,0,0.25);margin-bottom:2em}.frame-ruler-after:after{content:'';display:block;border-bottom:1px solid rgba(0,0,0,0.25);margin-top:2em}.frame-indent{margin-left:15%;margin-right:15%}.frame-indent-left{margin-left:33%}.frame-indent-right{margin-right:33%}.preloader{z-index:999;position:absolute;left:calc(50% - 1.5rem);top:50%}.nav-meta,.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .meta-text a,.nav-meta .meta-text a{margin-right:1rem}.nav-scroller .meta-text a:last-child,.nav-meta .meta-text a:last-child{margin-right:0}.nav-scroller .nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;color:rgba(255,255,255,.75);text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.nav-underline .nav-link{padding-top:.75rem;padding-bottom:.75rem;font-size:.875rem;color:var(--gray-dark)}.nav-underline .nav-link:hover{color:var(--danger)}.nav-underline .active{font-weight:500;color:var(--gray-dark)}.nav-underline .nav-link.meta-text{color:var(--gray-dark)}.nav-underline .nav-link.meta-text a:hover{color:var(--danger)}.navbar-expand-no{overflow-y:scroll!important;max-height:100%!important}.sticky.is-sticky{position:fixed;left:0;right:0;top:0;z-index:1000;width:100%}.carousel-indicators{display:flex!important}.carousel-item{transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;-webkit-backface-visibility:visible;backface-visibility:visible;overflow:hidden!important}.carousel figure{margin:0!important}.carousel-caption.caption-animated.animated{position:absolute;top:0;display:flex;justify-content:center;width:auto;color:#fff;text-align:center;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.gallery .row{margin-right:-.5rem;margin-left:-.5rem}.gallery .col-sm{padding-right:.5rem;padding-left:.5rem}.image-gallery .ig-col{padding-right:.5rem;padding-left:.5rem;margin-bottom:1rem}.image-gallery .row{margin-right:-7.5px;margin-left:-7.5px}picture img.lazy{opacity:0}picture img.lazy:not(.initial){transition:opacity 2s}picture img.lazy.initial,picture img.lazy.loaded,picture img.lazy.error{opacity:1}picture img.lazy:not([src]):not([srcset]){visibility:hidden}.inline-YTPlayer{z-index:1011}.content-consent{min-height:200px}.ce-link{text-decoration:none!important;color:inherit!important}.ce-link-content{text-decoration:none!important;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all .3s cubic-bezier(.25,.8,.25,1);padding:1.5rem}.ce-link-content:hover{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.card.ce-link-content{padding:0}.img-transform{transition:transform .3s ease!important}.img-transform:hover,.img-transform:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}figure.image{overflow:hidden;display:inline-grid}.relative{position:relative}.relative .overlay > div{position:absolute;top:2rem}#site-preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#f5f5f5;z-index:99999}#site-spinner{position:absolute;left:calc(50% - 1.5rem);top:50%}.sidebar-sub-item i{text-indent:-1px}figcaption{font-size:.75rem;font-weight:400}.fa,.fas,.far,.fal,.fab{line-height:inherit}.bt_hidden{opacity:0}.bt_visible{opacity:1}.page-pagination{margin:2rem 0}.page-pagination .page-item:first-child .page-link{border-top-left-radius:0;border-bottom-left-radius:0}.page-pagination .page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}.video-card .card-img-overlay{margin-bottom:40px}.zoom-overlay{overflow:hidden;background:transparent;opacity:0;transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s}.image a:hover .zoom-overlay{opacity:.8}.magnifying-glass-icon{color:#fff;text-align:center;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%;padding:20px;border:1px solid #fff;line-height:1;background:rgba(0,0,0,0.5);width:60px;height:60px}.zoom-overlay .description .magnifying-glass-icon{top:50%}.card-img-overlay .card-body{padding:0}.navbar-brand img.d-inline-block{margin-right:.25rem}.media figure.image{position:relative;margin-bottom:0}.media .magnifying-glass-icon{top:50%}.w-33{width:33%!important}.w-66{width:66%!important}.fixedPosition{position:fixed;top:50%;margin:0!important;z-index:999}.fixedPosition-right{right:0}.fixedPosition-left{left:0}.rotate-plus{-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin:0!important}.rotate-minus{-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);margin:0!important}.media-body p{margin-bottom:0}p .svg-inline--fa{margin-right:.4rem}@media (min-width: 576px){html{font-size:16px}.row-eq-height{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.row-eq-height .col,.row-eq-height [class*="col-"]{height:100%!important;}.sm-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 768px){.md-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 992px){.lg-twoColumns{min-width:26rem}.content-consent{min-height:400px}}@media (min-width: 1200px){.xl-twoColumns{min-width:26rem}.content-consent{min-height:500px}}@media (max-width: 1199px){.navbar-expand-xl{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 991px){.navbar-expand-lg{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 767px){.navbar-expand-md{overflow-y:scroll!important;max-height:100%!important}.gallery.w-25,.gallery .w-25{width:100%!important}.gallery.w-50,.gallery .w-50{width:100%!important}.gallery.w-33,.gallery .w-33{width:100%!important}.gallery.w-66,.gallery .w-66{width:100%!important}.gallery.w-75,.gallery .w-75{width:100%!important}.beside .w-25,.align .w-25{width:100%!important}.beside .w-50,.align .w-50{width:100%!important}.beside .w-33,.align .w-33{width:100%!important}.beside .w-66,.align .w-66{width:100%!important}.beside .w-75,.align .w-75{width:100%!important}}@media (max-width: 575px){.navbar-expand-sm{overflow-y:scroll!important;max-height:100%!important}.gallery{text-align:center}.card .img-overlay{color:#FFF;text-shadow:6px 0 6px #666}.card .img-overlay .card-body{padding:0}}.card-flipper .image-flip:hover .backside,.card-flipper .image-flip:active .backside,.card-flipper .image-flip.hover .backside{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);border-radius:.25rem}.card-flipper .image-flip:hover .frontside,.card-flipper .image-flip:active .frontside,.card-flipper .image-flip.hover .frontside{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.card-flipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.card-flipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.card-flipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.card-flipper .frontside,.card-flipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.card-flipper .frontside .card,.card-flipper .backside .card{min-height:312px}.card-flipper .fa-plus-square{color:var(--primary)}#sectionmenu .section-menu.nav-fill.variant{background-color:#fff}#sectionmenu .section-menu.nav-fill.variant .nav-item{display:inline-block;position:relative;height:58px;border-right:2px solid var(--light);border-top:2px solid var(--light);border-bottom:2px solid var(--light);text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;cursor:pointer;white-space:normal}#sectionmenu .section-menu.nav-fill.variant .nav-item:last-child{border-left:2px solid var(--light)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger{line-height:2.6}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active::before{border-left:13px solid transparent;border-right:13px solid transparent;border-top:12px solid var(--primary);position:absolute;top:58px;left:calc(50% - 6px);content:"";display:inline;z-index:2000}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger:hover{color:var(--primary);text-shadow:0 0 5px rgba(169,169,169,0.3)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active,#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active:hover{background-color:var(--primary);border-bottom:1px solid var(--primary);color:#fff;margin-top:0;height:58px;border-top:none}#sectionmenu .section-menu .nav-item.nav-link.active{color:var(--danger)}#sectionmenu .section-menu.nav-pills .nav-item.nav-link.active{color:#fff}.bg-raster{position:relative}.bg-raster:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:url(/typo3conf/ext/t3sbootstrap/Resources/Public/Images/raster.png) repeat}#background-carousel{width:100%;height:100%;z-index:-1}#background-carousel .carousel,#background-carousel .carousel-inner{width:100%;height:100%;z-index:0;overflow:hidden}#background-carousel .carousel-item{width:100%;height:100%;background-position:center center;background-size:cover;z-index:0}#background-carousel #content-wrapper{position:absolute;z-index:1!important;min-width:100%;min-height:100%}#background-carousel .carousel-control-prev,#background-carousel .carousel-control-next{z-index:2}.carousel-control-prev,.carousel-control-next{z-index:10}.list-group .page-navigation:last-child{margin-top:1.5rem}.card-img-overlay .card-text p:last-child{margin-bottom:0}.card-deck{margin:0;justify-content:space-between}.card-deck .card{margin:0}@media (min-width: 576px) and (max-width: 767.98px){.card-deck .card{-ms-flex:0 0 48.7%;flex:0 0 48.7%;border:1px solid rgba(0,0,0,0.125);border-radius:.25rem}}@media (min-width: 768px) and (max-width: 991.98px){.card-deck .card{-ms-flex:0 0 32%;flex:0 0 32%}}@media (min-width: 992px){.card-deck .card{-ms-flex:0 0 24%;flex:0 0 24%}}@media (min-width: 576px) and (max-width: 767.98px){.card-group > .card{flex:1 0 100%}}@media (min-width: 768px){.card-group > .card{flex:1 0 50%}}@media (min-width: 992px){.card-group > .card{flex:1 0 33.333%}}@media (min-width: 1200px){.card-group > .card{flex:1 0 25%}}@media (min-width: 576px){.card-columns{column-count:2}.image-flip .mainflip,.image-flip .frontside,.image-flip .backside,.image-flip .card{height:100%}}@media (min-width: 768px){.card-columns{column-count:3}}@media (min-width: 992px){.card-columns{column-count:4}}@media (min-width: 1200px){.card-columns{column-count:4}}.news .card{box-shadow:0 0 0 rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);transition:all .3s cubic-bezier(.25,.8,.25,1)}.news .card:hover,.news .card:active{box-shadow:0 4px 8px rgba(0,0,0,0.25),0 2px 2px rgba(0,0,0,0.22);z-index:101}.news .list-group-item .d-sm-block p{margin-bottom:0}#news-preloader{position:relative;top:0;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-preloader-bottom{position:relative;top:-75px;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-spinner{position:absolute;right:0;top:-.5rem}.news .list-group-item .card-text p{margin-bottom:0}.news .list-group-item .media figure{margin-bottom:0}.cardflipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.cardflipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.cardflipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.cardflipper .frontside,.cardflipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.cardflipper .fa-plus-square{color:var(--primary)}.cardflipper .fa-minus-square{color:var(--primary)}.cardflipper .fa-plus-square:hover,.cardflipper .fa-minus-square:hover{cursor:pointer}.card-flipper .card-footer,.cardflipper .card-footer{padding:.75rem 1.25rem;background-color:transparent;border-top:none}.card-flipper .backside,.card-flipper .backside .card,.cardflipper .backside,.cardflipper .backside .card{height:100%}.card-footer{text-align:center}.img-copyright{position:relative;margin-top:-31px;margin-right:.5rem;display:flex;margin-left:auto}.img-copyright:hover{cursor:help}.img-copyright-default{position:relative;margin-top:-24px;margin-right:.5rem;display:flex;margin-left:auto}span.copyright{margin-right:.5rem}.zoom-right{display:flex;margin-left:auto}.zoom-center{display:flex}.card .image-caption.text-right{margin-right:.5rem;margin-right:.5rem}figure .toast{margin-bottom:0!important;z-index:1}.imageorient-1 figure.image .zoom-overlay,.imageorient-9 figure.image .zoom-overlay{right:.5rem}.imageorient-2 figure.image .zoom-overlay,.imageorient-10 figure.image .zoom-overlay,.imageorient-17 figure.image .zoom-overlay,.imageorient-18 figure.image .zoom-overlay,.imageorient-25 figure.image .zoom-overlay,.imageorient-26 figure.image .zoom-overlay,.imageorient-66 figure.image .zoom-overlay,.imageorient-77 figure.image .zoom-overlay{left:.5rem}.news-single figure.image .zoom-overlay{left:1rem}body.md .dd-animate-1,body.lg .dd-animate-1,body.xl .dd-animate-1{animation-duration:.3s;-webkit-animation-duration:.3s;animation-fill-mode:both;-webkit-animation-fill-mode:both}@keyframes slideIn{0%{transform:translateY(1rem);opacity:0}100%{transform:translateY(0rem);opacity:1}0%{transform:translateY(1rem);opacity:0}}@-webkit-keyframes slideIn{0%{-webkit-transform:transform;-webkit-opacity:0}100%{-webkit-transform:translateY(0);-webkit-opacity:1}0%{-webkit-transform:translateY(1rem);-webkit-opacity:0}}.slideIn{-webkit-animation-name:slideIn;animation-name:slideIn}body.md .dd-animate-3,body.lg .dd-animate-3,body.xl .dd-animate-3{display:block;visibility:hidden;opacity:0;transform:translateY(50px);transition:.5s ease all}body.md .dd-animate-3.show,body.lg .dd-animate-3.show,body.xl .dd-animate-3.show{display:block;visibility:visible;opacity:1;transform:translateY(0px);transition:.5s ease all}body.md .dd-animate-4 .dropdown-submenu .dropdown-menu,body.lg .dd-animate-4 .dropdown-submenu .dropdown-menu,body.xl .dd-animate-4 .dropdown-submenu .dropdown-menu,body.md .dd-animate-4,body.lg .dd-animate-4,body.xl .dd-animate-4{animation-name:example;animation-duration:1s}@keyframes example{from{opacity:.2}to{opacity:1}}
+html{font-size:14px}a{outline:0}.subheader{margin:0}.alert{display:grid}.code{padding:.2rem .4rem;font-size:90%;color:#bd4147;background-color:rgba(86,61,124,.15);border-radius:.25rem;font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}mark{background-color:#ff0;color:#000}.back-to-top{position:fixed;bottom:2em;right:1.5em;text-decoration:none;color:#eee;background-color:transparent;opacity:.7;padding:1em;z-index:999}.back-to-top:hover{background-color:transparent;color:#999}.navbar-light .navbar-nav .nav-link.js-scroll-trigger.active{color:var(--light)}.dropdown-submenu{position:relative}.dropdown-submenu a::after{transform:rotate(-90deg);position:absolute;right:6px;top:.8em}.dropdown-submenu .dropdown-menu{top:0;left:100%;top:-.5rem;margin-left:0;margin-right:0}.dropup .dropdown-menu{top:auto;bottom:100%!important}.dropdown-item.parent-active{color:#151515;text-decoration:none;background-color:#f6f6f6}.dropdown-item.active.parent-active{color:#fff;text-decoration:none;background-color:var(--primary)}.dropdown-divider{display:block}.dropdown-menu-right .dropdown-submenu{position:relative}.dropdown-menu-right .dropdown-submenu .dropdown-menu{top:0;right:100%;left:auto;margin-top:-6px;margin-right:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right .dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px}.dropdown-menu-right .dropdown-submenu:hover>a:after{border-left-color:#fff}.dropdown-menu-right .dropdown-submenu.pull-left{float:none}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right{margin-left:0}.dropdown-menu-right .dropdown-submenu > a::after{display:none}.dropdown-menu-right .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-left:-.8rem;vertical-align:.255em;content:" ";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent;transform:rotate(90deg)}.dropdown-menu{margin:0}.fixed-bottom .dropdown-menu.show{display:inline-table}.fixed-bottom .dropdown-menu .dropdown-submenu .dropdown-menu{margin-top:-1rem}#main-navbar.shrink{height:auto;-webkit-transition:padding-top 0.3s,padding-bottom .3s;-moz-transition:padding-top 0.3s,padding-bottom .3s;transition:padding-top 0.3s,padding-bottom .3s}#main-navbar.navbar-shrink{padding:.5rem 1rem}#main-navbar .t3js-icon img{width:1.2rem;height:.9rem;margin-right:.5rem;margin-top:-.2rem}#sectionmenu,.submenu{min-width:130px}#sectionmenu .nav-link,.submenu .nav-link{position:relative}#sectionmenu .nav-link[data-toggle].collapsed:after,.submenu .nav-link[data-toggle].collapsed:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem}#sectionmenu .nav-link[data-toggle]:not(.collapsed):after,.submenu .nav-link[data-toggle]:not(.collapsed):after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem; -moz-transform: rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dropdown-toggle::after{transition:.7s}.dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}.ge_autoLayout_row figure,.card figure{margin:0}.card .list-group-item{color:#212529}a.card{color:inherit}a.card:hover{text-decoration:none}.card.card-effect-one img{-moz-transition:transform .5s ease-in-out!important;-webkit-transition:transform .5s ease-in-out!important;transition:transform .5s ease-in-out!important}.card.card-effect-one:hover{background-color:var(--light)}.card.card-effect-one:hover img{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.card.card-effect-one::before{content:"";position:absolute;z-index:-1;left:50%;right:50%;bottom:0;background:var(--primary);height:4px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.card.card-effect-one:hover::before,.card.card-effect-one:focus::before,.card.card-effect-one:active::before{left:0;right:0}.card.card-effect-one{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;overflow:hidden;-webkit-transform:scale(1)}.meta-nav.text-white a{color:#fff!important}div.alert p,div.alert ul{margin:0}#language{cursor:pointer}.tx-indexedsearch-redMarkup{color:red}.tx-indexedsearch-info p{margin:0}section.parallax{background-attachment:fixed;background-position:50% 0;background-repeat:no-repeat;background-size:cover;z-index:-1}section.multiple-parallax{background-attachment:fixed,fixed;background-position:left top,50% 0;background-repeat:repeat,no-repeat;background-size:auto,cover;z-index:-1}.absolute{position:absolute!important}.v-row{display:flex;flex-wrap:wrap}.jumbotron.background-image,section.background-image,div.background-image,.content-consent.background-image{background-repeat:no-repeat;background-size:cover;background-position:center center}.jumbotron.multiple-background-image,section.multiple-background-image,div.multiple-background-image{background-repeat:repeat,no-repeat;background-size:auto,cover;background-position:left top,center center}.jumbotron.background-fixed,section.background-fixed,div.background-fixed,div.background-fixed{background-attachment:fixed!important}.col{border:0 solid transparent}.frame-ruler-before:before{content:'';display:block;border-top:1px solid rgba(0,0,0,0.25);margin-bottom:2em}.frame-ruler-after:after{content:'';display:block;border-bottom:1px solid rgba(0,0,0,0.25);margin-top:2em}.frame-indent{margin-left:15%;margin-right:15%}.frame-indent-left{margin-left:33%}.frame-indent-right{margin-right:33%}.preloader{z-index:999;position:absolute;left:calc(50% - 1.5rem);top:50%}.nav-meta,.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .meta-text a,.nav-meta .meta-text a{margin-right:1rem}.nav-scroller .meta-text a:last-child,.nav-meta .meta-text a:last-child{margin-right:0}.nav-scroller .nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;color:rgba(255,255,255,.75);text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.nav-underline .nav-link{padding-top:.75rem;padding-bottom:.75rem;font-size:.875rem;color:var(--gray-dark)}.nav-underline .nav-link:hover{color:var(--danger)}.nav-underline .active{font-weight:500;color:var(--gray-dark)}.nav-underline .nav-link.meta-text{color:var(--gray-dark)}.nav-underline .nav-link.meta-text a:hover{color:var(--danger)}.navbar-expand-no{overflow-y:scroll!important;max-height:100%!important}.sticky.is-sticky{position:fixed;left:0;right:0;top:0;z-index:1000;width:100%}.carousel-indicators{display:flex!important}.carousel-item{transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;-webkit-backface-visibility:visible;backface-visibility:visible;overflow:hidden!important}.carousel figure{margin:0!important}.carousel-caption.caption-animated.animated{position:absolute;top:0;display:flex;justify-content:center;width:auto;color:#fff;text-align:center;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.gallery .row{margin-right:-.5rem;margin-left:-.5rem}.gallery .col-sm{padding-right:.5rem;padding-left:.5rem}.image-gallery .ig-col{padding-right:.5rem;padding-left:.5rem;margin-bottom:1rem}.image-gallery .row{margin-right:-7.5px;margin-left:-7.5px}picture img.lazy{opacity:0}picture img.lazy:not(.initial){transition:opacity 2s}picture img.lazy.initial,picture img.lazy.loaded,picture img.lazy.error{opacity:1}picture img.lazy:not([src]):not([srcset]){visibility:hidden}.inline-YTPlayer{z-index:1011}.content-consent{min-height:200px}.ce-link{text-decoration:none!important;color:inherit!important}.ce-link-content{text-decoration:none!important;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all .3s cubic-bezier(.25,.8,.25,1);padding:1.5rem}.ce-link-content:hover{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.card.ce-link-content{padding:0}.img-transform{transition:transform .3s ease!important}.img-transform:hover,.img-transform:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}figure.image{overflow:hidden;display:inline-grid}.relative{position:relative}.relative .overlay > div{position:absolute;top:2rem}#site-preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#f5f5f5;z-index:99999}#site-spinner{position:absolute;left:calc(50% - 1.5rem);top:50%}.sidebar-sub-item i{text-indent:-1px}figcaption{font-size:.75rem;font-weight:400}.fa,.fas,.far,.fal,.fab{line-height:inherit}.bt_hidden{opacity:0}.bt_visible{opacity:1}.page-pagination{margin:2rem 0}.page-pagination .page-item:first-child .page-link{border-top-left-radius:0;border-bottom-left-radius:0}.page-pagination .page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}.video-card .card-img-overlay{margin-bottom:40px}.zoom-overlay{overflow:hidden;background:transparent;opacity:0;transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s}.image a:hover .zoom-overlay{opacity:.8}.magnifying-glass-icon{color:#fff;text-align:center;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%;padding:20px;border:1px solid #fff;line-height:1;background:rgba(0,0,0,0.5);width:60px;height:60px}.zoom-overlay .description .magnifying-glass-icon{top:50%}.card-img-overlay .card-body{padding:0}.navbar-brand img.d-inline-block{margin-right:.25rem}.media figure.image{position:relative;margin-bottom:0}.media .magnifying-glass-icon{top:50%}.w-33{width:33%!important}.w-66{width:66%!important}.fixedPosition{position:fixed;top:50%;margin:0!important;z-index:999}.fixedPosition-right{right:0}.fixedPosition-left{left:0}.rotate-plus{-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin:0!important}.rotate-minus{-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);margin:0!important}.media-body p{margin-bottom:0}p .svg-inline--fa{margin-right:.4rem}@media (min-width: 576px){html{font-size:16px}.row-eq-height{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.row-eq-height .col,.row-eq-height [class*="col-"]{height:100%!important;}.sm-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 768px){.md-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 992px){.lg-twoColumns{min-width:26rem}.content-consent{min-height:400px}}@media (min-width: 1200px){.xl-twoColumns{min-width:26rem}.content-consent{min-height:500px}}@media (max-width: 1199px){.navbar-expand-xl{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 991px){.navbar-expand-lg{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 767px){.navbar-expand-md{overflow-y:scroll!important;max-height:100%!important}.gallery.w-25,.gallery .w-25{width:100%!important}.gallery.w-50,.gallery .w-50{width:100%!important}.gallery.w-33,.gallery .w-33{width:100%!important}.gallery.w-66,.gallery .w-66{width:100%!important}.gallery.w-75,.gallery .w-75{width:100%!important}.beside .w-25,.align .w-25{width:100%!important}.beside .w-50,.align .w-50{width:100%!important}.beside .w-33,.align .w-33{width:100%!important}.beside .w-66,.align .w-66{width:100%!important}.beside .w-75,.align .w-75{width:100%!important}}@media (max-width: 575px){.navbar-expand-sm{overflow-y:scroll!important;max-height:100%!important}.gallery{text-align:center}.card .img-overlay{color:#FFF;text-shadow:6px 0 6px #666}.card .img-overlay .card-body{padding:0}}.card-flipper .image-flip:hover .backside,.card-flipper .image-flip:active .backside,.card-flipper .image-flip.hover .backside{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);border-radius:.25rem}.card-flipper .image-flip:hover .frontside,.card-flipper .image-flip:active .frontside,.card-flipper .image-flip.hover .frontside{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.card-flipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.card-flipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.card-flipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.card-flipper .frontside,.card-flipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.card-flipper .frontside .card,.card-flipper .backside .card{min-height:312px}.card-flipper .fa-plus-square{color:var(--primary)}#sectionmenu .section-menu.nav-fill.variant{background-color:#fff}#sectionmenu .section-menu.nav-fill.variant .nav-item{display:inline-block;position:relative;height:58px;border-right:2px solid var(--light);border-top:2px solid var(--light);border-bottom:2px solid var(--light);text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;cursor:pointer;white-space:normal}#sectionmenu .section-menu.nav-fill.variant .nav-item:last-child{border-left:2px solid var(--light)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger{line-height:2.6}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active::before{border-left:13px solid transparent;border-right:13px solid transparent;border-top:12px solid var(--primary);position:absolute;top:58px;left:calc(50% - 6px);content:"";display:inline;z-index:2000}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger:hover{color:var(--primary);text-shadow:0 0 5px rgba(169,169,169,0.3)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active,#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active:hover{background-color:var(--primary);border-bottom:1px solid var(--primary);color:#fff;margin-top:0;height:58px;border-top:none}#sectionmenu .section-menu .nav-item.nav-link.active{color:var(--danger)}#sectionmenu .section-menu.nav-pills .nav-item.nav-link.active{color:#fff}.bg-raster{position:relative}.bg-raster:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:url(/typo3conf/ext/t3sbootstrap/Resources/Public/Images/raster.png) repeat}#background-carousel{width:100%;height:100%;z-index:-1}#background-carousel .carousel,#background-carousel .carousel-inner{width:100%;height:100%;z-index:0;overflow:hidden}#background-carousel .carousel-item{width:100%;height:100%;background-position:center center;background-size:cover;z-index:0}#background-carousel #content-wrapper{position:absolute;z-index:1!important;min-width:100%;min-height:100%}#background-carousel .carousel-control-prev,#background-carousel .carousel-control-next{z-index:2}.carousel-control-prev,.carousel-control-next{z-index:10}.list-group .page-navigation:last-child{margin-top:1.5rem}.card-img-overlay .card-text p:last-child{margin-bottom:0}.card-deck{margin:0;justify-content:space-between}.card-deck .card{margin:0}@media (min-width: 576px) and (max-width: 767.98px){.card-deck .card{-ms-flex:0 0 48.7%;flex:0 0 48.7%;border:1px solid rgba(0,0,0,0.125);border-radius:.25rem}}@media (min-width: 768px) and (max-width: 991.98px){.card-deck .card{-ms-flex:0 0 32%;flex:0 0 32%}}@media (min-width: 992px){.card-deck .card{-ms-flex:0 0 24%;flex:0 0 24%}}@media (min-width: 576px) and (max-width: 767.98px){.card-group > .card{flex:1 0 100%}}@media (min-width: 768px){.card-group > .card{flex:1 0 50%}}@media (min-width: 992px){.card-group > .card{flex:1 0 33.333%}}@media (min-width: 1200px){.card-group > .card{flex:1 0 25%}}@media (min-width: 576px){.card-columns{column-count:2}.image-flip .mainflip,.image-flip .frontside,.image-flip .backside,.image-flip .card{height:100%}}@media (min-width: 768px){.card-columns{column-count:3}}@media (min-width: 992px){.card-columns{column-count:4}}@media (min-width: 1200px){.card-columns{column-count:4}}.news .card{box-shadow:0 0 0 rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);transition:all .3s cubic-bezier(.25,.8,.25,1)}.news .card:hover,.news .card:active{box-shadow:0 4px 8px rgba(0,0,0,0.25),0 2px 2px rgba(0,0,0,0.22);z-index:101}.news .list-group-item .d-sm-block p{margin-bottom:0}#news-preloader{position:relative;top:0;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-preloader-bottom{position:relative;top:-75px;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-spinner{position:absolute;right:0;top:-.5rem}.news .list-group-item .card-text p{margin-bottom:0}.news .list-group-item .media figure{margin-bottom:0}.cardflipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.cardflipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.cardflipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.cardflipper .frontside,.cardflipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.cardflipper .fa-plus-square{color:var(--primary)}.cardflipper .fa-minus-square{color:var(--primary)}.cardflipper .fa-plus-square:hover,.cardflipper .fa-minus-square:hover{cursor:pointer}.card-flipper .card-footer,.cardflipper .card-footer{padding:.75rem 1.25rem;background-color:transparent;border-top:none}.card-flipper .backside,.card-flipper .backside .card,.cardflipper .backside,.cardflipper .backside .card{height:100%}.card-footer{text-align:center}.img-copyright{position:relative;margin-top:-31px;margin-right:.5rem;display:flex;margin-left:auto}.img-copyright:hover{cursor:help}.img-copyright-default{position:relative;margin-top:-24px;margin-right:.5rem;display:flex;margin-left:auto}span.copyright{margin-right:.5rem}.zoom-right{display:flex;margin-left:auto}.zoom-center{display:flex}.card .image-caption.text-right{margin-right:.5rem;margin-right:.5rem}figure .toast{margin-bottom:0!important;z-index:1}.imageorient-1 figure.image .zoom-overlay,.imageorient-9 figure.image .zoom-overlay{right:.5rem}.imageorient-2 figure.image .zoom-overlay,.imageorient-10 figure.image .zoom-overlay,.imageorient-17 figure.image .zoom-overlay,.imageorient-18 figure.image .zoom-overlay,.imageorient-25 figure.image .zoom-overlay,.imageorient-26 figure.image .zoom-overlay,.imageorient-66 figure.image .zoom-overlay,.imageorient-77 figure.image .zoom-overlay{left:.5rem}.news-single figure.image .zoom-overlay{left:1rem}body.md .dd-animate-1,body.lg .dd-animate-1,body.xl .dd-animate-1{animation-duration:.3s;-webkit-animation-duration:.3s;animation-fill-mode:both;-webkit-animation-fill-mode:both}@keyframes slideIn{0%{transform:translateY(1rem);opacity:0}100%{transform:translateY(0rem);opacity:1}0%{transform:translateY(1rem);opacity:0}}@-webkit-keyframes slideIn{0%{-webkit-transform:transform;-webkit-opacity:0}100%{-webkit-transform:translateY(0);-webkit-opacity:1}0%{-webkit-transform:translateY(1rem);-webkit-opacity:0}}.slideIn{-webkit-animation-name:slideIn;animation-name:slideIn}body.md .dd-animate-3,body.lg .dd-animate-3,body.xl .dd-animate-3{display:block;visibility:hidden;opacity:0;transform:translateY(50px);transition:.5s ease all}body.md .dd-animate-3.show,body.lg .dd-animate-3.show,body.xl .dd-animate-3.show{display:block;visibility:visible;opacity:1;transform:translateY(0px);transition:.5s ease all}body.md .dd-animate-4 .dropdown-submenu .dropdown-menu,body.lg .dd-animate-4 .dropdown-submenu .dropdown-menu,body.xl .dd-animate-4 .dropdown-submenu .dropdown-menu,body.md .dd-animate-4,body.lg .dd-animate-4,body.xl .dd-animate-4{animation-name:example;animation-duration:1s}@keyframes example{from{opacity:.2}to{opacity:1}}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-default{border-left-color:var(--secondary)}.bs-callout-default h4{color:var(--secondary)}.bs-callout-primary{border-left-color:var(--primary)}.bs-callout-primary h4{color:var(--primary)}.bs-callout-success{border-left-color:var(--success)}.bs-callout-success h4{color:var(--success)}.bs-callout-danger{border-left-color:var(--danger)}.bs-callout-danger h4{color:var(--danger)}.bs-callout-warning{border-left-color:var(--warning)}.bs-callout-warning h4{color:var(--warning)}.bs-callout-info{border-left-color:var(--info)}.bs-callout-info h4{color:var(--info)}.img-hover-zoom img{transition: transform .8s ease !important}.img-hover-zoom:hover img{transform: scale(1.5)}.img-hover-zoom--zoom-n-rotate img{transition: transform .5s ease-in-out !important}.img-hover-zoom--zoom-n-rotate:hover img{transform: scale(2) rotate(25deg);}.img-hover-zoom--slowmo img{transform-origin: 50% 65%;transition: transform 5s, filter 3s ease-in-out !important;filter: brightness(150%);}.img-hover-zoom--slowmo:hover img{filter: brightness(100%);transform: scale(2);}.img-hover-zoom--brightness img{transition: transform 2s, filter 1.5s ease-in-out !important;transform-origin: center center;filter: brightness(50%);}.img-hover-zoom--brightness:hover img{filter: brightness(100%);transform: scale(1.3);}.img-hover-zoom--blur img{transition: transform 1s, filter 2s ease-in-out !important;filter: blur(2px);transform: scale(1.2);}.img-hover-zoom--blur:hover img{filter: blur(0);transform: scale(1);}.img-hover-zoom--colorize img{transition: transform .5s, filter 1.5s ease-in-out !important;filter: grayscale(100%);}.img-hover-zoom--colorize:hover img{filter: grayscale(0);transform: scale(1.1);}.nav-icon{margin:-1.5px;width:35px;border:none;background-color:transparent}.nav-icon div,.nav-icon:after,.nav-icon:before{background-color:#fff;border-radius:3px;content:'';display:block;height:5px;margin:7px 0;transition:all .2s ease-in-out}.nav-icon:not(.collapsed):before{transform:translateY(12px) rotate(135deg)}.nav-icon:not(.collapsed):after{transform:translateY(-12px) rotate(-135deg)}.nav-icon:not(.collapsed) div{transform:scale(0)}.nav-icon:focus,.nav-icon:active,.nav-icon:focus {outline: none;box-shadow: none;}picture{overflow:hidden}
+
 
 
 
diff --git a/Resources/Public/Styles/t3sbootstrapSF.css b/Resources/Public/Styles/t3sbootstrapSF.css
index f54da55b..c38de6a3 100644
--- a/Resources/Public/Styles/t3sbootstrapSF.css
+++ b/Resources/Public/Styles/t3sbootstrapSF.css
@@ -1,6 +1,4 @@
 /*!
  * t3sbootstrap.css
  */
-html{font-size:14px}a{outline:0}.subheader{margin:0}.alert{display:grid}.code{padding:.2rem .4rem;font-size:90%;color:#bd4147;background-color:rgba(86,61,124,.15);border-radius:.25rem;font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}mark{background-color:#ff0;color:#000}.back-to-top{position:fixed;bottom:2em;right:1.5em;text-decoration:none;color:#eee;background-color:transparent;opacity:.7;padding:1em;z-index:999}.back-to-top:hover{background-color:transparent;color:#999}.navbar-light .navbar-nav .nav-link.js-scroll-trigger.active{color:var(--light)}.dropdown-submenu{position:relative}.dropdown-submenu a::after{transform:rotate(-90deg);position:absolute;right:6px;top:.8em}.dropdown-submenu .dropdown-menu{top:0;left:100%;top:-.5rem;margin-left:0;margin-right:0}.dropup .dropdown-menu{top:auto;bottom:100%!important}.dropdown-item.parent-active{color:#151515;text-decoration:none;background-color:#f6f6f6}.dropdown-item.active.parent-active{color:#fff;text-decoration:none;background-color:var(--primary)}.dropdown-divider{display:block}.dropdown-menu-right .dropdown-submenu{position:relative}.dropdown-menu-right .dropdown-submenu .dropdown-menu{top:0;right:100%;left:auto;margin-top:-6px;margin-right:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right .dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px}.dropdown-menu-right .dropdown-submenu:hover>a:after{border-left-color:#fff}.dropdown-menu-right .dropdown-submenu.pull-left{float:none}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right{margin-left:0}.dropdown-menu-right .dropdown-submenu > a::after{display:none}.dropdown-menu-right .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-left:-.8rem;vertical-align:.255em;content:" ";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent;transform:rotate(90deg)}.dropdown-menu{margin:0}.fixed-bottom .dropdown-menu.show{display:inline-table}.fixed-bottom .dropdown-menu .dropdown-submenu .dropdown-menu{margin-top:-1rem}#main-navbar.shrink{height:auto;-webkit-transition:padding-top 0.3s,padding-bottom .3s;-moz-transition:padding-top 0.3s,padding-bottom .3s;transition:padding-top 0.3s,padding-bottom .3s}#main-navbar.navbar-shrink{padding:.5rem 1rem}#main-navbar .t3js-icon img{width:1.2rem;height:.9rem;margin-right:.5rem;margin-top:-.2rem}#sectionmenu,.submenu{min-width:130px}#sectionmenu .nav-link,.submenu .nav-link{position:relative}#sectionmenu .nav-link[data-toggle].collapsed:after,.submenu .nav-link[data-toggle].collapsed:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem}#sectionmenu .nav-link[data-toggle]:not(.collapsed):after,.submenu .nav-link[data-toggle]:not(.collapsed):after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem; -moz-transform: rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dropdown-toggle::after{transition:.7s}.dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}.ge_autoLayout_row figure,.card figure{margin:0}.card .list-group-item{color:#212529}a.card{color:inherit}a.card:hover{text-decoration:none}.card.card-effect-one img{-moz-transition:transform .5s ease-in-out!important;-webkit-transition:transform .5s ease-in-out!important;transition:transform .5s ease-in-out!important}.card.card-effect-one:hover{background-color:var(--light)}.card.card-effect-one:hover img{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.card.card-effect-one::before{content:"";position:absolute;z-index:-1;left:50%;right:50%;bottom:0;background:var(--primary);height:4px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.card.card-effect-one:hover::before,.card.card-effect-one:focus::before,.card.card-effect-one:active::before{left:0;right:0}.card.card-effect-one{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;overflow:hidden;-webkit-transform:scale(1)}.meta-nav.text-white a{color:#fff!important}div.alert p,div.alert ul{margin:0}#language{cursor:pointer}.tx-indexedsearch-redMarkup{color:red}.tx-indexedsearch-info p{margin:0}section.parallax{background-attachment:fixed;background-position:50% 0;background-repeat:no-repeat;background-size:cover;z-index:-1}section.multiple-parallax{background-attachment:fixed,fixed;background-position:left top,50% 0;background-repeat:repeat,no-repeat;background-size:auto,cover;z-index:-1}.absolute{position:absolute!important}.v-row{display:flex;flex-wrap:wrap}.jumbotron.background-image,section.background-image,div.background-image,.content-consent.background-image{background-repeat:no-repeat;background-size:cover;background-position:center center}.jumbotron.multiple-background-image,section.multiple-background-image,div.multiple-background-image{background-repeat:repeat,no-repeat;background-size:auto,cover;background-position:left top,center center}.jumbotron.background-fixed,section.background-fixed,div.background-fixed,div.background-fixed{background-attachment:fixed!important}.col{border:0 solid transparent}.frame-ruler-before:before{content:'';display:block;border-top:1px solid rgba(0,0,0,0.25);margin-bottom:2em}.frame-ruler-after:after{content:'';display:block;border-bottom:1px solid rgba(0,0,0,0.25);margin-top:2em}.frame-indent{margin-left:15%;margin-right:15%}.frame-indent-left{margin-left:33%}.frame-indent-right{margin-right:33%}.preloader{z-index:999;position:absolute;left:calc(50% - 1.5rem);top:50%}.nav-meta,.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .meta-text a,.nav-meta .meta-text a{margin-right:1rem}.nav-scroller .meta-text a:last-child,.nav-meta .meta-text a:last-child{margin-right:0}.nav-scroller .nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;color:rgba(255,255,255,.75);text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.nav-underline .nav-link{padding-top:.75rem;padding-bottom:.75rem;font-size:.875rem;color:var(--gray-dark)}.nav-underline .nav-link:hover{color:var(--danger)}.nav-underline .active{font-weight:500;color:var(--gray-dark)}.nav-underline .nav-link.meta-text{color:var(--gray-dark)}.nav-underline .nav-link.meta-text a:hover{color:var(--danger)}.navbar-expand-no{overflow-y:scroll!important;max-height:100%!important}.sticky.is-sticky{position:fixed;left:0;right:0;top:0;z-index:1000;width:100%}.carousel-indicators{display:flex!important}.carousel-item{transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;-webkit-backface-visibility:visible;backface-visibility:visible;overflow:hidden!important}.carousel figure{margin:0!important}.carousel-caption.caption-animated.animated{position:absolute;top:0;display:flex;justify-content:center;width:auto;color:#fff;text-align:center;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.gallery .row{margin-right:-.5rem;margin-left:-.5rem}.gallery .col-sm{padding-right:.5rem;padding-left:.5rem}.image-gallery .ig-col{padding-right:.5rem;padding-left:.5rem;margin-bottom:1rem}.image-gallery .row{margin-right:-7.5px;margin-left:-7.5px}picture img.lazy{opacity:0}picture img.lazy:not(.initial){transition:opacity 2s}picture img.lazy.initial,picture img.lazy.loaded,picture img.lazy.error{opacity:1}picture img.lazy:not([src]):not([srcset]){visibility:hidden}.inline-YTPlayer{z-index:1011}.content-consent{min-height:200px}.ce-link{text-decoration:none!important;color:inherit!important}.ce-link-content{text-decoration:none!important;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all .3s cubic-bezier(.25,.8,.25,1);padding:1.5rem}.ce-link-content:hover{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.card.ce-link-content{padding:0}.img-transform{transition:transform .3s ease!important}.img-transform:hover,.img-transform:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}figure.image{overflow:hidden;display:inline-grid}.relative{position:relative}.relative .overlay > div{position:absolute;top:2rem}#site-preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#f5f5f5;z-index:99999}#site-spinner{position:absolute;left:calc(50% - 1.5rem);top:50%}.sidebar-sub-item i{text-indent:-1px}figcaption{font-size:.75rem;font-weight:400}.fa,.fas,.far,.fal,.fab{line-height:inherit}.bt_hidden{opacity:0}.bt_visible{opacity:1}.page-pagination{margin:2rem 0}.page-pagination .page-item:first-child .page-link{border-top-left-radius:0;border-bottom-left-radius:0}.page-pagination .page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}.video-card .card-img-overlay{margin-bottom:40px}.zoom-overlay{overflow:hidden;background:transparent;opacity:0;transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s}.image a:hover .zoom-overlay{opacity:.8}.magnifying-glass-icon{color:#fff;text-align:center;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%;padding:20px;border:1px solid #fff;line-height:1;background:rgba(0,0,0,0.5);width:60px;height:60px}.zoom-overlay .description .magnifying-glass-icon{top:50%}.card-img-overlay .card-body{padding:0}.navbar-brand img.d-inline-block{margin-right:.25rem}.media figure.image{position:relative;margin-bottom:0}.media .magnifying-glass-icon{top:50%}.w-33{width:33%!important}.w-66{width:66%!important}.fixedPosition{position:fixed;top:50%;margin:0!important;z-index:999}.fixedPosition-right{right:0}.fixedPosition-left{left:0}.rotate-plus{-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin:0!important}.rotate-minus{-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);margin:0!important}.media-body p{margin-bottom:0}p .svg-inline--fa{margin-right:.4rem}@media (min-width: 576px){html{font-size:16px}.row-eq-height{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.row-eq-height .col,.row-eq-height [class*="col-"]{height:100%!important;}.sm-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 768px){.md-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 992px){.lg-twoColumns{min-width:26rem}.content-consent{min-height:400px}}@media (min-width: 1200px){.xl-twoColumns{min-width:26rem}.content-consent{min-height:500px}}@media (max-width: 1199px){.navbar-expand-xl{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 991px){.navbar-expand-lg{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 767px){.navbar-expand-md{overflow-y:scroll!important;max-height:100%!important}.gallery.w-25,.gallery .w-25{width:100%!important}.gallery.w-50,.gallery .w-50{width:100%!important}.gallery.w-33,.gallery .w-33{width:100%!important}.gallery.w-66,.gallery .w-66{width:100%!important}.gallery.w-75,.gallery .w-75{width:100%!important}.beside .w-25,.align .w-25{width:100%!important}.beside .w-50,.align .w-50{width:100%!important}.beside .w-33,.align .w-33{width:100%!important}.beside .w-66,.align .w-66{width:100%!important}.beside .w-75,.align .w-75{width:100%!important}}@media (max-width: 575px){.navbar-expand-sm{overflow-y:scroll!important;max-height:100%!important}.gallery{text-align:center}.card .img-overlay{color:#FFF;text-shadow:6px 0 6px #666}.card .img-overlay .card-body{padding:0}}.card-flipper .image-flip:hover .backside,.card-flipper .image-flip:active .backside,.card-flipper .image-flip.hover .backside{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);border-radius:.25rem}.card-flipper .image-flip:hover .frontside,.card-flipper .image-flip:active .frontside,.card-flipper .image-flip.hover .frontside{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.card-flipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.card-flipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.card-flipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.card-flipper .frontside,.card-flipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.card-flipper .frontside .card,.card-flipper .backside .card{min-height:312px}.card-flipper .fa-plus-square{color:var(--primary)}#sectionmenu .section-menu.nav-fill.variant{background-color:#fff}#sectionmenu .section-menu.nav-fill.variant .nav-item{display:inline-block;position:relative;height:58px;border-right:2px solid var(--light);border-top:2px solid var(--light);border-bottom:2px solid var(--light);text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;cursor:pointer;white-space:normal}#sectionmenu .section-menu.nav-fill.variant .nav-item:last-child{border-left:2px solid var(--light)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger{line-height:2.6}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active::before{border-left:13px solid transparent;border-right:13px solid transparent;border-top:12px solid var(--primary);position:absolute;top:58px;left:calc(50% - 6px);content:"";display:inline;z-index:2000}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger:hover{color:var(--primary);text-shadow:0 0 5px rgba(169,169,169,0.3)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active,#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active:hover{background-color:var(--primary);border-bottom:1px solid var(--primary);color:#fff;margin-top:0;height:58px;border-top:none}#sectionmenu .section-menu .nav-item.nav-link.active{color:var(--danger)}#sectionmenu .section-menu.nav-pills .nav-item.nav-link.active{color:#fff}.bg-raster{position:relative}.bg-raster:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:url(/typo3conf/ext/t3sbootstrap/Resources/Public/Images/raster.png) repeat}#background-carousel{width:100%;height:100%;z-index:-1}#background-carousel .carousel,#background-carousel .carousel-inner{width:100%;height:100%;z-index:0;overflow:hidden}#background-carousel .carousel-item{width:100%;height:100%;background-position:center center;background-size:cover;z-index:0}#background-carousel #content-wrapper{position:absolute;z-index:1!important;min-width:100%;min-height:100%}#background-carousel .carousel-control-prev,#background-carousel .carousel-control-next{z-index:2}.carousel-control-prev,.carousel-control-next{z-index:10}.list-group .page-navigation:last-child{margin-top:1.5rem}.card-img-overlay .card-text p:last-child{margin-bottom:0}.card-deck{margin:0;justify-content:space-between}.card-deck .card{margin:0}@media (min-width: 576px) and (max-width: 767.98px){.card-deck .card{-ms-flex:0 0 48.7%;flex:0 0 48.7%;border:1px solid rgba(0,0,0,0.125);border-radius:.25rem}}@media (min-width: 768px) and (max-width: 991.98px){.card-deck .card{-ms-flex:0 0 32%;flex:0 0 32%}}@media (min-width: 992px){.card-deck .card{-ms-flex:0 0 24%;flex:0 0 24%}}@media (min-width: 576px) and (max-width: 767.98px){.card-group > .card{flex:1 0 100%}}@media (min-width: 768px){.card-group > .card{flex:1 0 50%}}@media (min-width: 992px){.card-group > .card{flex:1 0 33.333%}}@media (min-width: 1200px){.card-group > .card{flex:1 0 25%}}@media (min-width: 576px){.card-columns{column-count:2}.image-flip .mainflip,.image-flip .frontside,.image-flip .backside,.image-flip .card{height:100%}}@media (min-width: 768px){.card-columns{column-count:3}}@media (min-width: 992px){.card-columns{column-count:4}}@media (min-width: 1200px){.card-columns{column-count:4}}.news .card{box-shadow:0 0 0 rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);transition:all .3s cubic-bezier(.25,.8,.25,1)}.news .card:hover,.news .card:active{box-shadow:0 4px 8px rgba(0,0,0,0.25),0 2px 2px rgba(0,0,0,0.22);z-index:101}.news .list-group-item .d-sm-block p{margin-bottom:0}#news-preloader{position:relative;top:0;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-preloader-bottom{position:relative;top:-75px;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-spinner{position:absolute;right:0;top:-.5rem}.news .list-group-item .card-text p{margin-bottom:0}.news .list-group-item .media figure{margin-bottom:0}.cardflipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.cardflipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.cardflipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.cardflipper .frontside,.cardflipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.cardflipper .fa-plus-square{color:var(--primary)}.cardflipper .fa-minus-square{color:var(--primary)}.cardflipper .fa-plus-square:hover,.cardflipper .fa-minus-square:hover{cursor:pointer}.card-flipper .card-footer,.cardflipper .card-footer{padding:.75rem 1.25rem;background-color:transparent;border-top:none}.card-flipper .backside,.card-flipper .backside .card,.cardflipper .backside,.cardflipper .backside .card{height:100%}.card-footer{text-align:center}.img-copyright{position:relative;margin-top:-31px;margin-right:.5rem;display:flex;margin-left:auto}.img-copyright:hover{cursor:help}.img-copyright-default{position:relative;margin-top:-24px;margin-right:.5rem;display:flex;margin-left:auto}span.copyright{margin-right:.5rem}.zoom-right{display:flex;margin-left:auto}.zoom-center{display:flex}.card .image-caption.text-right{margin-right:.5rem;margin-right:.5rem}figure .toast{margin-bottom:0!important;z-index:1}.imageorient-1 figure.image .zoom-overlay,.imageorient-9 figure.image .zoom-overlay{right:.5rem}.imageorient-2 figure.image .zoom-overlay,.imageorient-10 figure.image .zoom-overlay,.imageorient-17 figure.image .zoom-overlay,.imageorient-18 figure.image .zoom-overlay,.imageorient-25 figure.image .zoom-overlay,.imageorient-26 figure.image .zoom-overlay,.imageorient-66 figure.image .zoom-overlay,.imageorient-77 figure.image .zoom-overlay{left:.5rem}.news-single figure.image .zoom-overlay{left:1rem}body.md .dd-animate-1,body.lg .dd-animate-1,body.xl .dd-animate-1{animation-duration:.3s;-webkit-animation-duration:.3s;animation-fill-mode:both;-webkit-animation-fill-mode:both}@keyframes slideIn{0%{transform:translateY(1rem);opacity:0}100%{transform:translateY(0rem);opacity:1}0%{transform:translateY(1rem);opacity:0}}@-webkit-keyframes slideIn{0%{-webkit-transform:transform;-webkit-opacity:0}100%{-webkit-transform:translateY(0);-webkit-opacity:1}0%{-webkit-transform:translateY(1rem);-webkit-opacity:0}}.slideIn{-webkit-animation-name:slideIn;animation-name:slideIn}body.md .dd-animate-3,body.lg .dd-animate-3,body.xl .dd-animate-3{display:block;visibility:hidden;opacity:0;transform:translateY(50px);transition:.5s ease all}body.md .dd-animate-3.show,body.lg .dd-animate-3.show,body.xl .dd-animate-3.show{display:block;visibility:visible;opacity:1;transform:translateY(0px);transition:.5s ease all}body.md .dd-animate-4 .dropdown-submenu .dropdown-menu,body.lg .dd-animate-4 .dropdown-submenu .dropdown-menu,body.xl .dd-animate-4 .dropdown-submenu .dropdown-menu,body.md .dd-animate-4,body.lg .dd-animate-4,body.xl .dd-animate-4{animation-name:example;animation-duration:1s}@keyframes example{from{opacity:.2}to{opacity:1}}html{position:relative;min-height:100%}#page-footer{position:absolute;bottom:0;width:100%}
-
-
+html{font-size:14px}a{outline:0}.subheader{margin:0}.alert{display:grid}.code{padding:.2rem .4rem;font-size:90%;color:#bd4147;background-color:rgba(86,61,124,.15);border-radius:.25rem;font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}mark{background-color:#ff0;color:#000}.back-to-top{position:fixed;bottom:2em;right:1.5em;text-decoration:none;color:#eee;background-color:transparent;opacity:.7;padding:1em;z-index:999}.back-to-top:hover{background-color:transparent;color:#999}.navbar-light .navbar-nav .nav-link.js-scroll-trigger.active{color:var(--light)}.dropdown-submenu{position:relative}.dropdown-submenu a::after{transform:rotate(-90deg);position:absolute;right:6px;top:.8em}.dropdown-submenu .dropdown-menu{top:0;left:100%;top:-.5rem;margin-left:0;margin-right:0}.dropup .dropdown-menu{top:auto;bottom:100%!important}.dropdown-item.parent-active{color:#151515;text-decoration:none;background-color:#f6f6f6}.dropdown-item.active.parent-active{color:#fff;text-decoration:none;background-color:var(--primary)}.dropdown-divider{display:block}.dropdown-menu-right .dropdown-submenu{position:relative}.dropdown-menu-right .dropdown-submenu .dropdown-menu{top:0;right:100%;left:auto;margin-top:-6px;margin-right:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right .dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px}.dropdown-menu-right .dropdown-submenu:hover>a:after{border-left-color:#fff}.dropdown-menu-right .dropdown-submenu.pull-left{float:none}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px;border-radius:6px 6px 6px 6px}.dropdown-menu-right{margin-left:0}.dropdown-menu-right .dropdown-submenu > a::after{display:none}.dropdown-menu-right .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-left:-.8rem;vertical-align:.255em;content:" ";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent;transform:rotate(90deg)}.dropdown-menu{margin:0}.fixed-bottom .dropdown-menu.show{display:inline-table}.fixed-bottom .dropdown-menu .dropdown-submenu .dropdown-menu{margin-top:-1rem}#main-navbar.shrink{height:auto;-webkit-transition:padding-top 0.3s,padding-bottom .3s;-moz-transition:padding-top 0.3s,padding-bottom .3s;transition:padding-top 0.3s,padding-bottom .3s}#main-navbar.navbar-shrink{padding:.5rem 1rem}#main-navbar .t3js-icon img{width:1.2rem;height:.9rem;margin-right:.5rem;margin-top:-.2rem}#sectionmenu,.submenu{min-width:130px}#sectionmenu .nav-link,.submenu .nav-link{position:relative}#sectionmenu .nav-link[data-toggle].collapsed:after,.submenu .nav-link[data-toggle].collapsed:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem}#sectionmenu .nav-link[data-toggle]:not(.collapsed):after,.submenu .nav-link[data-toggle]:not(.collapsed):after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent;position:absolute;right:1rem;top:calc(50% - 4px);margin-left:.25rem; -moz-transform: rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dropdown-toggle::after{transition:.7s}.dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}.ge_autoLayout_row figure,.card figure{margin:0}.card .list-group-item{color:#212529}a.card{color:inherit}a.card:hover{text-decoration:none}.card.card-effect-one img{-moz-transition:transform .5s ease-in-out!important;-webkit-transition:transform .5s ease-in-out!important;transition:transform .5s ease-in-out!important}.card.card-effect-one:hover{background-color:var(--light)}.card.card-effect-one:hover img{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.card.card-effect-one::before{content:"";position:absolute;z-index:-1;left:50%;right:50%;bottom:0;background:var(--primary);height:4px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.card.card-effect-one:hover::before,.card.card-effect-one:focus::before,.card.card-effect-one:active::before{left:0;right:0}.card.card-effect-one{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;overflow:hidden;-webkit-transform:scale(1)}.meta-nav.text-white a{color:#fff!important}div.alert p,div.alert ul{margin:0}#language{cursor:pointer}.tx-indexedsearch-redMarkup{color:red}.tx-indexedsearch-info p{margin:0}section.parallax{background-attachment:fixed;background-position:50% 0;background-repeat:no-repeat;background-size:cover;z-index:-1}section.multiple-parallax{background-attachment:fixed,fixed;background-position:left top,50% 0;background-repeat:repeat,no-repeat;background-size:auto,cover;z-index:-1}.absolute{position:absolute!important}.v-row{display:flex;flex-wrap:wrap}.jumbotron.background-image,section.background-image,div.background-image,.content-consent.background-image{background-repeat:no-repeat;background-size:cover;background-position:center center}.jumbotron.multiple-background-image,section.multiple-background-image,div.multiple-background-image{background-repeat:repeat,no-repeat;background-size:auto,cover;background-position:left top,center center}.jumbotron.background-fixed,section.background-fixed,div.background-fixed,div.background-fixed{background-attachment:fixed!important}.col{border:0 solid transparent}.frame-ruler-before:before{content:'';display:block;border-top:1px solid rgba(0,0,0,0.25);margin-bottom:2em}.frame-ruler-after:after{content:'';display:block;border-bottom:1px solid rgba(0,0,0,0.25);margin-top:2em}.frame-indent{margin-left:15%;margin-right:15%}.frame-indent-left{margin-left:33%}.frame-indent-right{margin-right:33%}.preloader{z-index:999;position:absolute;left:calc(50% - 1.5rem);top:50%}.nav-meta,.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .meta-text a,.nav-meta .meta-text a{margin-right:1rem}.nav-scroller .meta-text a:last-child,.nav-meta .meta-text a:last-child{margin-right:0}.nav-scroller .nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;color:rgba(255,255,255,.75);text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.nav-underline .nav-link{padding-top:.75rem;padding-bottom:.75rem;font-size:.875rem;color:var(--gray-dark)}.nav-underline .nav-link:hover{color:var(--danger)}.nav-underline .active{font-weight:500;color:var(--gray-dark)}.nav-underline .nav-link.meta-text{color:var(--gray-dark)}.nav-underline .nav-link.meta-text a:hover{color:var(--danger)}.navbar-expand-no{overflow-y:scroll!important;max-height:100%!important}.sticky.is-sticky{position:fixed;left:0;right:0;top:0;z-index:1000;width:100%}.carousel-indicators{display:flex!important}.carousel-item{transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;-webkit-backface-visibility:visible;backface-visibility:visible;overflow:hidden!important}.carousel figure{margin:0!important}.carousel-caption.caption-animated.animated{position:absolute;top:0;display:flex;justify-content:center;width:auto;color:#fff;text-align:center;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.gallery .row{margin-right:-.5rem;margin-left:-.5rem}.gallery .col-sm{padding-right:.5rem;padding-left:.5rem}.image-gallery .ig-col{padding-right:.5rem;padding-left:.5rem;margin-bottom:1rem}.image-gallery .row{margin-right:-7.5px;margin-left:-7.5px}picture img.lazy{opacity:0}picture img.lazy:not(.initial){transition:opacity 2s}picture img.lazy.initial,picture img.lazy.loaded,picture img.lazy.error{opacity:1}picture img.lazy:not([src]):not([srcset]){visibility:hidden}.inline-YTPlayer{z-index:1011}.content-consent{min-height:200px}.ce-link{text-decoration:none!important;color:inherit!important}.ce-link-content{text-decoration:none!important;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all .3s cubic-bezier(.25,.8,.25,1);padding:1.5rem}.ce-link-content:hover{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.card.ce-link-content{padding:0}.img-transform{transition:transform .3s ease!important}.img-transform:hover,.img-transform:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}figure.image{overflow:hidden;display:inline-grid}.relative{position:relative}.relative .overlay > div{position:absolute;top:2rem}#site-preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#f5f5f5;z-index:99999}#site-spinner{position:absolute;left:calc(50% - 1.5rem);top:50%}.sidebar-sub-item i{text-indent:-1px}figcaption{font-size:.75rem;font-weight:400}.fa,.fas,.far,.fal,.fab{line-height:inherit}.bt_hidden{opacity:0}.bt_visible{opacity:1}.page-pagination{margin:2rem 0}.page-pagination .page-item:first-child .page-link{border-top-left-radius:0;border-bottom-left-radius:0}.page-pagination .page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}.video-card .card-img-overlay{margin-bottom:40px}.zoom-overlay{overflow:hidden;background:transparent;opacity:0;transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s}.image a:hover .zoom-overlay{opacity:.8}.magnifying-glass-icon{color:#fff;text-align:center;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%;padding:20px;border:1px solid #fff;line-height:1;background:rgba(0,0,0,0.5);width:60px;height:60px}.zoom-overlay .description .magnifying-glass-icon{top:50%}.card-img-overlay .card-body{padding:0}.navbar-brand img.d-inline-block{margin-right:.25rem}.media figure.image{position:relative;margin-bottom:0}.media .magnifying-glass-icon{top:50%}.w-33{width:33%!important}.w-66{width:66%!important}.fixedPosition{position:fixed;top:50%;margin:0!important;z-index:999}.fixedPosition-right{right:0}.fixedPosition-left{left:0}.rotate-plus{-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin:0!important}.rotate-minus{-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);margin:0!important}.media-body p{margin-bottom:0}p .svg-inline--fa{margin-right:.4rem}@media (min-width: 576px){html{font-size:16px}.row-eq-height{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.row-eq-height .col,.row-eq-height [class*="col-"]{height:100%!important;}.sm-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 768px){.md-twoColumns{min-width:26rem}.content-consent{min-height:300px}}@media (min-width: 992px){.lg-twoColumns{min-width:26rem}.content-consent{min-height:400px}}@media (min-width: 1200px){.xl-twoColumns{min-width:26rem}.content-consent{min-height:500px}}@media (max-width: 1199px){.navbar-expand-xl{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 991px){.navbar-expand-lg{overflow-y:scroll!important;max-height:100%!important}}@media (max-width: 767px){.navbar-expand-md{overflow-y:scroll!important;max-height:100%!important}.gallery.w-25,.gallery .w-25{width:100%!important}.gallery.w-50,.gallery .w-50{width:100%!important}.gallery.w-33,.gallery .w-33{width:100%!important}.gallery.w-66,.gallery .w-66{width:100%!important}.gallery.w-75,.gallery .w-75{width:100%!important}.beside .w-25,.align .w-25{width:100%!important}.beside .w-50,.align .w-50{width:100%!important}.beside .w-33,.align .w-33{width:100%!important}.beside .w-66,.align .w-66{width:100%!important}.beside .w-75,.align .w-75{width:100%!important}}@media (max-width: 575px){.navbar-expand-sm{overflow-y:scroll!important;max-height:100%!important}.gallery{text-align:center}.card .img-overlay{color:#FFF;text-shadow:6px 0 6px #666}.card .img-overlay .card-body{padding:0}}.card-flipper .image-flip:hover .backside,.card-flipper .image-flip:active .backside,.card-flipper .image-flip.hover .backside{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);border-radius:.25rem}.card-flipper .image-flip:hover .frontside,.card-flipper .image-flip:active .frontside,.card-flipper .image-flip.hover .frontside{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.card-flipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.card-flipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.card-flipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.card-flipper .frontside,.card-flipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.card-flipper .frontside .card,.card-flipper .backside .card{min-height:312px}.card-flipper .fa-plus-square{color:var(--primary)}#sectionmenu .section-menu.nav-fill.variant{background-color:#fff}#sectionmenu .section-menu.nav-fill.variant .nav-item{display:inline-block;position:relative;height:58px;border-right:2px solid var(--light);border-top:2px solid var(--light);border-bottom:2px solid var(--light);text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;cursor:pointer;white-space:normal}#sectionmenu .section-menu.nav-fill.variant .nav-item:last-child{border-left:2px solid var(--light)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger{line-height:2.6}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active::before{border-left:13px solid transparent;border-right:13px solid transparent;border-top:12px solid var(--primary);position:absolute;top:58px;left:calc(50% - 6px);content:"";display:inline;z-index:2000}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger:hover{color:var(--primary);text-shadow:0 0 5px rgba(169,169,169,0.3)}#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active,#sectionmenu .section-menu.nav-fill.variant .nav-link.scroll-trigger.active:hover{background-color:var(--primary);border-bottom:1px solid var(--primary);color:#fff;margin-top:0;height:58px;border-top:none}#sectionmenu .section-menu .nav-item.nav-link.active{color:var(--danger)}#sectionmenu .section-menu.nav-pills .nav-item.nav-link.active{color:#fff}.bg-raster{position:relative}.bg-raster:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:url(/typo3conf/ext/t3sbootstrap/Resources/Public/Images/raster.png) repeat}#background-carousel{width:100%;height:100%;z-index:-1}#background-carousel .carousel,#background-carousel .carousel-inner{width:100%;height:100%;z-index:0;overflow:hidden}#background-carousel .carousel-item{width:100%;height:100%;background-position:center center;background-size:cover;z-index:0}#background-carousel #content-wrapper{position:absolute;z-index:1!important;min-width:100%;min-height:100%}#background-carousel .carousel-control-prev,#background-carousel .carousel-control-next{z-index:2}.carousel-control-prev,.carousel-control-next{z-index:10}.list-group .page-navigation:last-child{margin-top:1.5rem}.card-img-overlay .card-text p:last-child{margin-bottom:0}.card-deck{margin:0;justify-content:space-between}.card-deck .card{margin:0}@media (min-width: 576px) and (max-width: 767.98px){.card-deck .card{-ms-flex:0 0 48.7%;flex:0 0 48.7%;border:1px solid rgba(0,0,0,0.125);border-radius:.25rem}}@media (min-width: 768px) and (max-width: 991.98px){.card-deck .card{-ms-flex:0 0 32%;flex:0 0 32%}}@media (min-width: 992px){.card-deck .card{-ms-flex:0 0 24%;flex:0 0 24%}}@media (min-width: 576px) and (max-width: 767.98px){.card-group > .card{flex:1 0 100%}}@media (min-width: 768px){.card-group > .card{flex:1 0 50%}}@media (min-width: 992px){.card-group > .card{flex:1 0 33.333%}}@media (min-width: 1200px){.card-group > .card{flex:1 0 25%}}@media (min-width: 576px){.card-columns{column-count:2}.image-flip .mainflip,.image-flip .frontside,.image-flip .backside,.image-flip .card{height:100%}}@media (min-width: 768px){.card-columns{column-count:3}}@media (min-width: 992px){.card-columns{column-count:4}}@media (min-width: 1200px){.card-columns{column-count:4}}.news .card{box-shadow:0 0 0 rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);transition:all .3s cubic-bezier(.25,.8,.25,1)}.news .card:hover,.news .card:active{box-shadow:0 4px 8px rgba(0,0,0,0.25),0 2px 2px rgba(0,0,0,0.22);z-index:101}.news .list-group-item .d-sm-block p{margin-bottom:0}#news-preloader{position:relative;top:0;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-preloader-bottom{position:relative;top:-75px;left:0;right:0;bottom:0;background-color:transparent;z-index:99999}#news-spinner{position:absolute;right:0;top:-.5rem}.news .list-group-item .card-text p{margin-bottom:0}.news .list-group-item .media figure{margin-bottom:0}.cardflipper .mainflip{-webkit-transition:1s;-webkit-transform-style:preserve-3d;-ms-transition:1s;-moz-transition:1s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d;position:relative}.cardflipper .frontside{position:relative;-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;margin-bottom:30px}.cardflipper .backside{position:absolute;top:0;left:0;background:#fff;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-box-shadow:5px 7px 9px -4px #9e9e9e;-moz-box-shadow:5px 7px 9px -4px #9e9e9e;box-shadow:5px 7px 9px -4px #9e9e9e}.cardflipper .frontside,.cardflipper .backside{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:1s;-webkit-transform-style:preserve-3d;-moz-transition:1s;-moz-transform-style:preserve-3d;-o-transition:1s;-o-transform-style:preserve-3d;-ms-transition:1s;-ms-transform-style:preserve-3d;transition:1s;transform-style:preserve-3d}.cardflipper .fa-plus-square{color:var(--primary)}.cardflipper .fa-minus-square{color:var(--primary)}.cardflipper .fa-plus-square:hover,.cardflipper .fa-minus-square:hover{cursor:pointer}.card-flipper .card-footer,.cardflipper .card-footer{padding:.75rem 1.25rem;background-color:transparent;border-top:none}.card-flipper .backside,.card-flipper .backside .card,.cardflipper .backside,.cardflipper .backside .card{height:100%}.card-footer{text-align:center}.img-copyright{position:relative;margin-top:-31px;margin-right:.5rem;display:flex;margin-left:auto}.img-copyright:hover{cursor:help}.img-copyright-default{position:relative;margin-top:-24px;margin-right:.5rem;display:flex;margin-left:auto}span.copyright{margin-right:.5rem}.zoom-right{display:flex;margin-left:auto}.zoom-center{display:flex}.card .image-caption.text-right{margin-right:.5rem;margin-right:.5rem}figure .toast{margin-bottom:0!important;z-index:1}.imageorient-1 figure.image .zoom-overlay,.imageorient-9 figure.image .zoom-overlay{right:.5rem}.imageorient-2 figure.image .zoom-overlay,.imageorient-10 figure.image .zoom-overlay,.imageorient-17 figure.image .zoom-overlay,.imageorient-18 figure.image .zoom-overlay,.imageorient-25 figure.image .zoom-overlay,.imageorient-26 figure.image .zoom-overlay,.imageorient-66 figure.image .zoom-overlay,.imageorient-77 figure.image .zoom-overlay{left:.5rem}.news-single figure.image .zoom-overlay{left:1rem}body.md .dd-animate-1,body.lg .dd-animate-1,body.xl .dd-animate-1{animation-duration:.3s;-webkit-animation-duration:.3s;animation-fill-mode:both;-webkit-animation-fill-mode:both}@keyframes slideIn{0%{transform:translateY(1rem);opacity:0}100%{transform:translateY(0rem);opacity:1}0%{transform:translateY(1rem);opacity:0}}@-webkit-keyframes slideIn{0%{-webkit-transform:transform;-webkit-opacity:0}100%{-webkit-transform:translateY(0);-webkit-opacity:1}0%{-webkit-transform:translateY(1rem);-webkit-opacity:0}}.slideIn{-webkit-animation-name:slideIn;animation-name:slideIn}body.md .dd-animate-3,body.lg .dd-animate-3,body.xl .dd-animate-3{display:block;visibility:hidden;opacity:0;transform:translateY(50px);transition:.5s ease all}body.md .dd-animate-3.show,body.lg .dd-animate-3.show,body.xl .dd-animate-3.show{display:block;visibility:visible;opacity:1;transform:translateY(0px);transition:.5s ease all}body.md .dd-animate-4 .dropdown-submenu .dropdown-menu,body.lg .dd-animate-4 .dropdown-submenu .dropdown-menu,body.xl .dd-animate-4 .dropdown-submenu .dropdown-menu,body.md .dd-animate-4,body.lg .dd-animate-4,body.xl .dd-animate-4{animation-name:example;animation-duration:1s}@keyframes example{from{opacity:.2}to{opacity:1}}.bs-callout{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:3px}.bs-callout+.bs-callout{margin-top:-5px}.bs-callout-default{border-left-color:var(--secondary)}.bs-callout-default h4{color:var(--secondary)}.bs-callout-primary{border-left-color:var(--primary)}.bs-callout-primary h4{color:var(--primary)}.bs-callout-success{border-left-color:var(--success)}.bs-callout-success h4{color:var(--success)}.bs-callout-danger{border-left-color:var(--danger)}.bs-callout-danger h4{color:var(--danger)}.bs-callout-warning{border-left-color:var(--warning)}.bs-callout-warning h4{color:var(--warning)}.bs-callout-info{border-left-color:var(--info)}.bs-callout-info h4{color:var(--info)}.img-hover-zoom img{transition: transform .8s ease !important}.img-hover-zoom:hover img{transform: scale(1.5)}.img-hover-zoom--zoom-n-rotate img{transition: transform .5s ease-in-out !important}.img-hover-zoom--zoom-n-rotate:hover img{transform: scale(2) rotate(25deg);}.img-hover-zoom--slowmo img{transform-origin: 50% 65%;transition: transform 5s, filter 3s ease-in-out !important;filter: brightness(150%);}.img-hover-zoom--slowmo:hover img{filter: brightness(100%);transform: scale(2);}.img-hover-zoom--brightness img{transition: transform 2s, filter 1.5s ease-in-out !important;transform-origin: center center;filter: brightness(50%);}.img-hover-zoom--brightness:hover img{filter: brightness(100%);transform: scale(1.3);}.img-hover-zoom--blur img{transition: transform 1s, filter 2s ease-in-out !important;filter: blur(2px);transform: scale(1.2);}.img-hover-zoom--blur:hover img{filter: blur(0);transform: scale(1);}.img-hover-zoom--colorize img{transition: transform .5s, filter 1.5s ease-in-out !important;filter: grayscale(100%);}.img-hover-zoom--colorize:hover img{filter: grayscale(0);transform: scale(1.1);}.nav-icon{margin:-1.5px;width:35px;border:none;background-color:transparent}.nav-icon div,.nav-icon:after,.nav-icon:before{background-color:#fff;border-radius:3px;content:'';display:block;height:5px;margin:7px 0;transition:all .2s ease-in-out}.nav-icon:not(.collapsed):before{transform:translateY(12px) rotate(135deg)}.nav-icon:not(.collapsed):after{transform:translateY(-12px) rotate(-135deg)}.nav-icon:not(.collapsed) div{transform:scale(0)}.nav-icon:focus,.nav-icon:active,.nav-icon:focus {outline: none;box-shadow: none;}picture{overflow:hidden}html{position:relative;min-height:100%}#page-footer{position:absolute;bottom:0;width:100%}
diff --git a/ext_conf_template.txt b/ext_conf_template.txt
index ae2eb4c4..b17c4c14 100644
--- a/ext_conf_template.txt
+++ b/ext_conf_template.txt
@@ -2,8 +2,18 @@
 # customcategory=t3sb=T3SB
 # customcategory=dif=Different
 # customcategory=flexform=Flexform
+# customcategory=preview=Preview
 # customsubcategory=a-config=Bootstrap SCSS variables - only if EXT:ws_scss is loaded!
 
+	# cat=preview/enable/10; type=boolean; label=Backend Preview: Use custom preview renderer (clear cache).
+preview = 1
+	# cat=preview/enable/20; type=boolean; label=Crop bodytext: Crop bodytext by "maxCharacters" (clear cache).
+previewCrop = 1
+	# cat=preview/enable/30; type=string; label=Max Characters: Max Characters for crop bodytext (clear cache).
+previewCropMaxCharacters = 80
+	# cat=preview/enable/40; type=boolean; label=Closed Collapsible: Collapsible container preview always closed (clear cache).
+previewClosedCollapsible = 0
+
 	# cat=content/enable/10; type=boolean; label=Spacing: Shows select-fields for padding and margin in any content element if enabled. You can set those classes also in the input-field "Extra Class" (clear cache).
 spacing = 1
 	# cat=content/enable/20; type=boolean; label=Container: Shows a select-field for a .container or .container-fluid class in any content element if enabled (clear cache).
@@ -14,6 +24,8 @@ color = 1
 ratio = 0
 	# cat=content/enable/41; type=boolean; label=Image Tag: Option in the FAL to output image in <img> - instead in <picture> tag in the FE.
 imgtag = 0
+	# cat=content/enable/45; type=boolean; label=Original Image: Shows an option for "Use Original Image" in the palette "Media Adjustments" if enabled. (clear cache).
+origimage = 0
 	# cat=content/enable/50; type=boolean; label=Custom section order: Helpfully if using menu-items in a "container". (clear cache).
 sectionOrder = 0
 	# cat=content/enable/60; type=boolean; label=Custom "Extra Style" field: Custom style-field for tt_content. (clear cache).
@@ -23,6 +35,8 @@ extraStyle = 0
 fontawesome = 1
 	# cat=page/enable/20; type=boolean; label=Font Awesome Icon in Page Title: Enable the fa icon in the page title (clear cache).
 fontawesomepagetitle = 1
+	# cat=page/enable/30; type=boolean; label=Navigation color: Enable various colors for submenu nav-items in dropdown-menus (clear cache).
+navigationColor = 0
 
 	# cat=custom/a-config/10; type=boolean; label=Custom SCSS: activate  (clear cache and run Scheduler).
 customScss = 0
@@ -62,7 +76,7 @@ customTranslationsPath = fileadmin/T3SB/Language/
 
 	# cat=advanced/enable/10; type=options[none=0, FA free=1, FA pro (You need the Pro license - Info: https://www.t3sbootstrap.de/dokumentation/snippets/extend-t3sbootstrap/font-awesome-pro)=2]; label=Font Awesome 5: include Font Awesome SCSS - if deactivated, only some required icons are loaded (clear cache).
 fontawesomeCss = 0
-	# cat=advanced/enable/20; type=boolean; label=Animate CSS: include Animate CSS und Viewportchecker (clear cache).
+	# cat=advanced/enable/20; type=boolean; label=Animate CSS: include Animate CSS und Viewportchecker if EXT:content_animations is not loaded (clear cache).
 animateCss = 0
 	# cat=advanced/enable/30; type=boolean; label=Link Hover Effect: for images - include a select field in the FAL (sys_file_reference) and some CSS - (clear cache).
 linkHoverEffect = 0
diff --git a/ext_localconf.php b/ext_localconf.php
index 2240bf64..21b21ea1 100644
--- a/ext_localconf.php
+++ b/ext_localconf.php
@@ -8,14 +8,15 @@
 	 */
 
 	if ( ($GLOBALS['TYPO3_REQUEST'] ?? null) instanceof \Psr\Http\Message\ServerRequestInterface
-       && \TYPO3\CMS\Core\Http\ApplicationType::fromRequest($GLOBALS['TYPO3_REQUEST'])->isBackend() ||
+	   && \TYPO3\CMS\Core\Http\ApplicationType::fromRequest($GLOBALS['TYPO3_REQUEST'])->isBackend() ||
 	 \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('frontend_editing')) {
 
 		$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
 		$icons = ['bs-card', 'bs-button', 'bs-carousel', 'ge-2_col', 'ge-3_col', 'ge-4_col', 'ge-card-container', 'ge-background_wrapper', 'ge-parallax_wrapper', 'ge-carousel-container', 'ge-accordion-container', 'ge-accordion-element', 'ge-modal', 'ge-tab-container', 'ge-tab-element', 'bs-fluidtemplate', 'bs-gallery'];
-		foreach ($icons as $icon) {
+
+		foreach ($icons as $id => $icon) {
 			$iconRegistry->registerIcon(
-				$icon,
+				$id,
 				\TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
 				['source' => 'EXT:t3sbootstrap/Resources/Public/Icons/Register/'.$icon.'.svg']
 			);
@@ -268,12 +269,12 @@
 		\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScriptConstants('bootstrap.extconf.webp = 1');
 	}
 
-	/***************
-	 * Show preview of tt_content elements in page module
-	 */
-	$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['t3sbs_card'] =
-	 \T3SBS\T3sbootstrap\Hooks\PageLayoutView\CardPreviewRenderer::class;
-
+	if ( $extconf['preview'] ) {
+		/***************
+		 * Override preview of tt_content elements in page module
+		 */
+		$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['backend']['previewRendererResolver'] = \TYPO3\CMS\Backend\Preview\StandardPreviewRendererResolver::class;
+	}
 	/***************
 	 * Add RootLine Fields: keywords & description
 	 */
diff --git a/ext_tables.sql b/ext_tables.sql
index b1bc9263..eb91702d 100644
--- a/ext_tables.sql
+++ b/ext_tables.sql
@@ -32,6 +32,7 @@ CREATE TABLE tx_t3sbootstrap_domain_model_config (
 	navbar_image varchar(255) DEFAULT '' NOT NULL,
 	navbar_color varchar(40) DEFAULT '' NOT NULL,
 	navbar_background varchar(255) DEFAULT '' NOT NULL,
+	navbar_transparent tinyint(1) unsigned DEFAULT '0' NOT NULL,
 	navbar_container varchar(12) DEFAULT '' NOT NULL,
 	navbar_placement varchar(12) DEFAULT '' NOT NULL,
 	navbar_alignment varchar(5) DEFAULT '' NOT NULL,
@@ -39,6 +40,7 @@ CREATE TABLE tx_t3sbootstrap_domain_model_config (
 	navbar_toggler varchar(20) DEFAULT '' NOT NULL,
 	navbar_breakpoint varchar(2) DEFAULT '' NOT NULL,
 	navbar_offcanvas tinyint(1) unsigned DEFAULT '0' NOT NULL,
+	navbar_animatedtoggler tinyint(1) unsigned DEFAULT '0' NOT NULL,
 	navbar_height int(2) DEFAULT '0' NOT NULL,
 	navbar_searchbox varchar(6) DEFAULT '' NOT NULL,
 	navbar_langmenu tinyint(1) unsigned DEFAULT '0' NOT NULL,
@@ -169,6 +171,7 @@ CREATE TABLE tt_content (
 	tx_t3sbootstrap_animateCssDuration varchar(2) DEFAULT '' NOT NULL,
 	tx_t3sbootstrap_animateCssDelay varchar(2) DEFAULT '' NOT NULL,
 	tx_t3sbootstrap_extra_style varchar(100) DEFAULT '' NOT NULL,
+	tx_t3sbootstrap_image_orig varchar(4) DEFAULT '' NOT NULL,
 );
 
 #
@@ -201,4 +204,8 @@ CREATE TABLE pages (
 	tx_t3sbootstrap_megamenu tinyint(4) DEFAULT '0' NOT NULL,
 	tx_t3sbootstrap_titlecolor varchar(30) DEFAULT '' NOT NULL,
 	tx_t3sbootstrap_subtitlecolor varchar(30) DEFAULT '' NOT NULL,
+	tx_t3sbootstrap_navigationcolor varchar(30) DEFAULT '' NOT NULL,
+	tx_t3sbootstrap_navigationactivecolor varchar(30) DEFAULT '' NOT NULL,
+	tx_t3sbootstrap_navigationhover varchar(30) DEFAULT '' NOT NULL,
+	tx_t3sbootstrap_navigationbgcolor varchar(30) DEFAULT '' NOT NULL,
 );