/**
 * BF-Tag Web-App Dark Tokens (synchron zu src/styles/tokens.css :root[data-theme="dark"])
 * + Elementor Global Colors / Typo aus dem aktiven Kit.
 */

:root {
	--bf-color-primary: #4f75b7;
	--bf-color-primary-contrast: #f8fbff;
	--bf-color-topbar-bg: #15233a;
	--bf-color-topbar-fg: #e7edf6;
	--bf-color-bg: #0f1724;
	--bf-color-surface: #172235;
	--bf-color-surface-2: #203049;
	--bf-color-text: #e7edf6;
	--bf-color-text-muted: #9fb0ca;
	--bf-color-border: #2f4360;
	--bf-color-success: #4fb58a;
	--bf-color-warning: #deb14f;
	--bf-color-danger: #e66c6c;
}

html {
	background-color: var(--bf-color-bg);
	scroll-behavior: smooth;
}

body {
	background-color: var(--bf-color-bg) !important;
	color: var(--bf-color-text);
	font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

/*
 * Hero-Großfläche: Elementor-Verlauf endete mit --e-global-color-2265359 (#284b85),
 * der folgende Bereich ist aber Seitenhintergrund #0f1724 → sichtbare Kante.
 * Verlauf bis zum Page-Background auslaufen; Overlay abschwächen.
 */
.elementor-element.elementor-element-2da8db0f:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-2da8db0f > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element.elementor-element-6975f28e:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-6975f28e > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-image: linear-gradient(
		160deg,
		var(--bf-color-primary) 0%,
		var(--bf-color-bg) 100%
	) !important;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.elementor-element.elementor-element-2da8db0f:not(.elementor-motion-effects-element-type-background),
	.elementor-element.elementor-element-2da8db0f > .elementor-motion-effects-container > .elementor-motion-effects-layer,
	.elementor-element.elementor-element-6975f28e:not(.elementor-motion-effects-element-type-background),
	.elementor-element.elementor-element-6975f28e > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: linear-gradient(
			160deg,
			var(--bf-color-primary) 0%,
			color-mix(in srgb, var(--bf-color-primary) 28%, var(--bf-color-bg) 72%) 50%,
			var(--bf-color-bg) 100%
		) !important;
	}
}

.elementor-element-2da8db0f > .elementor-background-overlay,
.elementor-element-6975f28e > .elementor-background-overlay {
	opacity: 0.22 !important;
}

/* Elementor Site-Kit: alle gängigen Global-Colors auf Dark mappen */
/*
 * Hinweis zu --e-global-color-primary:
 * Im Elementor-Kit steht „Primary“ für Überschriften (auf dunklem Grund hell)
 * UND für Text auf hellen Buttons (Outline: Hintergrund c2dac2c + Primary als Schrift).
 * Ein einzelnes Token kann beides nicht perfekt abdecken – daher Zusatzregeln
 * für die wenigen Outline-Buttons unten (feste Elementor-IDs aus post-*.css).
 */
body[class*="elementor-kit-"] {
	--e-global-color-primary: #e7edf6 !important;
	--e-global-color-secondary: #172235 !important;
	--e-global-color-text: #e7edf6 !important;
	--e-global-color-accent: #4f75b7 !important;
	--e-global-color-c2dac2c: #f8fbff !important;
	--e-global-color-067a9d5: #ffffff00 !important;
	--e-global-color-2265359: #284b85 !important;
	--e-global-color-1107df6: #e7edf685 !important;
	--e-global-color-b8d674d: #2f4360 !important;
	--e-global-color-9cc7108: #1a273c !important;
	--e-global-color-f1f12d6: #4f75b733 !important;
	--e-global-color-124aafe: #6b8cc9 !important;
	--e-global-color-42c131e: #4f75b729 !important;
	--e-global-color-912e36e: #4fb58a !important;
	--e-global-color-db000cd: #4fb58a29 !important;
	--e-global-color-07d97e4: #e7edf629 !important;
	--e-global-color-250740b: #4f75b71f !important;

	--e-global-typography-primary-font-family: "Inter" !important;
	--e-global-typography-secondary-font-family: "Inter" !important;
	--e-global-typography-text-font-family: "Inter" !important;
	--e-global-typography-accent-font-family: "Inter" !important;
	--e-global-typography-c49f0f4-font-family: "Inter" !important;
	--e-global-typography-f44c832-font-family: "Inter" !important;
	--e-global-typography-ff2f798-font-family: "Inter" !important;
	--e-global-typography-ec6575a-font-family: "Inter" !important;
	--e-global-typography-a3d9527-font-family: "Inter" !important;
	--e-global-typography-57ad239-font-family: "Inter" !important;
	--e-global-typography-22a9633-font-family: "Inter" !important;
	--e-global-typography-9dff088-font-family: "Inter" !important;
	--e-global-typography-989fcc7-font-family: "Inter" !important;
	--e-global-typography-77b8574-font-family: "Inter" !important;
}

/* Kit: h1–h6 nutzen Primary – bleibt hell (wie oben). Form-Labels ebenfalls. */

/* Outline-Buttons: heller Hintergrund (c2dac2c) + Primary als Text – ohne Fix: hell auf hell */
.elementor-element-f02da96 .elementor-button,
.elementor-element-4e8955f .elementor-button {
	color: #0f1724 !important;
	fill: #0f1724 !important;
}

.elementor-element-c3e663f .elementor-button {
	color: #0f1724 !important;
	fill: #0f1724 !important;
	border-color: #0f1724 !important;
}

/* Popup / Lightbox (Post 650): feste dunkle Textfarben aus Elementor – Panel hell halten */
#elementor-popup-modal-650 .dialog-widget-content,
#elementor-popup-modal-650 .dialog-lightbox-widget-content {
	background-color: #eef2f7 !important;
	color: #141313;
}

#elementor-popup-modal-650 .elementor-heading-title {
	color: #141313 !important;
}

#elementor-popup-modal-650 .elementor-widget-text-editor,
#elementor-popup-modal-650 .elementor-widget-text-editor p {
	color: #686868 !important;
}

/* Hello-Theme-Bereiche ohne Elementor-Kit-Klasse */
body:not([class*="elementor-kit-"]) .site-header,
body:not([class*="elementor-kit-"]) .site-footer,
body:not([class*="elementor-kit-"]) .site-main {
	background-color: var(--bf-color-bg);
	color: var(--bf-color-text);
}

/* Container / Sektionen: häufig Secondary als Fläche */
.elementor-section,
.e-con,
.elementor-location-header .elementor-element,
.elementor-location-footer .elementor-element {
	--e-con-background: var(--bf-color-bg);
}

/* Widget-Texte, die nicht über Kit laufen */
.elementor-widget-text-editor,
.elementor-widget-theme-post-content,
.elementor-widget-heading .elementor-heading-title {
	color: inherit;
}

.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
	color: var(--bf-color-text);
}

/* Links */
.elementor a,
.page-content a,
.entry-content a {
	color: var(--bf-color-primary);
}

.elementor a:hover,
.page-content a:hover,
.entry-content a:hover {
	color: #6d93d4;
}

/* Formulare (Kit nutzt teils transparente Inputs) */
body[class*="elementor-kit-"] input:not([type="button"]):not([type="submit"]),
body[class*="elementor-kit-"] textarea,
.elementor-field-textual,
input:not([type="button"]):not([type="submit"]),
textarea {
	background-color: var(--bf-color-surface) !important;
	border-color: var(--bf-color-border) !important;
	color: var(--bf-color-text) !important;
}

/* Menü-Unterstreichung / Pointer (war oft #FFFFFF) */
.elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after,
.elementor-nav-menu--main.e--pointer-framed .elementor-item:before,
.elementor-nav-menu--main.e--pointer-framed .elementor-item:after {
	background-color: var(--bf-color-primary) !important;
	border-color: var(--bf-color-primary) !important;
}

/* Dropdowns */
.elementor-nav-menu--dropdown {
	background-color: var(--bf-color-surface) !important;
	border: 1px solid var(--bf-color-border);
}

.elementor-nav-menu--dropdown a {
	color: var(--bf-color-text) !important;
}

.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a:focus,
.elementor-nav-menu--dropdown a.elementor-item-active {
	background-color: var(--bf-color-surface-2) !important;
}

/* Buttons: Hover wie kräftigere Primärfarbe (Accent-Buttons; Ausnahmen folgen) */
.elementor-button:hover,
.elementor-button:focus {
	background-color: color-mix(in srgb, var(--bf-color-primary) 88%, #ffffff 12%) !important;
	color: var(--bf-color-primary-contrast) !important;
	border-color: var(--bf-color-primary) !important;
}

/*
 * Startseite (Post 145), Header 222, Footer 117, Mobile 580, Popup 650
 * Widget-Typen aus _elementor_data (elementor + endpoint_counter + theme-site-logo).
 */

/* Testimonial: Kit nutzt Primary als Sektionsfarbe + c2dac2c Text → zu wenig Kontrast */
.elementor-element.elementor-element-776cfcbc:not(.elementor-motion-effects-element-type-background),
.elementor-element.elementor-element-776cfcbc > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: var(--bf-color-surface) !important;
}

.elementor-element-63c75ec2 .elementor-testimonial-content,
.elementor-element-63c75ec2 .elementor-testimonial-name {
	color: var(--bf-color-text) !important;
}

.elementor-element-63c75ec2 .elementor-testimonial-job {
	color: var(--bf-color-primary) !important;
}

.elementor-element-eecaabe .elementor-heading-title {
	color: var(--bf-color-text) !important;
}

/* Feature-Kacheln: Icon-Box auf hellem Gradient (Spalten-IDs Startseite) */
.elementor-element-5d2b6ee .elementor-icon-box-title,
.elementor-element-5d2b6ee .elementor-icon-box-title a,
.elementor-element-5d2b6ee .elementor-icon-box-description,
.elementor-element-78ce430 .elementor-icon-box-title,
.elementor-element-78ce430 .elementor-icon-box-title a,
.elementor-element-78ce430 .elementor-icon-box-description,
.elementor-element-d9f7650 .elementor-icon-box-title,
.elementor-element-d9f7650 .elementor-icon-box-title a,
.elementor-element-d9f7650 .elementor-icon-box-description,
.elementor-element-2c067ce .elementor-icon-box-title,
.elementor-element-2c067ce .elementor-icon-box-title a,
.elementor-element-2c067ce .elementor-icon-box-description,
.elementor-element-dafc3a8 .elementor-icon-box-title,
.elementor-element-dafc3a8 .elementor-icon-box-title a,
.elementor-element-dafc3a8 .elementor-icon-box-description,
.elementor-element-f8a161a .elementor-icon-box-title,
.elementor-element-f8a161a .elementor-icon-box-title a,
.elementor-element-f8a161a .elementor-icon-box-description {
	color: #0f1724 !important;
}

/* Image-Box (z. B. drei Spalten unter Video) */
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-title a,
.elementor-widget-image-box .elementor-image-box-description {
	color: var(--bf-color-text);
}

/* Endpoint-Zähler (Plugin api-endpoint-manager) – Hero & dunkle Flächen */
.elementor-widget-endpoint_counter .endpoint-counter-title,
.elementor-widget-endpoint_counter .endpoint-counter-prefix,
.elementor-widget-endpoint_counter .endpoint-counter-suffix,
.elementor-widget-endpoint_counter .endpoint-counter-number {
	color: var(--bf-color-primary-contrast) !important;
}

/* Ghost-Button „Mehr entdecken“ (77191ec2) */
.elementor-element-77191ec2 .elementor-button {
	color: var(--bf-color-text) !important;
	fill: var(--bf-color-text) !important;
	border-color: var(--bf-color-primary) !important;
	background-color: transparent !important;
}

.elementor-element-77191ec2 .elementor-button:hover,
.elementor-element-77191ec2 .elementor-button:focus {
	background-color: rgba(79, 117, 183, 0.22) !important;
	color: var(--bf-color-primary-contrast) !important;
	fill: var(--bf-color-primary-contrast) !important;
	border-color: var(--bf-color-primary) !important;
}

/* Outline-Buttons: globalen Hover überschreiben */
.elementor-element-f02da96 .elementor-button:hover,
.elementor-element-f02da96 .elementor-button:focus,
.elementor-element-4e8955f .elementor-button:hover,
.elementor-element-4e8955f .elementor-button:focus {
	background-color: var(--bf-color-surface-2) !important;
	color: #0f1724 !important;
	fill: #0f1724 !important;
	border-color: var(--bf-color-border) !important;
}

.elementor-element-c3e663f .elementor-button:hover,
.elementor-element-c3e663f .elementor-button:focus {
	background-color: var(--bf-color-surface-2) !important;
	color: #0f1724 !important;
	fill: #0f1724 !important;
	border-color: #0f1724 !important;
}

/* Popup 650: violetter CTA – ursprünglicher Hover (weiß / violett) */
#elementor-popup-modal-650 .elementor-element-1dda2a5c .elementor-button:hover,
#elementor-popup-modal-650 .elementor-element-1dda2a5c .elementor-button:focus {
	background-color: #ffffff !important;
	color: #635dff !important;
	fill: #635dff !important;
	border-color: #635dff !important;
}

/* Footer: Copyright-Zeile */
.elementor-element-246e4840 .elementor-heading-title {
	color: var(--bf-color-text-muted) !important;
}

/* Icon-List: Icon-Farbe folgt Primary (E-Mail-Zeile) – auf Secondary-Hintergrund ok */
.elementor-widget-icon-list .elementor-icon-list-icon,
.elementor-widget-icon-list .elementor-icon-list-icon i {
	color: var(--bf-color-primary);
}

.elementor-widget-icon-list .elementor-icon-list-icon svg {
	fill: var(--bf-color-primary);
}

/* Scrollbar (analog Web-App) */
* {
	scrollbar-width: thin;
	scrollbar-color: #40587b #1a273c;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
	background: #1a273c;
	border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
	background: #40587b;
	border-radius: 999px;
	border: 2px solid #1a273c;
}

*::-webkit-scrollbar-thumb:hover {
	background: #5371a0;
}