/* 
Theme Name: hello-elementor-child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: hello-elementor-child is a child theme of Hello Elementor, created by the Elementor team and modified by wundkompass.
Author: wundkompass
Template: hello-elementor
Version: 2.0.0
Text Domain: wundkompass
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

.elementor-icon-wrapper {
  line-height: 0;
}

/* Unterstreicht Links ausschließlich innerhalb von Elementor-Texteditor-/WYSIWYG-Widgets */
.elementor-widget-text-editor a {
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus,
.elementor-widget-text-editor a:active {
  text-decoration: underline !important;
}



/* =========================================================
   ELEMENTOR – EINFARBIGE CUSTOM-SVG-ICONS
   Farbe über Elementors „Primäre Farbe“ steuerbar
   ========================================================= */

/* Gefüllte SVG-Elemente */
.elementor-widget-icon
.elementor-icon
svg
[fill]:not([fill="none"]) {
  fill: currentColor;
}

/* SVG-Elemente mit Kontur */
.elementor-widget-icon
.elementor-icon
svg
[stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

/* Listing Grid Slider: visible overflow for neighboring slides */
.slider-visible .swiper,
.slider-visible .swiper-container,
.slider-visible .swiper-viewport,
.slider-visible .swiper-wrapper {
  overflow: visible !important;
}

.jet-tabs-icon svg path {
	fill: currentColor;
}

.aspect-1-1 img {
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.aspect-16-9 img {
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.full-height.elementor-widget-image {
  height: auto;
}

.full-img-height .elementor-widget.elementor-widget-image {
  height: 100%;
}

/* Elementor Texteditor – letzten Absatz unten bündig machen */
.elementor-widget-text-editor .elementor-widget-container > *:last-child{
  margin-bottom: 0 !important;
}

/* Sicherheit: falls nur p verwendet wird */
.elementor-widget-text-editor .elementor-widget-container p:last-child{
  margin-bottom: 0 !important;
}

/* typography
----------------------------------------*/
:root{
  --font-primary: "Maven Pro", sans-serif;
}

/* wrapper
----------------------------------------*/

:root{
  --space-wrapper: clamp(1.5rem, 0.3rem + 6vw, 7.5rem);
}

.wrapper{
  padding-inline: var(--space-wrapper);
}

:root {
	/* ========================================
	   COLORS – BRAND
	   ======================================== */

	--color-light-green: #78B437;
	--color-grey: #5A646E;
	--color-grey-2: #F2FCFB;
	--color-green-2: #E9F3DF;

	/* ========================================
	   COLORS – GREYSCALES / NEUTRALS
	   ======================================== */

	--color-white: #FFFFFF;
	--color-black: #000000;

	/* ========================================
	   COLORS – INTERACTION ONLY
	   ======================================== */

	--color-error: #E90C0C;
	--color-success: #45E781;

	/* ========================================
	   TYPOGRAPHY – FLUID FONT SIZES
	   320px → 1920px
	   ======================================== */

	/* 40px → 96px */
	--text-96: clamp(2.5rem, 1.8rem + 3.5vw, 6rem);

	/* 40px → 72px */
	--text-72: clamp(2.5rem, 2.1rem + 2vw, 4.5rem);

	/* 36px → 64px */
	--text-64: clamp(2.25rem, 1.9rem + 1.75vw, 4rem);

	/* 24px → 48px */
	--text-48: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);

	/* 22px → 32px */
	--text-32: clamp(1.375rem, 1.25rem + 0.625vw, 2rem);

	/* 20px → 24px */
	--text-24: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);

	/* 18px → 20px */
	--text-20: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);

	/* 16px → 18px */
	--text-18: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);

	/* 14px → 16px */
	--text-16: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);

	/* 12px → 14px */
	--text-14: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);

	/* ========================================
	   SPACING
	   320px → 1920px
	   ======================================== */

	/* 4px → 8px */
	--spacing-8: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);

	/* 8px → 16px */
	--spacing-16: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);

	/* 16px → 24px */
	--spacing-24: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);

	/* 24px → 32px */
	--spacing-32: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);

	/* 28px → 48px */
	--spacing-48: clamp(1.75rem, 1.5rem + 1.25vw, 3rem);

	/* 32px → 64px */
	--spacing-64: clamp(2rem, 1.6rem + 2vw, 4rem);

	/* 40px → 80px */
	--spacing-80: clamp(2.5rem, 2rem + 2.5vw, 5rem);

	/* 44px → 96px */
	--spacing-96: clamp(2.75rem, 2.1rem + 3.25vw, 6rem);

	/* 48px → 128px */
	--spacing-128: clamp(3rem, 2rem + 5vw, 8rem);

	/* 52px → 144px */
	--spacing-144: clamp(3.25rem, 2.1rem + 5.75vw, 9rem);

	/* 56px → 160px */
	--spacing-160: clamp(3.5rem, 2.2rem + 6.5vw, 10rem);

	/* 64px → 192px */
	--spacing-192: clamp(4rem, 2.4rem + 8vw, 12rem);

	/* 80px → 240px */
	--spacing-240: clamp(5rem, 3rem + 10vw, 15rem);

	/* 96px → 272px */
	--spacing-272: clamp(6rem, 3.8rem + 11vw, 17rem);
}



/* =========================================================
   BUTTON SYSTEM

   Elementor CSS-Klassen:
   btn-primary
   btn-secondary
   btn-cta
   ========================================================= */

:root {
	--button-green: #78B437;
	--button-green-dark: #5E9628;
	--button-cta-text: #417A25;
	--button-cta-background: #EFF4EB;
	--button-cta-background-hover: #E5EFDD;
	--button-grey: #5A646E;
	--button-white: #FFFFFF;
}


/* =========================================================
   GEMEINSAME EINSTELLUNGEN
   ========================================================= */

.btn-primary .elementor-button,
.btn-secondary .elementor-button,
.btn-cta .elementor-button,
a.btn-primary.elementor-button,
a.btn-secondary.elementor-button,
a.btn-cta.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	border-radius: 999px;
	font-family: var(--font-primary, "Maven Pro", sans-serif);
	font-size: var(--text-16, 1rem);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		color 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease;
}

.btn-primary .elementor-button-content-wrapper,
.btn-secondary .elementor-button-content-wrapper,
.btn-cta .elementor-button-content-wrapper,
a.btn-primary.elementor-button .elementor-button-content-wrapper,
a.btn-secondary.elementor-button .elementor-button-content-wrapper,
a.btn-cta.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.btn-primary .elementor-button-icon,
.btn-secondary .elementor-button-icon,
.btn-cta .elementor-button-icon,
a.btn-primary.elementor-button .elementor-button-icon,
a.btn-secondary.elementor-button .elementor-button-icon,
a.btn-cta.elementor-button .elementor-button-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	color: inherit;
}

.btn-primary .elementor-button-icon svg,
.btn-secondary .elementor-button-icon svg,
.btn-cta .elementor-button-icon svg,
a.btn-primary.elementor-button .elementor-button-icon svg,
a.btn-secondary.elementor-button .elementor-button-icon svg,
a.btn-cta.elementor-button .elementor-button-icon svg {
	display: block;
	flex: 0 0 auto;
	fill: currentColor !important;
	color: inherit;
}

.btn-primary .elementor-button-icon svg path,
.btn-secondary .elementor-button-icon svg path,
.btn-cta .elementor-button-icon svg path,
a.btn-primary.elementor-button .elementor-button-icon svg path,
a.btn-secondary.elementor-button .elementor-button-icon svg path,
a.btn-cta.elementor-button .elementor-button-icon svg path {
	fill: currentColor !important;
}


/* =========================================================
   PRIMARY BUTTON
   Icon: btn-arrow.svg / Position: Nachher
   ========================================================= */

.btn-primary .elementor-button,
a.btn-primary.elementor-button {
	min-height: 52px;
	padding: 14px 24px;
	border: 2px solid var(--button-green) !important;
	background-color: var(--button-green) !important;
	color: var(--button-white) !important;
}

.btn-primary .elementor-button-icon svg,
a.btn-primary.elementor-button .elementor-button-icon svg {
	width: 12px;
	height: 10px;
	transition: transform 200ms ease;
}

.btn-primary .elementor-button:hover,
.btn-primary .elementor-button:focus-visible,
a.btn-primary.elementor-button:hover,
a.btn-primary.elementor-button:focus-visible {
	border-color: var(--button-green-dark) !important;
	background-color: var(--button-green-dark) !important;
	color: var(--button-white) !important;
	box-shadow: 0 6px 18px rgba(120, 180, 55, 0.22);
	transform: translateY(-2px);
}

.btn-primary .elementor-button:hover .elementor-button-icon svg,
.btn-primary .elementor-button:focus-visible .elementor-button-icon svg,
a.btn-primary.elementor-button:hover .elementor-button-icon svg,
a.btn-primary.elementor-button:focus-visible .elementor-button-icon svg {
	transform: translateX(4px);
}


/* =========================================================
   SECONDARY BUTTON
   Icon: btn-arrow.svg / Position: Nachher
   ========================================================= */

.btn-secondary .elementor-button,
a.btn-secondary.elementor-button {
	min-height: 52px;
	padding: 14px 24px;
	border: 2px solid var(--button-green) !important;
	background-color: transparent !important;
	color: var(--button-grey) !important;
}

.btn-secondary .elementor-button-icon svg,
a.btn-secondary.elementor-button .elementor-button-icon svg {
	width: 12px;
	height: 10px;
	transition: transform 200ms ease;
}

.btn-secondary .elementor-button:hover,
.btn-secondary .elementor-button:focus-visible,
a.btn-secondary.elementor-button:hover,
a.btn-secondary.elementor-button:focus-visible {
	border-color: var(--button-green) !important;
	background-color: var(--button-green) !important;
	color: var(--button-white) !important;
	box-shadow: 0 6px 18px rgba(120, 180, 55, 0.18);
	transform: translateY(-2px);
}

.btn-secondary .elementor-button:hover .elementor-button-icon svg,
.btn-secondary .elementor-button:focus-visible .elementor-button-icon svg,
a.btn-secondary.elementor-button:hover .elementor-button-icon svg,
a.btn-secondary.elementor-button:focus-visible .elementor-button-icon svg {
	transform: translateX(4px);
}


/* =========================================================
   CTA BUTTON
   Icon: phone-icon.svg / Position: Vorher
   ========================================================= */

.btn-cta .elementor-button,
a.btn-cta.elementor-button {
	min-height: 48px;
	padding: 12px 22px;
	border: 2px solid transparent !important;
	background-color: var(--button-cta-background) !important;
	color: var(--button-cta-text) !important;
	font-weight: 600;
}

.btn-cta .elementor-button-content-wrapper,
a.btn-cta.elementor-button .elementor-button-content-wrapper {
	gap: 12px;
}

.btn-cta .elementor-button-icon svg,
a.btn-cta.elementor-button .elementor-button-icon svg {
	width: 17px;
	height: 17px;
	transition: transform 200ms ease;
}

.btn-cta .elementor-button:hover,
.btn-cta .elementor-button:focus-visible,
a.btn-cta.elementor-button:hover,
a.btn-cta.elementor-button:focus-visible {
	border-color: rgba(120, 180, 55, 0.2) !important;
	background-color: var(--button-cta-background-hover) !important;
	color: var(--button-cta-text) !important;
	box-shadow: 0 6px 18px rgba(65, 122, 37, 0.12);
	transform: translateY(-2px);
}

.btn-cta .elementor-button:hover .elementor-button-icon svg,
.btn-cta .elementor-button:focus-visible .elementor-button-icon svg,
a.btn-cta.elementor-button:hover .elementor-button-icon svg,
a.btn-cta.elementor-button:focus-visible .elementor-button-icon svg {
	transform: rotate(-8deg);
}


/* =========================================================
   TASTATUR-FOKUS
   ========================================================= */

.btn-primary .elementor-button:focus-visible,
.btn-secondary .elementor-button:focus-visible,
.btn-cta .elementor-button:focus-visible,
a.btn-primary.elementor-button:focus-visible,
a.btn-secondary.elementor-button:focus-visible,
a.btn-cta.elementor-button:focus-visible {
	outline: 3px solid rgba(120, 180, 55, 0.3);
	outline-offset: 3px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.btn-primary .elementor-button,
	.btn-secondary .elementor-button,
	a.btn-primary.elementor-button,
	a.btn-secondary.elementor-button {
		min-height: 48px;
		padding: 12px 20px;
	}

	.btn-cta .elementor-button,
	a.btn-cta.elementor-button {
		min-height: 44px;
		padding: 10px 18px;
	}
}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.btn-primary .elementor-button,
	.btn-secondary .elementor-button,
	.btn-cta .elementor-button,
	.btn-primary .elementor-button-icon svg,
	.btn-secondary .elementor-button-icon svg,
	.btn-cta .elementor-button-icon svg,
	a.btn-primary.elementor-button,
	a.btn-secondary.elementor-button,
	a.btn-cta.elementor-button,
	a.btn-primary.elementor-button .elementor-button-icon svg,
	a.btn-secondary.elementor-button .elementor-button-icon svg,
	a.btn-cta.elementor-button .elementor-button-icon svg {
		transition: none;
	}
}