.elementor-57651 .elementor-element.elementor-element-17d3dc91{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:7%;--z-index:95;}.elementor-57651 .elementor-element.elementor-element-17d3dc91:not(.elementor-motion-effects-element-type-background), .elementor-57651 .elementor-element.elementor-element-17d3dc91 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-el_color_0 );}.elementor-57651 .elementor-element.elementor-element-75da56bd{--display:flex;--width:25%;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-57651 .elementor-element.elementor-element-75da56bd:not(.elementor-motion-effects-element-type-background), .elementor-57651 .elementor-element.elementor-element-75da56bd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DB003100;background-image:url("https://markgraf.variaplus.de/wp-content/uploads/2026/01/markgraf-schraege-weiss-nav.svg");background-position:center left;background-repeat:no-repeat;background-size:contain;}.elementor-57651 .elementor-element.elementor-element-3dabe3af > .elementor-widget-container{padding:15px 15px 15px 15px;}.elementor-57651 .elementor-element.elementor-element-3dabe3af{text-align:left;}.elementor-57651 .elementor-element.elementor-element-3dabe3af img{width:100%;max-width:100%;}.elementor-57651 .elementor-element.elementor-element-156bcc06{--display:flex;--width:80%;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--gap:31px 31px;--row-gap:31px;--column-gap:31px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1280px){.elementor-57651 .elementor-element.elementor-element-17d3dc91{--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-57651 .elementor-element.elementor-element-75da56bd{--width:25%;}.elementor-57651 .elementor-element.elementor-element-3dabe3af > .elementor-widget-container{padding:10px 10px 10px 10px;}.elementor-57651 .elementor-element.elementor-element-3dabe3af img{width:160px;max-width:154px;}.elementor-57651 .elementor-element.elementor-element-156bcc06{--width:100%;--gap:25px 25px;--row-gap:25px;--column-gap:25px;}}@media(max-width:834px){.elementor-57651 .elementor-element.elementor-element-17d3dc91{--min-height:85px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-57651 .elementor-element.elementor-element-75da56bd{--width:15%;}.elementor-57651 .elementor-element.elementor-element-3dabe3af img{height:27px;}.elementor-57651 .elementor-element.elementor-element-156bcc06{--width:85%;}}@media(max-width:431px){.elementor-57651 .elementor-element.elementor-element-75da56bd{--width:50%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-57651 .elementor-element.elementor-element-3dabe3af.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-57651 .elementor-element.elementor-element-3dabe3af img{height:1px;}.elementor-57651 .elementor-element.elementor-element-156bcc06{--width:50%;}}/* Start custom CSS *//***
* Shrinking Sticky header, no container edition
* class: .sticky-header
* Uses the built-in .elementor-container class for shrinking the header in non-container installs
*/
header.sticky-header-red {
	--header-height: 109px; /* Set your own header height */
	--shrink-header-to: 0.5; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */
	transition: background-color var(--transition-timing),
				backdrop-filter var(--transition-timing),
				box-shadow var(--transition-timing);
}
.sticky-header-red.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .3) !important; /* Set your own background color on scroll */
	box-shadow: 0px 4px 13px 1px rgba(0, 0, 0, .10); z-index:9; /* Delete this line if you don't want shadow on scroll */
	-webkit-backdrop-filter: saturate(100%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	backdrop-filter: saturate(100%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
.sticky-header-red > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition-timing);
}
.sticky-header-red.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}


/***
* Shrinking Sticky header, Elementor Container edition
* class: .sticky-header
* This will only work with the Elementor container section
* the header uses additional 3 classes to gain higher CSS specificity and to avoid adding !important
*/
.sticky-header-red.e-container.elementor-element {
	--header-height: 89px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */
	--min-height: var(--header-height);
	--transition: background-color var(--transition-timing),
					backdrop-filter var(--transition-timing),
					box-shadow var(--transition-timing),
					min-height var(--transition-timing);
}
.sticky-header-red.e-container.elementor-element.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
	-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	--min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header-red .logo img,
header.sticky-header-red .logo.elementor-widget-theme-site-logo img,
header.sticky-header-red .logo .elementor-icon svg {
	--logo-height: 65px; /* This should be the original logo height _before_ being shrunk */
	--logo-shrink-to: 0.75; /* Shrinks logo to 80%, values: 0.10 to 1.00, where 1.00, as in 100%, won't shrink the logo */
	height: var(--logo-height);
	transition: height var(--transition-timing);
}
header.sticky-header-red.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header-red.elementor-sticky--effects .logo .elementor-icon svg {
	height: calc(var(--logo-height) * var(--logo-shrink-to));
}
header.sticky-header-red .logo .elementor-icon svg {
	width: auto;
}

/***
* Optional: Shorter header on mobile
*/
@media only screen and (max-width: 767px) {
	header.sticky-header,
	header.sticky-header.e-container.elementor-element {
		--header-height: 70px;
	}
}

/***
* Optional: Change nav menu text color on scroll
*/
header.sticky-header-red.elementor-sticky--effects .elementor-item {
	color: black !important; /* Set your own nav menu font color on scroll */
}
header.sticky-header-red.elementor-sticky--effects .elementor-item:active {
	color: #db0031 !important; /* This will be the mouse hover color for the menu on scroll */
}


header.sticky-header-red.elementor-sticky--effects .elementor-item:hover {
	color: #db0031 !important; /* This will be the mouse hover color for the menu on scroll */
}/* End custom CSS */