.elementor-kit-50423{--e-global-color-primary:#DB0031;--e-global-color-secondary:#707173;--e-global-color-text:#707173;--e-global-color-accent:#DB0031;--e-global-color-background:#FFFFFF;--e-global-color-backgroundAccent:#F5F5F5;--e-global-color-transparent:#00000000;--e-global-color-456d030:#189505;--e-global-color-6f2d884:#E69400;--e-global-color-9808431:#F2F2F2;--e-global-typography-primary-font-family:"Akzidenz Grotesk Pro";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Akzidenz Grotesk Pro";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Akzidenz Grotesk Pro";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Akzidenz Grotesk Pro";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.5em;--e-global-typography-heading-xl-font-family:"Akzidenz Grotesk Pro";--e-global-typography-heading-xl-font-size:56px;--e-global-typography-heading-xl-font-weight:600;--e-global-typography-heading-xl-line-height:1.2em;--e-global-typography-heading-l-font-family:"Akzidenz Grotesk Pro";--e-global-typography-heading-l-font-size:48px;--e-global-typography-heading-l-font-weight:600;--e-global-typography-heading-l-line-height:1.2em;--e-global-typography-heading-m-font-family:"Akzidenz Grotesk Pro";--e-global-typography-heading-m-font-size:40px;--e-global-typography-heading-m-font-weight:600;--e-global-typography-heading-m-line-height:1.2em;--e-global-typography-heading-s-font-family:"Akzidenz Grotesk Pro";--e-global-typography-heading-s-font-size:18px;--e-global-typography-heading-s-font-weight:500;--e-global-typography-body-s-font-family:"Akzidenz Grotesk Pro";--e-global-typography-body-s-font-size:14px;--e-global-typography-body-s-font-weight:400;--e-global-typography-body-s-line-height:1.5em;background-color:var( --e-global-color-background );font-family:"Akzidenz Grotesk Pro", Sans-serif;}.elementor-kit-50423 button,.elementor-kit-50423 input[type="button"],.elementor-kit-50423 input[type="submit"],.elementor-kit-50423 .elementor-button{background-color:var( --e-global-color-background );font-family:"Akzidenz Grotesk Pro", Sans-serif;font-weight:700;color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-kit-50423 e-page-transition{background-color:#FFBC7D;}.elementor-kit-50423 a{color:var( --e-global-color-primary );font-family:"Akzidenz Grotesk Pro", Sans-serif;font-weight:700;}.elementor-kit-50423 h1{font-family:"Akzidenz Grotesk Pro", Sans-serif;font-size:60px;font-weight:700;text-transform:uppercase;}.elementor-kit-50423 h2{font-family:"Akzidenz Grotesk Pro", Sans-serif;font-size:clamp(23px, 21.4118px + 0.4412cqi, 32px);font-weight:700;text-transform:uppercase;}.elementor-kit-50423 h3{font-family:"Akzidenz Grotesk Pro", Sans-serif;font-size:clamp(20px, 19.2941px + 0.1961cqi, 24px);font-weight:700;}.elementor-kit-50423 h4{font-family:"Montserrat", Sans-serif;}.elementor-kit-50423 h5{font-family:"Akzidenz Grotesk Pro", Sans-serif;}.elementor-kit-50423 h6{font-family:"Akzidenz Grotesk Pro", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1600px){.elementor-kit-50423{--e-global-typography-primary-font-size:56px;--e-global-typography-secondary-font-size:40px;--e-global-typography-text-font-size:19px;--e-global-typography-heading-xl-font-size:56px;--e-global-typography-heading-l-font-size:44px;--e-global-typography-heading-m-font-size:36px;}}@media(max-width:1024px){.elementor-kit-50423{--e-global-typography-primary-font-size:22px;--e-global-typography-secondary-font-size:18px;--e-global-typography-heading-xl-font-size:48px;--e-global-typography-heading-l-font-size:40px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:768px){.elementor-kit-50423{--e-global-typography-primary-font-size:18px;--e-global-typography-secondary-font-size:16px;--e-global-typography-heading-xl-font-size:40px;--e-global-typography-heading-l-font-size:32px;--e-global-typography-heading-m-font-size:32px;--e-global-typography-heading-s-font-size:16px;font-size:19px;}.elementor-kit-50423 a{font-size:19px;}.elementor-kit-50423 h1{font-size:44px;}.elementor-kit-50423 h4{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html, body {
    overflow-x: hidden !important;
}

::selection {
  background-color: #E69400;
  color: #db0031;           
}

.custom-loader-button .elementor-button {
    /* Standardzustand des Buttons */
    background-color: transparent !important;
    color: #db0031 !important;
    border: 1px solid #db0031 !important; /* Stellt die Border-Farbe ein */
    border-radius: 50px !important; /* Stellt den Border-Radius sicher */

    /* Vorbereitung für die Animation */
    position: relative;
    overflow: hidden;
    z-index: 1; /* Hält den Text über der Füllung */
    transition: color 0.3s ease; /* Übergang für die Textfarbe */
}

/* Erstellt das Pseudo-Element für die Füllanimation (den "Ladebalken") */
.custom-loader-button .elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* Startet bei 0% Breite (unsichtbar) */
    background-color: #db0031; /* Die Farbe der Füllung (rot) */
    transition: width 0.3s ease; /* Übergang für die Füllanimation */
    z-index: -1; /* Platziert die Füllung hinter dem Text */
}

/* HOVER-ZUSTAND */

/* Füllt den Button komplett mit Rot beim Hover */
.custom-loader-button .elementor-button:hover::before {
    width: 100%;
}

/* Ändert die Textfarbe zu Weiß beim Hover */
.custom-loader-button .elementor-button:hover {
    color: #ffffff !important; /* Textfarbe wechselt zu Weiß */
}

/* Erforderliche Basiseinstellungen: Transparenter Hintergrund, weiße Schrift und Border */
.reverse-loader-button .elementor-button {
    /* Standardzustand des Buttons */
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important; /* Stellt die Border-Farbe (Weiß) ein */
    border-radius: 50px !important; /* Stellt den Border-Radius sicher */

    /* Vorbereitung für die Animation */
    position: relative;
    overflow: hidden;
    z-index: 1; /* Hält den Text über der Füllung */
    transition: color 0.3s ease; /* Übergang für die Textfarbe */
}

/* Erstellt das Pseudo-Element für die Füllanimation (der Ladebalken) */
.reverse-loader-button .elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* Startet bei 0% Breite (unsichtbar) */
    background-color: #ffffff; /* Die Farbe der Füllung (Weiß) */
    transition: width 0.3s ease; /* Übergang für die Füllanimation */
    z-index: -1; /* Platziert die Füllung hinter dem Text */
}

/* HOVER-ZUSTAND */

/* Füllt den Button komplett mit Weiß beim Hover */
.reverse-loader-button .elementor-button:hover::before {
    width: 100%;
}

/* Ändert die Border-Farbe auf die Füllfarbe (Weiß) und die Textfarbe zu Rot beim Hover */
.reverse-loader-button .elementor-button:hover {
    color: #db0031 !important; /* Textfarbe wechselt zu Rot */
    /* Die Hintergrundfüllung wird bereits durch ::before erzeugt. */
    border-color: #ffffff !important; /* Optional: Stellt sicher, dass der Border auch Weiß ist */
}

/* Rot (gefüllt) -> Weiß (gefüllt, mit rotem Rahmen und Schrift) */

/* 1. Basiseinstellungen (Standardzustand: Rot gefüllt, Weiße Schrift) */
.loader-out-white-button .elementor-button {
    /* Button ist standardmäßig Rot gefüllt */
    background-color: #db0031 !important; 
    color: #ffffff !important;           /* Schrift ist Weiß */
    border: 1px solid #db0031 !important; /* Border ist 1px Rot */
    border-radius: 50px !important;

    /* Vorbereitung für die Animation */
    position: relative;
    overflow: hidden; /* Wichtig, damit das Pseudo-Element nicht übersteht */
    z-index: 1; /* Hält den Text über der weißen Füllung */

    /* Übergänge für Text, Border und Button-Hintergrund */
    transition: all 0.3s ease; /* Dauer ist 0.3s */
}

/* 2. Erstellt das Pseudo-Element für die WEISSE Füllung */
/* Es muss über den Roten Hintergrund wachsen. */
.loader-out-white-button .elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* STARTET bei 0% Breite (unsichtbar) */
    background-color: #ffffff; /* Die Farbe der Füllung (Weiß) */
    
    /* Animation: Wachsen von LINKS nach rechts */
    transform-origin: left; 
    transition: width 0.3s ease; /* Dauer ist 0.3s */
    
    z-index: -1; /* Hält die Füllung zwischen Text und Button-Hintergrund */
}

/* 3. HOVER-ZUSTAND */

/* Lässt die WEISSE Füllung beim Hover von links nach rechts wachsen */
.loader-out-white-button .elementor-button:hover::before {
    width: 100%; /* Breite wird 100% (Weiß füllt Button) */
}

/* Ändert die Textfarbe zu Rot beim Hover (Endzustand: Weiß gefüllt, Rote Schrift) */
.loader-out-white-button .elementor-button:hover {
    /* Der Hintergrund ist jetzt durch ::before Weiß, also setzen wir den Button-BG wieder auf transparent/rot,
       aber WICHTIGER ist der Text und der Border. */
    color: #db0031 !important;              /* Textfarbe WIRD ROT */
    border-color: #db0031 !important;       /* Border bleibt Rot */
}
.elementor-gallery-item:nth-child(n+5) {
		display: none !important;
}

.elementor-gallery__container {
		grid-template-rows: auto !important;
		height: auto !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Akzidenz Grotesk Pro';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.woff2') format('woff2'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.woff') format('woff'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.ttf') format('truetype'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.svg#AkzidenzGroteskPro') format('svg');
}
@font-face {
	font-family: 'Akzidenz Grotesk Pro';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light-1.woff2') format('woff2'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light.woff') format('woff'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light.ttf') format('truetype'),
		url('https://markgraf-bau.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://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.woff2') format('woff2'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.woff') format('woff'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.ttf') format('truetype'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.svg#AkzidenzGroteskPro') format('svg');
}
@font-face {
	font-family: 'Akzidenz Grotesk Pro';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.woff2') format('woff2'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.woff') format('woff'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.ttf') format('truetype'),
		url('https://markgraf-bau.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Regular.svg#AkzidenzGroteskPro') format('svg');
}
/* End Custom Fonts CSS */