diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss
index 294f044d05..0fdb32ab90 100644
--- a/source/_patterns/02-components/brand/brand.scss
+++ b/source/_patterns/02-components/brand/brand.scss
@@ -16,7 +16,7 @@
 
 	.rea-header & {
 		padding-top: to-rem($pxValue: 18);
-		@media screen and (width > $db-break-the-header-max-width) {
+		@mixin db-cmp-brand-rea-header {
 			padding-top: $rea-header-cmp-brand-padding-top; // * TODO: possibly rework variable naming
 
 			.is-site-name {
@@ -26,8 +26,18 @@
 				}
 			}
 		}
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-brand-rea-header;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-brand-rea-header;
+			}
+		}
 	}
-	@media screen and (max-width: $db-break-the-header-max-width) {
+	@mixin db-cmp-brand-site-name {
 		.cmp-mainnavigation ~ & {
 			.rea-header & {
 				.is-site-name {
@@ -36,4 +46,14 @@
 			}
 		}
 	}
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-cmp-brand-site-name;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-cmp-brand-site-name;
+		}
+	}
 }
diff --git a/source/_patterns/02-components/brand/enterprise/brand.scss b/source/_patterns/02-components/brand/enterprise/brand.scss
index ed9697cc24..353a8f0bf0 100644
--- a/source/_patterns/02-components/brand/enterprise/brand.scss
+++ b/source/_patterns/02-components/brand/enterprise/brand.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "brand.variables";
 @import "../brand";
diff --git a/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss b/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
index cad8ce7ee5..a615007e35 100644
--- a/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
+++ b/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "language-switcher.variables";
 @import "../language-switcher";
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
index 6962dc54a3..30ee63a4eb 100644
--- a/source/_patterns/02-components/language-switcher/language-switcher.scss
+++ b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -62,9 +62,20 @@
 					}
 				}
 			}
-			@media screen and (width > $db-break-the-header-max-width) {
+			@mixin db-cmp-language-switcher-li-rea-header {
 				top: to-rem($pxValue: 56);
 			}
+
+			@if variable-exists(enterprise) {
+				// Based on the browser strategy, we could ignore Firefox for the moment
+				@container not style(--db-narrower-screen: true) {
+					@include db-cmp-language-switcher-li-rea-header;
+				}
+			} @else {
+				@media screen and (width > $db-break-the-header-max-width) {
+					@include db-cmp-language-switcher-li-rea-header;
+				}
+			}
 		}
 
 		.elm-link,
diff --git a/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
index b3c1150a7b..66dd435cf6 100644
--- a/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
+++ b/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "mainnavigation.variables";
 @import "../mainnavigation";
diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
index d03db0496c..d6353a508e 100644
--- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss
+++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
@@ -28,13 +28,23 @@
 	& > input[type="checkbox"][id] {
 		@include a11y-visually-hidden($partial: $partial);
 
-		@media screen and (width > $db-break-the-header-max-width) {
+		@mixin cmp-mainnavigation-checkbox {
 			// Hiding the navigation toggle elements on huger viewports
 			&,
 			& + label[for] {
 				display: none;
 			}
 		}
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include cmp-mainnavigation-checkbox;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include cmp-mainnavigation-checkbox;
+			}
+		}
 	}
 
 	& > label[for] {
@@ -60,7 +70,7 @@
 	}
 
 	// Displaying the main navigation as an top to bottom overlay on smaller viewports
-	@media screen and (max-width: $db-break-the-header-max-width) {
+	@mixin db-cmp-mainnavigation {
 		background-color: $db-color-cool-gray-600;
 		left: 0;
 		position: absolute;
@@ -83,36 +93,77 @@
 		}
 	}
 
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-cmp-mainnavigation;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-cmp-mainnavigation;
+		}
+	}
+
 	ul {
 		background-color: $header---backgroundColor;
 	}
 
 	// Multiple level navigation
 	ul ul {
-		@media screen and (width > $db-break-the-header-max-width) {
+		@mixin db-cmp-mainnavigation-ul-ul-above {
 			box-shadow: $box-shadow-01, $box-shadow-02;
 			position: absolute;
 			visibility: hidden;
 
 			z-index: $z-index-rea-header-cmp-mainnavigation-submenu;
 		}
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-ul-ul-above;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-ul-ul-above;
+			}
+		}
 
-		@media screen and (max-width: $db-break-the-header-max-width) {
+		@mixin db-cmp-mainnavigation-ul-ul {
 			display: none;
 		}
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-ul-ul;
+			}
+		} @else {
+			@media screen and (max-width: $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-ul-ul;
+			}
+		}
 	}
 
 	// First Level
 	& > ul {
-		@media screen and (width > $db-break-the-header-max-width) {
+		@mixin db-cmp-mainnavigation-ul-above {
 			display: flex;
 		}
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-ul-above;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-ul-above;
+			}
+		}
 
 		& > li,
 		& > * > li {
 			& > .elm-link,
 			& > * > .elm-link {
-				@media screen and (width > $db-break-the-header-max-width) {
+				@mixin db-cmp-mainnavigation-ul-li-elm-link-above {
 					padding: $mainnavigation-link--paddingTop
 						to-rem($pxValue: 26) $mainnavigation-link--paddingBottom;
 
@@ -128,11 +179,21 @@
 						border-#{$mainnavigation-link--borderPosition}-color: $db-color-red-500;
 					}
 				}
+				@if variable-exists(enterprise) {
+					// Based on the browser strategy, we could ignore Firefox for the moment
+					@container not style(--db-narrower-screen: true) {
+						@include db-cmp-mainnavigation-ul-li-elm-link-above;
+					}
+				} @else {
+					@media screen and (width > $db-break-the-header-max-width) {
+						@include db-cmp-mainnavigation-ul-li-elm-link-above;
+					}
+				}
 			}
 
 			// From second level
 			ul {
-				@media screen and (width > $db-break-the-header-max-width) {
+				@mixin db-cmp-mainnavigation-ul-li-ul-above {
 					left: 0;
 					min-width: 100%;
 					top: to-rem($pxValue: 79);
@@ -153,14 +214,34 @@
 						padding-right: to-rem($pxValue: 18);
 					}
 				}
+				@if variable-exists(enterprise) {
+					// Based on the browser strategy, we could ignore Firefox for the moment
+					@container not style(--db-narrower-screen: true) {
+						@include db-cmp-mainnavigation-ul-li-ul-above;
+					}
+				} @else {
+					@media screen and (width > $db-break-the-header-max-width) {
+						@include db-cmp-mainnavigation-ul-li-ul-above;
+					}
+				}
 
 				& > li,
 				& > * > li {
 					& > .elm-link,
 					& > * > .elm-link {
-						@media screen and (max-width: $db-break-the-header-max-width) {
+						@mixin db-cmp-mainnavigation-ul-ul-li {
 							padding-left: to-rem($pxValue: 34);
 						}
+						@if variable-exists(enterprise) {
+							// Based on the browser strategy, we could ignore Firefox for the moment
+							@container style(--db-narrower-screen: true) {
+								@include db-cmp-mainnavigation-ul-ul-li;
+							}
+						} @else {
+							@media screen and (max-width: $db-break-the-header-max-width) {
+								@include db-cmp-mainnavigation-ul-ul-li;
+							}
+						}
 					}
 
 					// Third level
@@ -169,9 +250,19 @@
 						& > * > li {
 							& > .elm-link,
 							& > * > .elm-link {
-								@media screen and (max-width: $db-break-the-header-max-width) {
+								@mixin db-cmp-mainnavigation-ul-ul-ul-li {
 									padding-left: to-rem($pxValue: 60);
 								}
+								@if variable-exists(enterprise) {
+									// Based on the browser strategy, we could ignore Firefox for the moment
+									@container style(--db-narrower-screen: true) {
+										@include db-cmp-mainnavigation-ul-ul-ul-li;
+									}
+								} @else {
+									@media screen and (max-width: $db-break-the-header-max-width) {
+										@include db-cmp-mainnavigation-ul-ul-ul-li;
+									}
+								}
 							}
 						}
 					}
@@ -207,13 +298,24 @@
 			& > ul,
 			& > * > ul {
 				visibility: visible;
-				@media screen and (max-width: $db-break-the-header-max-width) {
+
+				@mixin db-cmp-mainnavigation-li-hover {
 					display: initial;
 				}
+				@if variable-exists(enterprise) {
+					// Based on the browser strategy, we could ignore Firefox for the moment
+					@container style(--db-narrower-screen: true) {
+						@include db-cmp-mainnavigation-li-hover;
+					}
+				} @else {
+					@media screen and (max-width: $db-break-the-header-max-width) {
+						@include db-cmp-mainnavigation-li-hover;
+					}
+				}
 			}
 		}
 
-		@media screen and (max-width: $db-break-the-header-max-width) {
+		@mixin db-cmp-mainnavigation-li {
 			background-color: $db-color-cool-gray-600;
 			color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
 
@@ -238,7 +340,18 @@
 				position: relative;
 			}
 		}
-		@media screen and (width > $db-break-the-header-max-width) {
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-li;
+			}
+		} @else {
+			@media screen and (max-width: $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-li;
+			}
+		}
+
+		@mixin db-cmp-mainnavigation-li-above {
 			// Do not show Icon for menu on bigger screens
 			&[aria-haspopup="true"] {
 				&::after {
@@ -258,5 +371,15 @@
 				}
 			}
 		}
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container not style(--db-narrower-screen: true) {
+				@include db-cmp-mainnavigation-li-above;
+			}
+		} @else {
+			@media screen and (width > $db-break-the-header-max-width) {
+				@include db-cmp-mainnavigation-li-above;
+			}
+		}
 	}
 }
diff --git a/source/_patterns/03-areas/00-header/enterprise/header.scss b/source/_patterns/03-areas/00-header/enterprise/header.scss
index d0e26884c2..e96e199d15 100644
--- a/source/_patterns/03-areas/00-header/enterprise/header.scss
+++ b/source/_patterns/03-areas/00-header/enterprise/header.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "header.variables";
 @import "../header";
diff --git a/source/_patterns/03-areas/00-header/enterprise/meta.scss b/source/_patterns/03-areas/00-header/enterprise/meta.scss
index 8b6b150291..82d49372b2 100644
--- a/source/_patterns/03-areas/00-header/enterprise/meta.scss
+++ b/source/_patterns/03-areas/00-header/enterprise/meta.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "meta.variables";
 @import "../meta";
diff --git a/source/_patterns/03-areas/00-header/header.md b/source/_patterns/03-areas/00-header/header.md
index 7199785dd3..80faafd613 100644
--- a/source/_patterns/03-areas/00-header/header.md
+++ b/source/_patterns/03-areas/00-header/header.md
@@ -7,6 +7,18 @@ state: inprogress
 
 If you'd like to control the breakpoint that we've set for the `header` parts especially to transform from a regular navigation to a burger navigation, you could overwrite the `SCSS` variable `$db-break-the-header-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `1280px`.
 
+If you're using CSS only without SCSS, you could set the CSS Custom Property / CSS Variable via a `@media query` yourself:
+
+```css
+@media screen and (max-width: 1280px) {
+  :root {
+    --db-narrower-screen: true;
+  }
+}
+```
+
+Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing (please have a look at <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> for upcoming support), and that for we've only enabled it within the `enterprise` themed stylings.
+
 ## Fixed positioned header
 
 You could set the header area to fixed positioning by adding the class `has-fixed-header` to the `body` HTML tag.
diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss
index 785e30aaaa..ea63d73343 100644
--- a/source/_patterns/03-areas/00-header/header.scss
+++ b/source/_patterns/03-areas/00-header/header.scss
@@ -26,8 +26,19 @@
 	.elm-link {
 		display: inline-block;
 	}
-	@media screen and (max-width: $db-break-the-header-max-width) {
+
+	@mixin db-cmp-header {
 		border-bottom: $header---borderBottom;
 		min-height: to-rem($pxValue: 64);
 	}
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-cmp-header;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-cmp-header;
+		}
+	}
 }
diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss
index db73f64416..ee8ef74c46 100644
--- a/source/_patterns/03-areas/00-header/meta.scss
+++ b/source/_patterns/03-areas/00-header/meta.scss
@@ -22,9 +22,19 @@
 			padding-top: to-rem($pxValue: 9);
 		}
 
-		@media screen and (max-width: $db-break-the-header-max-width) {
+		@mixin db-cmp-header-meta {
 			margin-top: to-rem($pxValue: 8);
 		}
+		@if variable-exists(enterprise) {
+			// Based on the browser strategy, we could ignore Firefox for the moment
+			@container style(--db-narrower-screen: true) {
+				@include db-cmp-header-meta;
+			}
+		} @else {
+			@media screen and (max-width: $db-break-the-header-max-width) {
+				@include db-cmp-header-meta;
+			}
+		}
 	}
 
 	& > .elm-link {
diff --git a/source/_patterns/03-areas/_areas.scss b/source/_patterns/03-areas/_areas.scss
index b2275013d5..5c711e85df 100644
--- a/source/_patterns/03-areas/_areas.scss
+++ b/source/_patterns/03-areas/_areas.scss
@@ -23,9 +23,19 @@ body.has-fixed-header {
 		top: 0;
 	}
 
-	@media screen and (max-width: $db-break-the-header-max-width) {
+	@mixin db-body-has-fixed-header {
 		padding-top: to-rem($pxValue: 80);
 	}
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-body-has-fixed-header;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-body-has-fixed-header;
+		}
+	}
 }
 
 body.has-fixed-footer {
@@ -36,7 +46,17 @@ body.has-fixed-footer {
 		bottom: 0;
 	}
 
-	@media screen and (max-width: 1023px) {
+	@mixin db-body-has-fixed-footer {
 		padding-bottom: to-rem($pxValue: 94);
 	}
+	@if variable-exists(enterprise) {
+		// Based on the browser strategy, we could ignore Firefox for the moment
+		@container style(--db-narrower-screen: true) {
+			@include db-body-has-fixed-footer;
+		}
+	} @else {
+		@media screen and (max-width: $db-break-the-header-max-width) {
+			@include db-body-has-fixed-footer;
+		}
+	}
 }
diff --git a/source/_patterns/03-areas/enterprise/_areas.scss b/source/_patterns/03-areas/enterprise/_areas.scss
index 570da4e135..62baa52c97 100644
--- a/source/_patterns/03-areas/enterprise/_areas.scss
+++ b/source/_patterns/03-areas/enterprise/_areas.scss
@@ -1,2 +1,4 @@
+$enterprise: true;
+
 @import "areas.variables";
 @import "../areas";