/* ==========================================================================
   Finanzwerk38 · Child-Theme Styles
   Nur was Elementor Free nicht nativ kann. Layout, Farben und Typo-Größen
   kommen aus den Elementor Site Settings (Global Colors / Global Fonts).
   ========================================================================== */

/* 1. Schriften (lokal, DSGVO) ------------------------------------------- */
@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens -------------------------------------------------------------- */
:root {
	--fw38-black: #000000;
	--fw38-graphite: #1a1a1a;
	--fw38-dark: #333333;
	--fw38-mid: #757575;      /* nur für Großtext / UI, auf Weiß 4,6:1 */
	--fw38-line: #e3e3e0;
	--fw38-light: #f4f4f2;
	--fw38-white: #ffffff;

	--fw38-ease-out: cubic-bezier(0, 0, 0.3, 1);
	--fw38-ease-in: cubic-bezier(0.2, 0, 1, 0.9);
	--fw38-ease-emph: cubic-bezier(0.05, 0.7, 0.1, 1);

	--fw38-header-h: 80px;
}

/* 3. Basis --------------------------------------------------------------- */
html {
	scroll-padding-top: calc(var(--fw38-header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
::selection {
	background: var(--fw38-black);
	color: var(--fw38-white);
}
/* Optische Größe der Serif-Schrift an die Schriftgröße koppeln */
.elementor-heading-title {
	font-optical-sizing: auto;
	text-wrap: balance;
}
.elementor-widget-text-editor p {
	text-wrap: pretty;
}

/* 4. Fokus (Tastatur) ---------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--fw38-black);
	outline-offset: 3px;
	border-radius: 0;
}
.fw38-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.fw38-on-dark:focus-visible {
	outline-color: var(--fw38-white);
}

/* 5. Overline / Label (CSS-Klasse am Heading-Widget: fw38-overline) ------ */
.fw38-overline .elementor-heading-title {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* 6. Sticky Header ------------------------------------------------------- *
 * Funktioniert mit "Elementor Header & Footer Builder" (#masthead)
 * oder mit der Klasse fw38-sticky-header am obersten Header-Container.  */
.ehf-header #masthead,
.fw38-sticky-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--fw38-white);
	transition:
		box-shadow 200ms var(--fw38-ease-out),
		background-color 200ms var(--fw38-ease-out);
}
.admin-bar.ehf-header #masthead,
.admin-bar .fw38-sticky-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar.ehf-header #masthead,
	.admin-bar .fw38-sticky-header { top: 46px; }
}
.fw38-is-scrolled.ehf-header #masthead,
.fw38-is-scrolled .fw38-sticky-header {
	box-shadow: 0 1px 0 var(--fw38-line);
}
/* Header schrumpft beim Scrollen: Innenabstand des ersten Containers */
.ehf-header #masthead > .elementor > .e-con,
.fw38-sticky-header > .e-con-inner {
	transition: padding 250ms var(--fw38-ease-out);
}
.fw38-is-scrolled.ehf-header #masthead > .elementor > .e-con {
	padding-block: 12px;
}

/* 7. Buttons: Hover über mehrere Kanäle ---------------------------------- */
.elementor-button {
	border-radius: 0;
	transition:
		background-color 150ms var(--fw38-ease-out),
		color 150ms var(--fw38-ease-out),
		border-color 150ms var(--fw38-ease-out);
}
.elementor-button .elementor-button-icon {
	transition: transform 200ms var(--fw38-ease-out) 30ms;
}
.elementor-button:hover .elementor-button-icon,
.elementor-button:focus-visible .elementor-button-icon {
	transform: translateX(4px);
}

/* 8. Pfeil-Links und Leistungsliste (Klasse fw38-arrow-list) ------------- */
.fw38-arrow-list .elementor-icon-list-item > a,
.fw38-arrow-list .elementor-icon-list-item {
	position: relative;
}
.fw38-arrow-list .elementor-icon-list-item {
	border-bottom: 1px solid var(--fw38-line);
}
.fw38-arrow-list .elementor-icon-list-item > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-block: 14px;
}
.fw38-arrow-list .elementor-icon-list-icon {
	order: 2;
	transition: transform 200ms var(--fw38-ease-out) 30ms;
}
.fw38-arrow-list .elementor-icon-list-item > a:hover .elementor-icon-list-icon,
.fw38-arrow-list .elementor-icon-list-item > a:focus-visible .elementor-icon-list-icon {
	transform: translateX(6px);
}
/* Unterstrich wächst von links */
.fw38-arrow-list .elementor-icon-list-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--fw38-black);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 250ms var(--fw38-ease-out);
}
.fw38-arrow-list .elementor-icon-list-item:hover::after,
.fw38-arrow-list .elementor-icon-list-item:focus-within::after {
	transform: scaleX(1);
}

/* 9. Cards (Klasse fw38-card am Container) ------------------------------- */
.fw38-card {
	border: 1px solid var(--fw38-line);
	background: var(--fw38-white);
	transition:
		border-color 150ms var(--fw38-ease-out),
		transform 250ms var(--fw38-ease-out);
}
.fw38-card:hover,
.fw38-card:focus-within {
	border-color: var(--fw38-graphite);
	transform: translateY(-2px);
}
.fw38-card .fw38-card-arrow .elementor-icon,
.fw38-card .fw38-card-arrow i,
.fw38-card .fw38-card-arrow svg {
	transition: transform 200ms var(--fw38-ease-out) 30ms;
}
.fw38-card:hover .fw38-card-arrow .elementor-icon,
.fw38-card:hover .fw38-card-arrow i,
.fw38-card:hover .fw38-card-arrow svg {
	transform: translateX(6px);
}
/* ganze Karte klickbar: Link im Card-Titel bekommt Klasse fw38-card-link */
.fw38-card { position: relative; }
.fw38-card .fw38-card-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* 10. Pinselstriche -------------------------------------------------------
 * fw38-brush-under  : Heading mit Pinselstrich unter dem Text
 * fw38-brush-mark   : weißer Text auf schwarzem Pinselstrich (Highlight)
 * fw38-brush-reveal : Bild-Widget (Pinselstrich), wird beim Eintritt "gemalt"
 * ----------------------------------------------------------------------- */
.fw38-brush-under .elementor-heading-title {
	display: inline;
	padding-bottom: 0.18em;
	background: url("../img/brush-underline.webp") no-repeat left bottom / 100% 0.22em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.fw38-brush-mark .elementor-heading-title,
span.fw38-brush-mark {
	display: inline;
	color: var(--fw38-white);
	padding: 0.08em 0.35em 0.12em;
	background: url("../img/brush-short.webp") no-repeat center / 100% 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* 11. Reveal-Animationen (nur mit JS, nur ohne reduzierte Bewegung) ------ */
@media (prefers-reduced-motion: no-preference) {
	.fw38-js .fw38-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition:
			opacity 600ms var(--fw38-ease-out),
			transform 600ms var(--fw38-ease-emph);
		transition-delay: calc(var(--fw38-i, 0) * 100ms);
	}
	.fw38-js .fw38-reveal.is-inview {
		opacity: 1;
		transform: none;
	}

	.fw38-js .fw38-brush-reveal img {
		clip-path: inset(0 100% 0 0);
		transition: clip-path 900ms var(--fw38-ease-emph) 150ms;
	}
	.fw38-js .fw38-brush-reveal.is-inview img {
		clip-path: inset(0 0 0 0);
	}
	/* Unterstreichung: nur der Pinselstrich wird gemalt, der Text bleibt stehen */
	.fw38-js .fw38-brush-reveal.fw38-brush-under .elementor-heading-title {
		background-size: 0% 0.22em;
		transition: background-size 900ms var(--fw38-ease-emph) 200ms;
	}
	.fw38-js .fw38-brush-reveal.is-inview.fw38-brush-under .elementor-heading-title {
		background-size: 100% 0.22em;
	}

	/* Hero-Bild: ganz leichter Zoom beim Laden (Klasse fw38-hero-zoom am Bild-Widget) */
	.fw38-hero-zoom img {
		animation: fw38-hero-zoom 1600ms var(--fw38-ease-out) both;
	}
	@keyframes fw38-hero-zoom {
		from { transform: scale(1.05); }
		to   { transform: scale(1); }
	}
}
.fw38-hero-zoom { overflow: hidden; }

/* Reduzierte Bewegung: alles sofort sichtbar, nur Farb-/Opazitätswechsel */
@media (prefers-reduced-motion: reduce) {
	.fw38-card,
	.fw38-card:hover { transform: none; }
	.elementor-button:hover .elementor-button-icon,
	.fw38-arrow-list .elementor-icon-list-item > a:hover .elementor-icon-list-icon { transform: none; }
}

/* Im Elementor-Editor nichts verstecken */
.elementor-editor-active .fw38-reveal,
.elementor-editor-active .fw38-brush-reveal img,
.elementor-editor-active .fw38-brush-reveal .elementor-heading-title {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}

/* 12. Dunkle Sektion (Klasse fw38-dark am Container) --------------------- */
.fw38-dark ::selection {
	background: var(--fw38-white);
	color: var(--fw38-black);
}

/* 13. Mobile: Pinselstriche zurücknehmen --------------------------------- */
@media (max-width: 767px) {
	.fw38-hide-brush-mobile { display: none !important; }
	.fw38-brush-under .elementor-heading-title {
		background-size: 100% 0.18em;
	}
}

/* 14. Navigation (UAE Navigation Menu) ------------------------------------ */
@media (min-width: 1025px) {
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.hfe-nav-menu > ul.hfe-nav-menu {
		flex-wrap: nowrap;
	}
	.hfe-nav-menu .menu-item > a { white-space: nowrap; }
	.hfe-nav-menu > li.menu-item:last-child { margin-left: 16px; }
}
/* CTA im Menü: gleicher Hover wie alle Buttons */
.hfe-nav-menu .menu-item:last-child .elementor-button {
	border: 1px solid var(--fw38-black);
}
.hfe-nav-menu .menu-item:last-child .elementor-button:hover,
.hfe-nav-menu .menu-item:last-child .elementor-button:focus-visible {
	background-color: var(--fw38-white) !important;
	color: var(--fw38-black) !important;
}

/* 15. Mobiles Menü -------------------------------------------------------- */
html, body { overflow-x: clip; } /* clip statt hidden: bricht position:sticky nicht */
@media (max-width: 1024px) {
	nav.hfe-dropdown {
		background: var(--fw38-white);
		border-top: 1px solid var(--fw38-line);
		border-bottom: 1px solid var(--fw38-line);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
	}
	nav.hfe-dropdown .menu-item > a.hfe-menu-item,
	nav.hfe-dropdown .menu-item > a {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	nav.hfe-dropdown > ul > li.menu-item:last-child { padding: 16px 20px 24px; }
	nav.hfe-dropdown > ul > li.menu-item:last-child .elementor-button { width: 100%; justify-content: center; }
}
@media (max-width: 1024px) {
	nav.hfe-dropdown > ul > li.menu-item:last-child > a {
		background: var(--fw38-black) !important;
		color: var(--fw38-white) !important;
		justify-content: center;
		padding-block: 14px !important;
	}
}

/* 16. Hero in voller Breite ----------------------------------------------- *
 * Container: fw38-hero-full · Bild-Widget: fw38-cover · Inhalt: fw38-hero-content */
.fw38-hero-full {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.fw38-hero-full > .fw38-cover {
	position: absolute !important;
	inset: 0;
	z-index: -2;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
}
.fw38-hero-full > .fw38-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
}
/* Weiß von links, damit die Headline auf jedem Bildausschnitt lesbar bleibt */
.fw38-hero-full::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(255,255,255,0.96) 0%,
		rgba(255,255,255,0.88) 30%,
		rgba(255,255,255,0.35) 52%,
		rgba(255,255,255,0) 68%);
}
.fw38-hero-full > .fw38-hero-brush {
	position: absolute !important;
	z-index: 1;
}
@media (max-width: 767px) {
	.fw38-hero-full::after {
		background: linear-gradient(180deg,
			rgba(255,255,255,0.97) 0%,
			rgba(255,255,255,0.9) 45%,
			rgba(255,255,255,0.2) 72%,
			rgba(255,255,255,0) 100%);
	}
	.fw38-hero-full > .fw38-cover img { object-position: 78% 50%; }
}
/* Mobil: Bild nur im unteren Teil, damit die Person unter den Buttons sichtbar bleibt */
@media (max-width: 767px) {
	.fw38-hero-full > .fw38-cover { top: auto; height: 62%; }
	.fw38-hero-full > .fw38-cover img { object-position: 80% 40%; }
	.fw38-hero-full::after {
		background: linear-gradient(180deg,
			rgba(255,255,255,1) 0%,
			rgba(255,255,255,1) 40%,
			rgba(255,255,255,0.55) 52%,
			rgba(255,255,255,0) 64%);
	}
}

/* 17. Leistungszeilen (Container als Link, Klasse fw38-row) --------------- */
.fw38-row {
	position: relative;
	color: inherit;
	text-decoration: none;
	transition: background-color 200ms var(--fw38-ease-out);
}
.fw38-row::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: var(--fw38-black);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms var(--fw38-ease-out);
}
.fw38-row:hover::after,
.fw38-row:focus-visible::after { transform: scaleX(1); }
.fw38-row .fw38-row-arrow .elementor-icon,
.fw38-row .fw38-row-arrow svg {
	transition: transform 220ms var(--fw38-ease-out) 40ms;
}
.fw38-row:hover .fw38-row-arrow .elementor-icon,
.fw38-row:hover .fw38-row-arrow svg,
.fw38-row:focus-visible .fw38-row-arrow .elementor-icon { transform: translateX(8px); }
.fw38-row .fw38-row-title .elementor-heading-title {
	transition: transform 300ms var(--fw38-ease-out);
}
@media (hover: hover) {
	.fw38-row:hover .fw38-row-title .elementor-heading-title { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.fw38-row .fw38-row-title .elementor-heading-title,
	.fw38-row:hover .fw38-row-arrow .elementor-icon { transform: none !important; }
}

/* 18. Highlight im Fließtext einer Headline: <span class="fw38-mark"> ----- */
.fw38-mark {
	color: var(--fw38-white);
	padding: 0 0.42em 0.2em 0.3em;
	margin: 0 0.02em;
	background: url("../img/brush-wide.webp") no-repeat left 62% / 100% 118%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
	.fw38-js .fw38-brush-reveal .fw38-mark {
		background-size: 0% 118%;
		background-position: left 62%;
		color: var(--fw38-black);
		transition: background-size 800ms var(--fw38-ease-emph) 250ms, color 250ms var(--fw38-ease-out) 650ms;
	}
	.fw38-js .fw38-brush-reveal.is-inview .fw38-mark {
		background-size: 100% 118%;
		color: var(--fw38-white);
	}
}

/* 19. Fluent Forms im Finanzwerk38-Stil ---------------------------------- */
.fw38-form .fluentform .ff-el-group { margin-bottom: 22px; }
.fw38-form .fluentform .ff-el-input--label label,
.fw38-form .fluentform .ff-el-form-check-label {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--fw38-black);
	letter-spacing: 0.01em;
}
.fw38-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--fw38-black); }
.fw38-form .fluentform .ff-el-form-control {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 16px; /* verhindert Zoom auf iOS */
	color: var(--fw38-black);
	background: var(--fw38-white);
	border: 1px solid #c9c9c5;
	border-radius: 0;
	padding: 13px 14px;
	min-height: 50px;
	box-shadow: none;
	transition: border-color 150ms var(--fw38-ease-out), box-shadow 150ms var(--fw38-ease-out);
}
.fw38-form .fluentform textarea.ff-el-form-control { min-height: 140px; }
.fw38-form .fluentform .ff-el-form-control::placeholder { color: #8a8a86; }
.fw38-form .fluentform .ff-el-form-control:hover { border-color: var(--fw38-mid); }
.fw38-form .fluentform .ff-el-form-control:focus {
	border-color: var(--fw38-black);
	box-shadow: inset 0 0 0 1px var(--fw38-black);
	outline: none;
}
.fw38-form .fluentform .ff-el-form-control:focus-visible { outline: none; }
.fw38-form .fluentform input[type="radio"],
.fw38-form .fluentform input[type="checkbox"] { accent-color: var(--fw38-black); width: 18px; height: 18px; }
.fw38-form .fluentform .ff_list_inline .ff-el-form-check { margin-right: 24px; }
.fw38-form .fluentform .ff_tc_checkbox, .fw38-form .fluentform .ff_t_c { font-size: 14px; line-height: 1.5; color: var(--fw38-dark); }
.fw38-form .fluentform .ff_t_c a { color: var(--fw38-black); text-decoration: underline; text-underline-offset: 2px; }
.fw38-form .fluentform .error.text-danger { font-size: 13px; color: #a11a1a; margin-top: 6px; }
.fw38-form .fluentform .ff-el-is-error .ff-el-form-control { border-color: #a11a1a; }
.fw38-form .fluentform .ff-btn-submit {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 16px !important;
	font-weight: 500;
	background: var(--fw38-black) !important;
	color: var(--fw38-white) !important;
	border: 1px solid var(--fw38-black) !important;
	border-radius: 0 !important;
	padding: 16px 32px !important;
	transition: background-color 150ms var(--fw38-ease-out), color 150ms var(--fw38-ease-out);
}
.fw38-form .fluentform .ff-btn-submit:hover,
.fw38-form .fluentform .ff-btn-submit:focus-visible {
	background: var(--fw38-white) !important;
	color: var(--fw38-black) !important;
	opacity: 1;
}
.fw38-form .ff-message-success {
	border: 1px solid var(--fw38-black);
	box-shadow: none;
	padding: 24px;
	font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.fw38-form .ff-t-container { gap: 16px; }
@media (max-width: 767px) {
	.fw38-form .ff-t-container { flex-direction: column; gap: 0; }
	.fw38-form .fluentform .ff-btn-submit { width: 100%; }
}

/* CTA im Menü bleibt auch auf der aktiven Seite lesbar */
.hfe-nav-menu .menu-item:last-child.current-menu-item > a.elementor-button,
.hfe-nav-menu .menu-item:last-child > a.elementor-button { color: var(--fw38-white) !important; }
.hfe-nav-menu .menu-item:last-child > a.elementor-button:hover,
.hfe-nav-menu .menu-item:last-child > a.elementor-button:focus-visible { color: var(--fw38-black) !important; }

/* 20. Rechtstexte (Klasse fw38-legal am Text-Widget) ---------------------- */
.fw38-legal h2 {
	font-family: "Newsreader", Georgia, serif;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--fw38-black);
	margin: 2.2em 0 0.6em;
}
.fw38-legal h2:first-child { margin-top: 0; }
.fw38-legal a { color: var(--fw38-black); text-decoration: underline; text-underline-offset: 2px; }

/* Unterseiten-Hero: kräftigerer Weißverlauf, weil die Bereichsbilder links dunkler sind */
@media (min-width: 768px) {
	.fw38-hero-full.fw38-hero-strong::after {
		background: linear-gradient(90deg,
			rgba(255,255,255,0.97) 0%,
			rgba(255,255,255,0.93) 38%,
			rgba(255,255,255,0.6) 54%,
			rgba(255,255,255,0) 74%);
	}
}

/* 21. Header Tablet/Mobil: Navigations-Widget nur so breit wie der Burger */
@media (max-width: 1024px) {
	.ehf-header #masthead .elementor-widget-navigation-menu {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0;
		margin-left: auto;
	}
	.ehf-header #masthead .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal:not(.menu-is-active) { display: none; }
	.ehf-header #masthead .hfe-nav-menu__toggle { margin-right: 0; }
}

/* 22. Icons (Klasse fw38-ico am Icon-Widget) ------------------------------ */
.fw38-ico .elementor-icon { line-height: 1; }
.fw38-ico svg { transition: transform 300ms var(--fw38-ease-emph); }
.fw38-card:hover .fw38-ico svg,
.fw38-card:focus-within .fw38-ico svg { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
	.fw38-card:hover .fw38-ico svg { transform: none; }
}

/* 23. Mobil: Buttons in voller Breite, leicht zu treffen ----------------- */
@media (max-width: 767px) {
	.elementor-widget-button { flex: 1 1 auto; width: 100%; }
	.elementor-widget-button .elementor-button { width: 100%; justify-content: center; }
	.elementor-widget-button .elementor-button-content-wrapper { justify-content: center; }
}

/* 24. Kleine Laptops (1025 bis 1199 px): Navigation kompakter, Karriere nur im Footer */
@media (min-width: 1025px) and (max-width: 1199px) {
	.hfe-nav-menu .menu-item > a.hfe-menu-item { font-size: 14px !important; padding-left: 7px !important; padding-right: 7px !important; }
	.hfe-nav-menu > li.menu-item:last-child { margin-left: 10px; }
	.hfe-nav-menu .menu-item:last-child .elementor-button { padding: 11px 16px !important; font-size: 14px !important; }
	.hfe-nav-menu > li.menu-item:nth-last-child(2) { display: none; }
}

/* 25. FAQ (Nested Accordion, Klasse fw38-faq am Widget) ----------------- *
 * Trennlinien pro Frage (statt nur unter dem Titel), aktive Frage schwarz. */
.fw38-faq .e-n-accordion-item {
	border-bottom: 1px solid #c9c9c5;
	transition: border-color 150ms var(--fw38-ease-out);
}
.fw38-faq .e-n-accordion-item:first-child {
	border-top: 1px solid #c9c9c5;
}
.fw38-faq .e-n-accordion-item:hover,
.fw38-faq .e-n-accordion-item[open] {
	border-bottom-color: var(--fw38-black);
}
.fw38-faq .e-n-accordion-item-title { cursor: pointer; }
.fw38-faq .e-n-accordion-item-title-icon { transition: transform 200ms var(--fw38-ease-out); }
.fw38-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.fw38-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon { transform: none; }
}

/* 26. "Mehr erfahren" in Cards (Button-Widget, Klasse fw38-card-more) ---- */
.fw38-card-more .elementor-button {
	border: 0 !important;
	width: auto !important;
	padding: 14px 0 !important;
	background: none !important;
	color: var(--fw38-black) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
.fw38-card:hover .fw38-card-more .elementor-button-icon { transform: translateX(4px); }

/* 27. Untermenü (Desktop) ------------------------------------------------ */
@media (min-width: 1025px) {
	.hfe-nav-menu .sub-menu {
		min-width: 250px !important;
		padding: 8px 0 !important;
		border: 1px solid var(--fw38-line) !important;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important;
		background: var(--fw38-white) !important;
	}
	.hfe-nav-menu .sub-menu .menu-item a.hfe-sub-menu-item {
		padding: 12px 22px !important;
		white-space: nowrap;
		border: 0 !important;
		transition: background-color 150ms var(--fw38-ease-out);
	}
	.hfe-nav-menu .sub-menu .menu-item a.hfe-sub-menu-item:hover,
	.hfe-nav-menu .sub-menu .menu-item.current-menu-item a.hfe-sub-menu-item {
		background: var(--fw38-light) !important;
		color: var(--fw38-black) !important;
	}
}
.fw38-card .fw38-card-more { margin-top: auto !important; }
.fw38-card-link a,
.fw38-card-link a:hover { text-decoration: none; color: inherit; }

/* 28. Icon-Listen: Icon sitzt bei mehrzeiligen Punkten auf Höhe der ersten Zeile */
.elementor-widget-icon-list:not(.fw38-arrow-list) .elementor-icon-list-item,
.elementor-widget-icon-list:not(.fw38-arrow-list) .elementor-icon-list-item > a {
	align-items: flex-start !important;
}
.elementor-widget-icon-list:not(.fw38-arrow-list) .elementor-icon-list-icon {
	align-self: flex-start;
	display: flex;
	align-items: center;
	min-height: 1.5em;
}

/* ==========================================================================
   29. Seiten-Highlights
   ========================================================================== */

/* 29a. Statement (großes Zitat, Klasse fw38-statement am Heading) */
.fw38-statement .elementor-heading-title {
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.01em;
}
.fw38-dark .fw38-statement em { font-style: italic; color: #bdbdbd; }

/* 29b. Bildkacheln (Container fw38-tile, Bild-Widget fw38-tile-img, Heading fw38-tile-link) */
.fw38-tile {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--fw38-black);
}
.fw38-tile > .fw38-tile-img {
	position: absolute !important;
	inset: 0;
	z-index: -2;
	margin: 0 !important;
	width: 100% !important;
}
.fw38-tile > .fw38-tile-img .elementor-widget-container,
.fw38-tile > .fw38-tile-img img {
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	transition: transform 900ms var(--fw38-ease-out);
}
.fw38-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
}
.fw38-tile:hover > .fw38-tile-img img,
.fw38-tile:focus-within > .fw38-tile-img img { transform: scale(1.045); }
.fw38-tile .fw38-tile-link a::after { content: ""; position: absolute; inset: 0; }
.fw38-tile .fw38-tile-link a { color: inherit; text-decoration: none; }
.fw38-tile .fw38-card-arrow i,
.fw38-tile .fw38-card-arrow svg { transition: transform 200ms var(--fw38-ease-out) 30ms; }
.fw38-tile:hover .fw38-card-arrow i,
.fw38-tile:hover .fw38-card-arrow svg { transform: translateX(8px); }

/* 29c. Zeitstrahl (Grid fw38-timeline, Einträge fw38-tl-item) */
.fw38-timeline { position: relative; }
.fw38-timeline::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 9px;
	height: 14px;
	background: url("../img/brush-underline.webp") no-repeat left center / 100% 100%;
	opacity: 0.9;
}
.fw38-dark .fw38-timeline::before { filter: invert(1); opacity: 0.75; }
.fw38-tl-item { position: relative; padding-top: 48px !important; }
.fw38-tl-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fw38-white);
	border: 2px solid var(--fw38-black);
	box-sizing: border-box;
}
.fw38-dark .fw38-tl-item::before { background: var(--fw38-black); border-color: var(--fw38-white); }
@media (prefers-reduced-motion: no-preference) {
	.fw38-js .fw38-timeline.fw38-reveal::before {
		clip-path: inset(0 100% 0 0);
		transition: clip-path 1400ms var(--fw38-ease-emph) 200ms;
	}
	.fw38-js .fw38-timeline.fw38-reveal.is-inview::before { clip-path: inset(0 0 0 0); }
	.fw38-js .fw38-timeline.fw38-reveal { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
	.fw38-timeline::before {
		top: 0;
		bottom: 0;
		left: 4px;
		right: auto;
		width: 14px;
		height: auto;
		background: linear-gradient(var(--fw38-black), var(--fw38-black)) no-repeat 6px 0 / 2px 100%;
	}
	.fw38-dark .fw38-timeline::before { filter: none; background-image: linear-gradient(#fff, #fff); }
	.fw38-tl-item { padding-top: 0 !important; padding-left: 44px !important; }
	.fw38-tl-item::before { top: 2px; }
}

/* 29d. Geteilte Fläche Bild + Text (Container fw38-split, Bild-Widget fw38-split-img) */
.fw38-split-img,
.fw38-split-img .elementor-widget-container { height: 100%; }
.fw38-split-img img {
	width: 100%;
	height: 100% !important;
	min-height: 420px;
	object-fit: cover;
	display: block;
}

/* 29e. Laufband (Container fw38-marquee, Heading fw38-marquee-text) */
.fw38-marquee { overflow: hidden; }
.fw38-marquee-text .elementor-heading-title {
	display: inline-block;
	white-space: nowrap;
	will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
	.fw38-marquee-text .elementor-heading-title { animation: fw38-marquee 42s linear infinite; }
	.fw38-marquee:hover .fw38-marquee-text .elementor-heading-title { animation-play-state: paused; }
}
@keyframes fw38-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 29f. "oder" zwischen Vergleichskarten (Heading fw38-vs) */
.fw38-vs { align-self: center; justify-self: center; }
.fw38-vs.fw38-brush-mark .elementor-heading-title {
	white-space: nowrap;
	display: inline-block;
	padding: 0.3em 0.75em 0.42em;
	background: url("../img/brush-wide.webp") no-repeat center / 100% 100%;
}

/* 29g. Große Zahlen auf Schwarz (Heading fw38-bignum) */
.fw38-bignum .elementor-heading-title {
	font-size: clamp(4.5rem, 3rem + 6vw, 9rem) !important;
	line-height: 0.9 !important;
	font-variant-numeric: lining-nums;
}
.fw38-split-img img { object-position: 50% 85%; }
.fw38-tl-item > .elementor-widget-heading:first-child .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* 30. Hauptmenü: Pinselstrich statt Linie beim Hovern (Desktop) ---------- */
@media (min-width: 1025px) {
	.hfe-pointer__underline ul.hfe-nav-menu > li.menu-item:not(:last-child)  a.hfe-menu-item::after {
		content: "" !important;
		left: 0 !important;
		right: auto !important;
		bottom: -4px !important;
		width: 100% !important;
		height: 11px !important;
		opacity: 1 !important;
		transform: none !important;
		background: url("../img/brush-underline.webp") no-repeat left center / 100% 100% !important;
		clip-path: inset(0 100% 0 0);
		transition: clip-path 450ms var(--fw38-ease-emph) !important;
	}
	.hfe-pointer__underline ul.hfe-nav-menu > li.menu-item:not(:last-child)  a.hfe-menu-item:hover::after,
	.hfe-pointer__underline ul.hfe-nav-menu > li.menu-item:not(:last-child)  a.hfe-menu-item:focus-visible::after,
	.hfe-pointer__underline ul.hfe-nav-menu > li.menu-item:not(:last-child):hover  a.hfe-menu-item::after,
	.hfe-pointer__underline ul.hfe-nav-menu > li.current-menu-item:not(:last-child)  a.hfe-menu-item::after,
	.hfe-pointer__underline ul.hfe-nav-menu > li.current-menu-ancestor:not(:last-child)  a.hfe-menu-item::after,
	.hfe-pointer__underline ul.hfe-nav-menu > li.current-menu-parent:not(:last-child)  a.hfe-menu-item::after {
		clip-path: inset(0 0 0 0);
	}
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	.hfe-pointer__underline ul.hfe-nav-menu > li.menu-item  a.hfe-menu-item::after { transition: none !important; }
}

/* 31. Google-Bewertungen (Container fw38-review) */
.fw38-review .fw38-review-name span { font-weight: 400; color: var(--fw38-mid); }
.fw38-review .elementor-widget-text-editor { flex-grow: 1; }
.fw38-review .elementor-widget-text-editor p { margin: 0; }

/* 32. Mobiles Menü: Dropdown immer über die volle Header-Breite, Untermenüs eingerückt */
@media (max-width: 1024px) {
	.ehf-header #masthead .elementor-widget-navigation-menu,
	.ehf-header #masthead .elementor-widget-navigation-menu > .elementor-widget-container,
	.ehf-header #masthead .hfe-nav-menu { position: static !important; }
	.ehf-header #masthead nav.hfe-dropdown {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		top: 100% !important;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}
	nav.hfe-dropdown .sub-menu a.hfe-sub-menu-item {
		padding-left: 40px !important;
		background: var(--fw38-light) !important;
		color: var(--fw38-black) !important;
	}
}