@@ -7,9 +7,10 @@ use Contao\System;

 $GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'vr_bw_addImage';

 $GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'vr_bw_minHeight';

 $GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'vr_bw_width';

+$GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'vr_bw_bgBesideContent';

 $GLOBALS['TL_DCA']['tl_content']['palettes']['background_wrapper'] = '

     {type_legend},type,headline;

-    {background_legend},vr_bw_addImage,vr_bw_bgColor,vr_bw_bgWidthRestriction;

+    {background_legend},vr_bw_addImage,vr_bw_bgBesideContent,vr_bw_bgColor,vr_bw_bgWidthRestriction;

     {content_legend},vr_bw_minHeight,vr_bw_width,vr_bw_vAlign,vr_bw_padding,vr_bw_colorInvert;

     {template_legend:hide},customTpl;

     {protected_legend:hide},protected;

@@ -27,6 +28,7 @@ $GLOBALS['TL_DCA']['tl_content']['palettes']['grid_placement_wrapper'] = '

 ';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_addImage'] = 'vr_bw_bgSRC,size,vr_bw_bgSize,vr_bw_bgPos,vr_bw_bgOpacity';

+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_bgBesideContent'] = 'vr_bw_bgHorizontalPosition,vr_bw_bgHorizontalWidth';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_minHeight_-mh-ratio'] = 'vr_bw_mh_ratio';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_minHeight_-mh-vh'] = 'vr_bw_mh_viewport';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_width_-width-extended'] = 'vr_bw_widthText';

@@ -100,6 +102,51 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgOpacity'] = [

     'sql'       => "varchar(16) NOT NULL default ''"

 ];

+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgBesideContent'] = [

+    'inputType'               => 'checkbox',

+    'eval'                    => ['tl_class' => 'w50','submitOnChange' =>true],

+    'sql'                     => ['type' => 'boolean', 'default' => false]

+];

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgHorizontalPosition'] = [

+    'inputType' => 'select',

+    'options'   => [

+        ''          => 'Links',

+        '-bg-horizontal-align-right'   => 'Rechts',

+    ],

+    'eval'      => ['tl_class' => 'w50'],

+    'sql'       => "varchar(32) NOT NULL default ''"

+];

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgHorizontalWidth'] = [

+    'inputType' => 'select',

+    'default'   => '-bg-horizontal-width-50',

+    'options'   => [

+        '-bg-horizontal-width-5'  => '5%',

+        '-bg-horizontal-width-10'  => '10%',

+        '-bg-horizontal-width-15'  => '15%',

+        '-bg-horizontal-width-20'  => '20%',

+        '-bg-horizontal-width-25'  => '25%',

+        '-bg-horizontal-width-30'  => '30%',

+        '-bg-horizontal-width-35'  => '35%',

+        '-bg-horizontal-width-40'  => '40%',

+        '-bg-horizontal-width-45'  => '45%',

+        '-bg-horizontal-width-50'  => '50%',

+        '-bg-horizontal-width-55'  => '55%',

+        '-bg-horizontal-width-60'  => '60%',

+        '-bg-horizontal-width-65'  => '65%',

+        '-bg-horizontal-width-70'  => '70%',

+        '-bg-horizontal-width-75'  => '75%',

+        '-bg-horizontal-width-80'  => '80%',

+        '-bg-horizontal-width-85'  => '85%',

+        '-bg-horizontal-width-90'  => '90%',

+        '-bg-horizontal-width-95'  => '95%',

+        '-bg-horizontal-width-100' => '100%',

+    ],

+    'eval'      => ['tl_class' => 'w50'],

+    'sql'       => "varchar(32) NOT NULL default ''"

+];

+

 $GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgColor'] = [

     'inputType' => 'select',

     'options'   => [

@@ -109,7 +156,7 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgColor'] = [

         '-alt-color-black' => 'Schwarz',

         '-alt-color-white' => 'Weiß',

     ],

-    'eval'      => ['tl_class' => 'w50', 'includeBlankOption' => true],

+    'eval'      => ['tl_class' => 'clr w50', 'includeBlankOption' => true],

     'sql'       => "varchar(16) NOT NULL default ''"

 ];

@@ -42,6 +42,30 @@

                 <source>You can set the background image/video opacity.</source>

                 <target>Sie können die Deckkraft des Hintergrundbildes/-videos einstellen.</target>

             </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgBesideContent.0">

+                <source>Image besides content</source>

+                <target>Bild neben Inhalt</target>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgBesideContent.1">

+                <source>Displays the image beside the content instead of behind the content.</source>

+                <target>Zeigt das Bild neben dem Inhalt und nicht hinter dem Inhalt an.</target>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalPosition.0">

+                <source>Horizontal position</source>

+                <target>Horizontale Position</target>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalPosition.1">

+                <source>Whether the image is shown left or right of content.</source>

+                <target>Ob das Bild links oder rechts vom Inhalt angezeigt wird.</target>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalWidth.0">

+                <source>Horizontal width</source>

+                <target>Horizontale Breite</target>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalWidth.1">

+                <source>The width of the image in relation to the total width.</source>

+                <target>Die Breite des Bildes im Verhältnis zur Gesamtbreite.</target>

+            </trans-unit>

             <trans-unit id="tl_content.vr_bw_bgColor.0">

                 <source>Background color</source>

                 <target>Hintergrund-Farbe</target>

@@ -32,6 +32,24 @@

             <trans-unit id="tl_content.vr_bw_bgOpacity.1">

                 <source>You can set the background image/video opacity.</source>

             </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgBesideContent.0">

+                <source>Image besides content</source>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgBesideContent.1">

+                <source>Displays the image beside the content instead of behind the content.</source>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalPosition.0">

+                <source>Horizontal position</source>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalPosition.1">

+                <source>Whether the image is shown left or right of content.</source>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalWidth.0">

+                <source>Horizontal width</source>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgHorizontalWidth.1">

+                <source>The width of the image in relation to the total width.</source>

+            </trans-unit>

             <trans-unit id="tl_content.vr_bw_bgColor.0">

                 <source>Background color</source>

             </trans-unit>

@@ -37,6 +37,7 @@

   /* Background scaling */

   /* Background position */

   /* Background opacity */

+  /* Bacgkround beside */

   /* Background color */

   /* Foreground base */

   /* Height */

@@ -147,6 +148,22 @@

   opacity: 1;

 }

+.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {

+  inset: 0 auto 0 0;

+  width: 50%;

+}

+.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {

+  inset: 0 0 0 auto;

+}

+

+.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {

+  padding-left: 50%;

+}

+.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {

+  padding-left: 0;

+  padding-right: 50%;

+}

+

 .content-background-wrapper.-alt-color-1 {

   background-color: var(--vr-bw-bgcolor-1);

 }

@@ -2,4 +2,4 @@

     (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2

   );--vr-bw-breakout-size:calc(

     (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2

-  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{position:relative}.content-background-wrapper .content-background-wrapper-bg{position:absolute;inset:0}.content-background-wrapper .content-background-wrapper-bg img{position:absolute;inset:0;object-fit:cover;object-position:50% 50%;display:block;width:100%;height:100%}.content-background-wrapper .content-background-wrapper-bg video{position:absolute;inset:0;display:block;width:100%;height:100%}.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img{object-fit:contain}.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img{object-fit:fill}.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-fit:none}.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img{object-position:0 0}.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img{object-position:50%0}.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img{object-position:100%0}.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img{object-position:0 50%}.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 50%}.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img{object-position:100% 50%}.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img{object-position:0 100%}.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 100%}.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-position:100% 100%}.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg{opacity:.1}.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg{opacity:.2}.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg{opacity:.3}.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg{opacity:.4}.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg{opacity:.5}.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg{opacity:.6}.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg{opacity:.7}.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg{opacity:.8}.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg{opacity:.9}.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg{opacity:1}.content-background-wrapper.-alt-color-1{background-color:var(--vr-bw-bgcolor-1)}.content-background-wrapper.-alt-color-2{background-color:var(--vr-bw-bgcolor-2)}.content-background-wrapper.-alt-color-3{background-color:var(--vr-bw-bgcolor-3)}.content-background-wrapper.-alt-color-black{background-color:#000}.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6{color:#fff}.content-background-wrapper.-alt-color-white{background-color:#fff}.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6{color:#000}.content-background-wrapper .content-background-wrapper-fg{position:relative;box-sizing:border-box;display:flex;align-items:flex-start}.-mh-small.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-small)}.-mh-medium.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-medium)}.-mh-large.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-large)}.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:100svh}.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:66.666svh}.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:50svh}.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:33.333svh}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{display:table;content:"";padding-top:100%;float:left}.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:42.857%}.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:62.5%}.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:56.25%}.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:37.5%}.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:80%}.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:75%}.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:66.666%}.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:20%}.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:25%}.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:33.333%}.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:50%}.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:100%}.content-background-wrapper .content-background-wrapper-fg .content-grid{width:100%;display:grid;grid-template-columns:[full-width-start]minmax(var(--vr-bw-padding-inline),1fr)[breakout-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[content-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[indent-start]min(100% - var(--vr-bw-padding-inline)*6,var(--vr-bw-indent-max-width))[indent-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[content-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[breakout-end]minmax(var(--vr-bw-padding-inline),1fr)[full-width-end]}.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content;position:relative}.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent}.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/indent}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent/breakout}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/breakout}.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}@media screen and (max-width:599px){.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}.-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}}.-va-center.content-background-wrapper .content-background-wrapper-fg{align-items:center}.-va-bottom.content-background-wrapper .content-background-wrapper-fg{align-items:flex-end}.-va-stretch.content-background-wrapper .content-background-wrapper-fg{display:flex;align-items:stretch}.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid{flex:1}.-padding.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-large)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg{color:var(--vr-bw-color-inverted)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h2,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h3,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h4,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h5,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h6{color:var(--vr-bw-color-headline-inverted)}

\ No newline at end of file

+  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{position:relative}.content-background-wrapper .content-background-wrapper-bg{position:absolute;inset:0}.content-background-wrapper .content-background-wrapper-bg img{position:absolute;inset:0;object-fit:cover;object-position:50% 50%;display:block;width:100%;height:100%}.content-background-wrapper .content-background-wrapper-bg video{position:absolute;inset:0;display:block;width:100%;height:100%}.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img{object-fit:contain}.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img{object-fit:fill}.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-fit:none}.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img{object-position:0 0}.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img{object-position:50%0}.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img{object-position:100%0}.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img{object-position:0 50%}.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 50%}.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img{object-position:100% 50%}.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img{object-position:0 100%}.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 100%}.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-position:100% 100%}.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg{opacity:.1}.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg{opacity:.2}.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg{opacity:.3}.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg{opacity:.4}.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg{opacity:.5}.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg{opacity:.6}.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg{opacity:.7}.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg{opacity:.8}.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg{opacity:.9}.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg{opacity:1}.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:50%}.content-background-wrapper.-alt-color-1{background-color:var(--vr-bw-bgcolor-1)}.content-background-wrapper.-alt-color-2{background-color:var(--vr-bw-bgcolor-2)}.content-background-wrapper.-alt-color-3{background-color:var(--vr-bw-bgcolor-3)}.content-background-wrapper.-alt-color-black{background-color:#000}.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6{color:#fff}.content-background-wrapper.-alt-color-white{background-color:#fff}.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6{color:#000}.content-background-wrapper .content-background-wrapper-fg{position:relative;box-sizing:border-box;display:flex;align-items:flex-start}.-mh-small.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-small)}.-mh-medium.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-medium)}.-mh-large.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-large)}.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:100svh}.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:66.666svh}.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:50svh}.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:33.333svh}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{display:table;content:"";padding-top:100%;float:left}.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:42.857%}.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:62.5%}.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:56.25%}.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:37.5%}.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:80%}.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:75%}.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:66.666%}.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:20%}.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:25%}.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:33.333%}.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:50%}.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:100%}.content-background-wrapper .content-background-wrapper-fg .content-grid{width:100%;display:grid;grid-template-columns:[full-width-start]minmax(var(--vr-bw-padding-inline),1fr)[breakout-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[content-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[indent-start]min(100% - var(--vr-bw-padding-inline)*6,var(--vr-bw-indent-max-width))[indent-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[content-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[breakout-end]minmax(var(--vr-bw-padding-inline),1fr)[full-width-end]}.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content;position:relative}.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent}.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/indent}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent/breakout}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/breakout}.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}@media screen and (max-width:599px){.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}.-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}}.-va-center.content-background-wrapper .content-background-wrapper-fg{align-items:center}.-va-bottom.content-background-wrapper .content-background-wrapper-fg{align-items:flex-end}.-va-stretch.content-background-wrapper .content-background-wrapper-fg{display:flex;align-items:stretch}.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid{flex:1}.-padding.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-large)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg{color:var(--vr-bw-color-inverted)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h2,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h3,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h4,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h5,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h6{color:var(--vr-bw-color-headline-inverted)}

\ No newline at end of file

@@ -94,6 +94,29 @@

     @at-root .-bg-opacity-100#{&} { opacity: 1 }

   }

+  /* Bacgkround beside */

+  &.-bg-beside-content {

+    .content-background-wrapper-bg {

+      inset: 0 auto 0 0;

+      width: 50%;

+

+      @at-root .-bg-horizontal-align-right#{&} { inset: 0 0 0 auto; }

+    }

+

+    .content-background-wrapper-fg {

+      .content-grid {

+        .fragments {

+          padding-left: 50%;

+

+          @at-root .-bg-horizontal-align-right#{&} {

+            padding-left: 0;

+            padding-right: 50%;

+          }

+        }

+      }

+    }

+  }

+

   /* Background color */

   &.-alt-color-1 { background-color: var(--vr-bw-bgcolor-1); }

   &.-alt-color-2 { background-color: var(--vr-bw-bgcolor-2); }

@@ -87,6 +87,18 @@ class BackgroundWrapperController extends AbstractContentElementController

                 $arrCssClasses[] = $model->vr_bw_bgOpacity;

             }

         }

+        if ($model->vr_bw_bgBesideContent)

+        {

+            $arrCssClasses[] = '-bg-beside-content';

+            if (!empty($model->vr_bw_bgHorizontalPosition))

+            {

+                $arrCssClasses[] = $model->vr_bw_bgHorizontalPosition;

+            }

+            if (!empty($model->vr_bw_bgHorizontalWidth))

+            {

+                $arrCssClasses[] = $model->vr_bw_bgHorizontalWidth;

+            }

+        }

         if (!empty($model->vr_bw_bgColor))

         {

             $arrCssClasses[] = $model->vr_bw_bgColor;