.elementor-kit-50423{--e-global-color-primary:#FF0000;--e-global-color-secondary:#FF0000;--e-global-color-text:#FF0000;--e-global-color-accent:#FF0000;--e-global-color-background:#000000;--e-global-color-transparent:#F9B233;--e-global-color-4fd491a:#F1D5B7;--e-global-color-backgroundAccent:#FFFFFF;--e-global-typography-heading-xl-font-family:"Inter";--e-global-typography-heading-xl-font-size:clamp(2.0rem, 0.625vw + 0.0rem, 3.0rem);--e-global-typography-heading-xl-font-weight:400;--e-global-typography-heading-xl-text-transform:uppercase;--e-global-typography-heading-xl-line-height:1.25em;--e-global-typography-heading-xl-letter-spacing:0.02em;--e-global-typography-heading-l-font-family:"Inter";--e-global-typography-heading-l-font-size:clamp(1.75rem, 0.3125vw + 0.75rem, 2.25rem);--e-global-typography-heading-l-font-weight:400;--e-global-typography-heading-l-text-transform:uppercase;--e-global-typography-heading-l-line-height:1.25em;--e-global-typography-heading-l-letter-spacing:0.02em;--e-global-typography-heading-m-font-family:"Inter";--e-global-typography-heading-m-font-size:clamp(1.50rem, 0.2344vw + 0.75rem, 1.875);--e-global-typography-heading-m-font-weight:400;--e-global-typography-heading-m-text-transform:uppercase;--e-global-typography-heading-m-line-height:1.25em;--e-global-typography-heading-m-letter-spacing:0.02em;--e-global-typography-heading-s-font-family:"Inter";--e-global-typography-heading-s-font-size:clamp(1.25rem, 0.1563vw + 0.75rem, 1.50rem);--e-global-typography-heading-s-font-weight:400;--e-global-typography-heading-s-text-transform:uppercase;--e-global-typography-heading-s-line-height:1.25em;--e-global-typography-heading-s-letter-spacing:0.02em;--e-global-typography-1d5891d-font-family:"Inter";--e-global-typography-1d5891d-font-size:clamp(1.125rem, 0.0781vw + 0.875rem, 1.25rem);--e-global-typography-1d5891d-font-weight:400;--e-global-typography-1d5891d-text-transform:uppercase;--e-global-typography-1d5891d-line-height:1.25em;--e-global-typography-1d5891d-letter-spacing:0.02em;--e-global-typography-0bd364a-font-family:"Inter";--e-global-typography-0bd364a-font-size:clamp(1.0rem, 0.0781vw + 0.75rem, 1.125rem);--e-global-typography-0bd364a-font-weight:400;--e-global-typography-0bd364a-text-transform:uppercase;--e-global-typography-0bd364a-line-height:1.2em;--e-global-typography-0bd364a-letter-spacing:0.02em;--e-global-typography-body-s-font-family:"Inter";--e-global-typography-body-s-font-size:clamp(1.0625rem, 0.1172vw + 0.6875rem, 1.25rem);--e-global-typography-body-s-font-weight:400;--e-global-typography-body-s-text-transform:uppercase;--e-global-typography-body-s-line-height:1.25em;--e-global-typography-body-s-letter-spacing:0.02em;--e-global-typography-aee3146-font-family:"Inter";--e-global-typography-aee3146-font-size:clamp(1.0625rem, 0.1172vw + 0.6875rem, 1.25rem);--e-global-typography-aee3146-font-weight:400;--e-global-typography-aee3146-line-height:1.5em;--e-global-typography-a8edbd0-font-family:"Inter";--e-global-typography-a8edbd0-font-size:clamp(0.875rem, 0.0391vw + 0.75rem, 0.9375rem);--e-global-typography-a8edbd0-font-weight:400;--e-global-typography-a8edbd0-line-height:1.66em;--e-global-typography-06993c1-font-family:"Inter";--e-global-typography-06993c1-font-size:clamp(0.8125rem, 0.0391vw + 0.6875rem, 0.875rem);--e-global-typography-06993c1-font-weight:400;--e-global-typography-06993c1-line-height:1.14em;--e-global-typography-e2e9deb-font-family:"Inter";--e-global-typography-e2e9deb-font-size:clamp(0.625rem, 0.0vw + 0.625rem, 0.625rem);--e-global-typography-e2e9deb-font-weight:400;--e-global-typography-e2e9deb-line-height:2.6em;background-color:var( --e-global-color-backgroundAccent );}.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-transparent );}.elementor-kit-50423 h1{font-family:"Inter", Sans-serif;font-size:clamp(2.0rem,0.6250vw+0.0rem,3.0rem);font-weight:400;text-transform:uppercase;line-height:1.25em;letter-spacing:0.02em;}.elementor-kit-50423 h2{font-family:"Inter", Sans-serif;font-size:clamp(1.75rem,0.3125vw+0.75rem,2.25rem);font-weight:400;text-transform:uppercase;line-height:1.25em;letter-spacing:0.02em;}.elementor-kit-50423 h3{font-family:"Inter", Sans-serif;font-size:clamp(1.50rem,0.2344vw+0.75rem,1.875rem);font-weight:400;text-transform:uppercase;line-height:1.25em;letter-spacing:0.02em;}.elementor-kit-50423 h4{font-size:clamp(1.25rem,0.1563vw+0.75rem,1.50rem);font-weight:400;text-transform:uppercase;line-height:1.25em;letter-spacing:0.02em;}.elementor-kit-50423 h5{font-family:"Inter", Sans-serif;font-size:clamp(1.125rem,0.0781vw+0.875rem,1.25rem);font-weight:400;text-transform:uppercase;line-height:1.25em;letter-spacing:0.02em;}.elementor-kit-50423 h6{font-family:"Inter", Sans-serif;font-size:clamp(1.0rem,0.0781vw+0.75rem,1.125rem);font-weight:400;line-height:1.66em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.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:1025px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */::selection {
  background-color: #E69400;
  color: #ffffff;           
}

.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 */
}/* 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('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.woff2') format('woff2'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.woff') format('woff'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Bold.ttf') format('truetype'),
		url('http://joka.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('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light-1.woff2') format('woff2'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light.woff') format('woff'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Light.ttf') format('truetype'),
		url('http://joka.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('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.woff2') format('woff2'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.woff') format('woff'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-Md.ttf') format('truetype'),
		url('http://joka.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('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldEx.woff2') format('woff2'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldExIt.woff') format('woff'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldEx.ttf') format('truetype'),
		url('http://joka.variaplus.de/wp-content/uploads/2025/10/AkzidenzGroteskPro-BoldEx.svg#AkzidenzGroteskPro') format('svg');
}
/* End Custom Fonts CSS */