.elementor-59228 .elementor-element.elementor-element-67e7a768{--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:8%;--z-index:95;}.elementor-59228 .elementor-element.elementor-element-67e7a768:not(.elementor-motion-effects-element-type-background), .elementor-59228 .elementor-element.elementor-element-67e7a768 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-59228 .elementor-element.elementor-element-bcc9cff{--display:flex;--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-59228 .elementor-element.elementor-element-bcc9cff:not(.elementor-motion-effects-element-type-background), .elementor-59228 .elementor-element.elementor-element-bcc9cff > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DB003100;background-image:url("https://markgrafbau.variaplus.de/wp-content/uploads/2025/11/markgraf-schraege-weiss-nav.svg");background-position:center left;background-repeat:no-repeat;background-size:contain;}.elementor-59228 .elementor-element.elementor-element-35de1d78{padding:15px 15px 15px 15px;text-align:start;}.elementor-59228 .elementor-element.elementor-element-35de1d78 img{width:100%;max-width:100%;}.elementor-59228 .elementor-element.elementor-element-5a84000d{--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;--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-59228 .elementor-element.elementor-element-c6d59f7 .elementor-menu-toggle{margin:0 auto;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu .elementor-item{font-family:"Akzidenz Grotesk Pro", Sans-serif;font-size:16px;font-weight:300;text-transform:uppercase;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-background );fill:var( --e-global-color-background );padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main .elementor-item:hover, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-6f2d884 );fill:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed .elementor-item:before, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed .elementor-item.elementor-item-active:before, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed .elementor-item:before{border-width:1px;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 1px 1px;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:1px 1px 0 0;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:1px 0 0 1px;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 1px 1px 0;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-underline .elementor-item:after, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-overline .elementor-item:before, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-double-line .elementor-item:before, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .e--pointer-double-line .elementor-item:after{height:1px;}.elementor-59228 .elementor-element.elementor-element-c6d59f7{--e-nav-menu-horizontal-menu-item-margin:calc( 40px / 2 );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:40px;}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-menu-toggle{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown{background-color:var( --e-global-color-background );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a:hover, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a:focus, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a.highlighted, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-menu-toggle:hover, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-menu-toggle:focus{color:var( --e-global-color-accent );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a:hover, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a:focus, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-background );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-accent );background-color:var( --e-global-color-background );}.elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown .elementor-item, .elementor-59228 .elementor-element.elementor-element-c6d59f7 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Akzidenz Grotesk Pro", Sans-serif;font-size:14px;font-weight:300;text-transform:uppercase;}.elementor-59228 .elementor-element.elementor-element-6d2151f .elementor-icon-wrapper{text-align:center;}.elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-background );}.elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-framed .elementor-icon, .elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-default .elementor-icon{color:var( --e-global-color-background );border-color:var( --e-global-color-background );}.elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-framed .elementor-icon, .elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-background );}.elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-stacked .elementor-icon:hover{background-color:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-framed .elementor-icon:hover, .elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-default .elementor-icon:hover{color:var( --e-global-color-6f2d884 );border-color:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-framed .elementor-icon:hover, .elementor-59228 .elementor-element.elementor-element-6d2151f.elementor-view-default .elementor-icon:hover svg{fill:var( --e-global-color-6f2d884 );}.elementor-59228 .elementor-element.elementor-element-6d2151f .elementor-icon-wrapper svg{width:auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1600px){.elementor-59228 .elementor-element.elementor-element-67e7a768{--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-59228 .elementor-element.elementor-element-35de1d78{padding:10px 10px 10px 10px;}.elementor-59228 .elementor-element.elementor-element-35de1d78 img{width:160px;max-width:154px;}.elementor-59228 .elementor-element.elementor-element-5a84000d{--gap:25px 25px;--row-gap:25px;--column-gap:25px;}}@media(max-width:1024px){.elementor-59228 .elementor-element.elementor-element-67e7a768{--min-height:85px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-59228 .elementor-element.elementor-element-35de1d78 img{height:27px;}.elementor-59228 .elementor-element.elementor-element-5a84000d{--justify-content:flex-end;}.elementor-59228 .elementor-element.elementor-element-6d2151f .elementor-icon{font-size:25px;}.elementor-59228 .elementor-element.elementor-element-6d2151f .elementor-icon svg{height:25px;}}@media(max-width:460px){.elementor-59228 .elementor-element.elementor-element-bcc9cff{--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-59228 .elementor-element.elementor-element-35de1d78.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-59228 .elementor-element.elementor-element-35de1d78 img{height:1px;}.elementor-59228 .elementor-element.elementor-element-5a84000d{--width:50%;--justify-content:flex-end;}}@media(min-width:461px){.elementor-59228 .elementor-element.elementor-element-bcc9cff{--width:20%;}.elementor-59228 .elementor-element.elementor-element-5a84000d{--width:80%;}}@media(max-width:1600px) and (min-width:461px){.elementor-59228 .elementor-element.elementor-element-bcc9cff{--width:25%;}.elementor-59228 .elementor-element.elementor-element-5a84000d{--width:100%;}}@media(max-width:1024px) and (min-width:461px){.elementor-59228 .elementor-element.elementor-element-bcc9cff{--width:15%;}.elementor-59228 .elementor-element.elementor-element-5a84000d{--width:85%;}}/* 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 */ } @media only screen and (max-width: 1024px) { /* Setzt den Header-Hintergrund auf Weiß für beide Versionen (Container & No-Container) */ header.sticky-header, header.sticky-header.e-container.elementor-element, header.sticky-header.elementor-sticky--effects, header.sticky-header.e-container.elementor-element.elementor-sticky--effects { background-color: #DB0031 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Akzidenz Grotesk Pro'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.woff2') format('woff2'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.woff') format('woff'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.ttf') format('truetype'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.svg#AkzidenzGroteskPro') format('svg'); } @font-face { font-family: 'Akzidenz Grotesk Pro'; font-style: normal; font-weight: 100; font-display: auto; src: url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light-1.woff2') format('woff2'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light.woff') format('woff'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light.ttf') format('truetype'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light.svg#AkzidenzGroteskPro') format('svg'); } @font-face { font-family: 'Akzidenz Grotesk Pro'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.woff2') format('woff2'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.woff') format('woff'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.ttf') format('truetype'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.svg#AkzidenzGroteskPro') format('svg'); } @font-face { font-family: 'Akzidenz Grotesk Pro'; font-style: normal; font-weight: 900; font-display: auto; src: url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldEx.woff2') format('woff2'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldExIt.woff') format('woff'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldEx.ttf') format('truetype'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldEx.svg#AkzidenzGroteskPro') format('svg'); } @font-face { font-family: 'Akzidenz Grotesk Pro'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.woff2') format('woff2'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.woff') format('woff'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.ttf') format('truetype'), url('https://markgrafbau.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.svg#AkzidenzGroteskPro') format('svg'); } /* End Custom Fonts CSS */