.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-0cb2204:#000000;--e-global-color-13a8f34:#000000D9;--e-global-color-eeac002:#00000080;--e-global-color-63505ad:#00000026;--e-global-color-c981415:#00000017;--e-global-color-05c0bdb:#FFFFFF;--e-global-color-6dcaa7d:#FFFFFFD9;--e-global-color-052d254:#FFFFFF80;--e-global-color-4127489:#FFFFFF26;--e-global-color-75234e9:#8C5EFE;--e-global-color-8f65bda:#8C5EFED9;--e-global-color-ddc6006:#8C5EFE80;--e-global-color-a6e65e5:#8C5EFE26;--e-global-color-9cf504b:#F5F5F5;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-c9289ee-font-family:"Aspekta";--e-global-typography-c9289ee-font-size:clamp(2.75rem, 0.197rem + 10.892vw, 10rem);--e-global-typography-c9289ee-font-weight:500;--e-global-typography-c9289ee-line-height:1.05em;--e-global-typography-c9289ee-letter-spacing:-0.035em;--e-global-typography-88c2c92-font-family:"Aspekta";--e-global-typography-88c2c92-font-size:clamp(2.375rem, 0.835rem + 6.573vw, 6.75rem);--e-global-typography-88c2c92-font-weight:500;--e-global-typography-88c2c92-line-height:1.07em;--e-global-typography-88c2c92-letter-spacing:-0.035em;--e-global-typography-59b3200-font-family:"Aspekta";--e-global-typography-59b3200-font-size:clamp(2rem, 0.944rem + 4.507vw, 5rem);--e-global-typography-59b3200-font-weight:500;--e-global-typography-59b3200-line-height:1.1em;--e-global-typography-59b3200-letter-spacing:-0.02em;--e-global-typography-326ffcb-font-family:"Aspekta";--e-global-typography-326ffcb-font-size:clamp(1.688rem, 1.049rem + 2.723vw, 3.5rem);--e-global-typography-326ffcb-font-weight:500;--e-global-typography-326ffcb-line-height:1.14em;--e-global-typography-326ffcb-letter-spacing:-0.01em;--e-global-typography-e41e703-font-family:"Aspekta";--e-global-typography-e41e703-font-size:clamp(1.5rem, 0.972rem + 2.254vw, 3rem);--e-global-typography-e41e703-font-weight:500;--e-global-typography-e41e703-line-height:1.17em;--e-global-typography-e41e703-letter-spacing:-0.005em;--e-global-typography-0401ec6-font-family:"Aspekta";--e-global-typography-0401ec6-font-size:clamp(1.312rem, 1.07rem + 1.033vw, 2rem);--e-global-typography-0401ec6-font-weight:500;--e-global-typography-0401ec6-line-height:1.25em;--e-global-typography-0401ec6-letter-spacing:-0.005em;--e-global-typography-d522029-font-family:"Aspekta";--e-global-typography-d522029-font-size:clamp(1.188rem, 1.077rem + 0.469vw, 1.5rem);--e-global-typography-d522029-font-weight:500;--e-global-typography-d522029-line-height:1.33em;--e-global-typography-d522029-letter-spacing:0em;--e-global-typography-0f07726-font-family:"Aspekta";--e-global-typography-0f07726-font-size:clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);--e-global-typography-0f07726-font-weight:400;--e-global-typography-0f07726-line-height:1.5em;--e-global-typography-9de8913-font-family:"Aspekta";--e-global-typography-9de8913-font-size:18px;--e-global-typography-9de8913-font-weight:400;--e-global-typography-9de8913-line-height:27px;--e-global-typography-9ecc69d-font-family:"Aspekta";--e-global-typography-9ecc69d-font-size:16px;--e-global-typography-9ecc69d-font-weight:400;--e-global-typography-9ecc69d-line-height:24px;--e-global-typography-d8728be-font-family:"DM Mono";--e-global-typography-d8728be-font-size:16px;--e-global-typography-d8728be-font-weight:400;--e-global-typography-d8728be-line-height:24px;--e-global-typography-d8728be-letter-spacing:0.64px;background-color:var( --e-global-color-05c0bdb );overscroll-behavior:auto;--e-page-transition-entrance-animation:e-page-transition-fade-out-up;--e-page-transition-exit-animation:e-page-transition-fade-in-up;--e-page-transition-animation-duration:750ms;}.elementor-kit-9 e-page-transition{background-color:var( --e-global-color-0cb2204 );}.elementor-kit-9 p{margin-block-end:0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1792px;}.e-con{--container-max-width:1792px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.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:1024px){.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 *//* =========================================================
   FAKTOR MARKETING – Global CSS
   =========================================================
   0   VARIABLEN
   1   BUTTONS
       1.1  CTA-Basis (Anchor + Formular-Submit)
       1.2  Variante: Primär
       1.3  Variante: Sekundär
       1.4  Formular-Submit: Elementor-Struktur
       1.5  Carousel-Buttons
       1.6  Responsive
   2   KONTAKTFORMULAR – Felder
   3   HOVER-CARDS
   4   CUSTOM CURSOR
   5   OFF-CANVAS
   6   SCROLL & ANKER
   7   HEADER
   8   FAQ
   ========================================================= */


/* =========================================================
   0  VARIABLEN
   ========================================================= */

:root {
	--faktor-lila:          #8C5EFE;
	--faktor-lila-dunkel:   #7750D8;
	--faktor-schwarz:       #000000;
	--faktor-schwarz-hell:  #262626;
	--faktor-weiss:         #ffffff;

	--faktor-font:          'Aspekta', sans-serif;
	--faktor-radius:        12px;
	--faktor-transition:    0.3s ease;
	--faktor-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);

	--faktor-linie:         rgba(0, 0, 0, 0.15);
	--faktor-placeholder:   rgba(0, 0, 0, 0.5);

	--faktor-anker-offset:  160px;
}


/* =========================================================
   1  BUTTONS
   ========================================================= */

/* ---------------------------------------------------------
   1.1  CTA-Basis (Anchor + Formular-Submit)
   --------------------------------------------------------- */

.cta-button.cta-button,
.kontaktformular .elementor-form button.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 4px;
	padding: 10.5px 24px;
	border: none;
	border-radius: var(--faktor-radius);
	font-family: var(--faktor-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--faktor-weiss);
	text-decoration: none;
	transition: box-shadow var(--faktor-transition);
	cursor: pointer;
}

.cta-button.cta-button:link,
.cta-button.cta-button:visited,
.cta-button.cta-button:hover,
.cta-button.cta-button:focus,
.cta-button.cta-button:active,
.kontaktformular .elementor-form button.elementor-button:hover,
.kontaktformular .elementor-form button.elementor-button:focus {
	color: var(--faktor-weiss);
	text-decoration: none;
}

.cta-button.cta-button svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: var(--faktor-weiss);
}


/* ---------------------------------------------------------
   1.2  Variante: Primär
   --------------------------------------------------------- */

#primaer-button.cta-button,
.kontaktformular .elementor-form button.elementor-button {
	background: linear-gradient(180deg, var(--faktor-lila) 0%, var(--faktor-lila-dunkel) 100%);
	box-shadow: 0 0 0 4px rgba(140, 94, 254, 0.15);
}

#primaer-button.cta-button:hover,
#primaer-button.cta-button:focus-visible,
.kontaktformular .elementor-form button.elementor-button:hover,
.kontaktformular .elementor-form button.elementor-button:focus-visible {
	box-shadow: 0 0 0 4px rgba(140, 94, 254, 0.33);
}


/* ---------------------------------------------------------
   1.3  Variante: Sekundär
   --------------------------------------------------------- */

#sekundaer-button.cta-button {
	background: linear-gradient(180deg, var(--faktor-schwarz-hell) 0%, var(--faktor-schwarz) 100%);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.09);
}

#sekundaer-button.cta-button:hover,
#sekundaer-button.cta-button:focus-visible {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
   1.4  Formular-Submit: Elementor-Struktur
   --------------------------------------------------------- */

/* Stretch-Ausrichtung aufheben – sonst volle Breite */
.kontaktformular .elementor-form .elementor-field-type-submit {
	justify-content: flex-start;
}

.kontaktformular .elementor-form button.elementor-button {
	flex-basis: auto;
	width: auto;
	outline: none;
}

/* Icon-Größe – Abstand und Ausrichtung kommen aus dem Widget */
.kontaktformular .elementor-form button.elementor-button .elementor-button-icon {
	font-size: 10.8px;
	line-height: 1;
}

.kontaktformular .elementor-form button.elementor-button .elementor-button-icon svg {
	width: 10.8px;
	height: 10.8px;
	fill: currentColor;
}


/* ---------------------------------------------------------
   1.5  Carousel-Buttons
   --------------------------------------------------------- */

.carousel-btn.cta-button {
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	background: linear-gradient(180deg, var(--faktor-lila) 0%, var(--faktor-lila-dunkel) 100%);
	box-shadow: 0 0 0 4px rgba(140, 94, 254, 0.15);
	transition: box-shadow var(--faktor-transition), opacity var(--faktor-transition);
}

.carousel-btn.cta-button:hover,
.carousel-btn.cta-button:focus-visible {
	box-shadow: 0 0 0 4px rgba(140, 94, 254, 0.33);
}

.carousel-btn.cta-button.is-disabled {
	opacity: 0.15;
	pointer-events: none;
}

[id^="carousel-"] .swiper-wrapper {
	transition-timing-function: cubic-bezier(0.5, -0.15, 0.35, 1) !important;
}


/* ---------------------------------------------------------
   1.6  Responsive – Buttons über volle Breite
   --------------------------------------------------------- */

@media (max-width: 767px) {
	.cta-button.cta-button:not(.carousel-btn),
	.kontaktformular .elementor-form button.elementor-button {
		display: flex;
		box-sizing: border-box;
	}
}


/* =========================================================
   2  KONTAKTFORMULAR – Felder
   ========================================================= */

/* Basis: nur Bottom-Border, kein Innenabstand links/rechts */
.kontaktformular .elementor-field-group:not(.elementor-field-type-upload) .elementor-field.elementor-field-textual:not(.elementor-select-wrapper) {
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--faktor-linie);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	transition: border-bottom-color var(--faktor-transition);
}

.kontaktformular .elementor-field-group:not(.elementor-field-type-upload) .elementor-field.elementor-field-textual:not(.elementor-select-wrapper):hover {
	border-bottom-color: var(--faktor-lila);
}

/* Fokus: Elementor-Box-Shadow raus, Linie als Indikator */
.kontaktformular .elementor-field-group:not(.elementor-field-type-upload) .elementor-field.elementor-field-textual:not(.elementor-select-wrapper):focus {
	outline: none;
	box-shadow: none;
	border-bottom-color: var(--faktor-lila);
}

/* Platzhalter: Schwarz 50 %, opacity gegen Firefox-Default */
.kontaktformular .elementor-field-group .elementor-field-textual::placeholder {
	color: var(--faktor-placeholder);
	opacity: 1;
}


/* =========================================================
   3  HOVER-CARDS
   ========================================================= */

.hover-card .card-title .elementor-heading-title,
.hover-card .card-text p {
	transition: color var(--faktor-transition);
}

.hover-card:hover .card-title .elementor-heading-title {
	color: var(--faktor-weiss) !important;
}

.hover-card:hover .card-text p {
	color: rgba(255, 255, 255, 0.85) !important;
}


/* =========================================================
   4  CUSTOM CURSOR
   ========================================================= */

.cursor {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	z-index: 7;
}

.cursor-big {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 112px;
	height: 112px;
	padding: 0 24px;
	border-radius: 50%;
	background: var(--faktor-schwarz);
	text-align: center;
}

.cursor-big p {
	margin: 0;
	font-family: var(--faktor-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--faktor-weiss);
}

.cursor-trigger,
.cursor-trigger * {
	cursor: none;
}

@media (hover: none), (pointer: coarse) {
	.cursor {
		display: none;
	}
}


/* =========================================================
   5  OFF-CANVAS
   ========================================================= */

.e-off-canvas .e-off-canvas__main > * {
	box-shadow: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}


/* =========================================================
   6  SCROLL & ANKER
   ========================================================= */

/* Abstand unter fixiertem Header – gilt für alle Anker (#services, #faktor).
   Wird vom Lenis-Script ausgelesen, Wert nur in der Variable pflegen.
   overflow-anchor: Browser-Scrollkorrektur aus – kollidiert sonst mit Lenis
   (z. B. wenn sich Inhalte oberhalb in der Höhe ändern, FAQ). */
html {
	scroll-padding-top: calc(var(--faktor-anker-offset) + var(--wp-admin--admin-bar--height, 0px)) !important;
	overflow-anchor: none;
}


/* =========================================================
   7  HEADER
   ========================================================= */

/* Hide-on-Scroll – nur wo der Header sticky ist (Desktop + Laptop) */
@media (min-width: 1025px) {
	#desktop-header {
		transition: transform 0.5s var(--faktor-ease-out), background var(--faktor-transition), box-shadow var(--faktor-transition) !important;
		will-change: transform;
	}

	#desktop-header.is-hidden {
		transform: translate3d(0, calc(-100% - var(--wp-admin--admin-bar--height, 0px)), 0);
	}
}


/* =========================================================
   8  FAQ
   ========================================================= */

/* Eine Fläche: Hintergrund am ganzen Eintrag statt getrennt an Titel und Inhalt.
   [open] bleibt beim Schließen bis zum Ende gesetzt – Fläche bleibt lila,
   solange Text sichtbar ist, und wechselt erst danach zu Grau. */
.elementor-widget-n-accordion .e-n-accordion-item {
	background-color: var(--e-global-color-9cf504b);
	transition: background-color var(--faktor-transition);
}

.elementor-widget-n-accordion .e-n-accordion-item[open],
.elementor-widget-n-accordion .e-n-accordion-item:hover {
	background-color: var(--e-global-color-75234e9);
}

.elementor-widget-n-accordion .e-n-accordion-item > .e-n-accordion-item-title,
.elementor-widget-n-accordion .e-n-accordion-item > .e-con {
	background-color: transparent !important;
}

/* Nur ein Icon verwenden – kein Austausch während der Drehung */
.elementor-widget-n-accordion .e-n-accordion-item-title-icon .e-opened {
	display: none !important;
}

/* Dauerhaft eigene Ebene – verhindert Einrasten auf ganze Pixel nach der Drehung */
.elementor-widget-n-accordion .e-n-accordion-item-title-icon .e-closed {
	display: flex !important;
	transition: transform 0.5s var(--faktor-ease-out);
	will-change: transform;
	backface-visibility: hidden;
}

/* Container-Drehung aus altem Widget-CSS neutralisieren */
.elementor-widget-n-accordion .e-n-accordion-item-title-icon {
	transform: none !important;
	transition: none !important;
	will-change: auto !important;
}

/* Drehung an aria-expanded – schaltet beim Klick sofort, synchron zur Animation */
.elementor-widget-n-accordion .e-n-accordion-item-title[aria-expanded="true"] .e-n-accordion-item-title-icon .e-closed {
	transform: rotate(45deg);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://faktor-marketing.de/wp-content/uploads/2026/06/Aspekta-400.ttf') format('truetype');
}
@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://faktor-marketing.de/wp-content/uploads/2026/06/Aspekta-500.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://faktor-marketing.de/wp-content/uploads/2026/06/DMMono-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */