/*
Theme Name: Hello Elementor Child 02
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1764590174
Updated: 2025-12-01 11:56:14

*/

html {
	@media (max-width: 991px) {
		font-size: 14px;
	}
	@media (max-width: 767px) {
		font-size: 13px;
	}
}


:root {
	--contrast-dark: #783939;
	--contrast: #9a5252;
	--contrast-light: #e9d1d2;
	--contrast-lighter: #f6f1f1;
	--dark: #272727;
	--lightest: #fff;

	--color-menuitem: var(--dark);
	--color-headline: var(--dark);
}

h1 {
	font-size: 3rem !important;
	font-weight: 700 !important;
	color: var(--color-headline) !important;
	line-height: 1.3em !important;
	@media (max-width: 1199px) {
		font-size: 2.5rem !important;
	}

}
h2 {
	font-size: 2rem !important;
	color: var(--color-headline) !important;
	font-weight: 700 !important;
	line-height: 1.4em !important;
	@media (max-width: 1199px) {
		font-size: 1.8rem !important;
	}
}
h3 {
	font-size: 1.25rem !important;
	line-height: 1.4em !important;
	font-weight: 600 !important;
	color: var(--color-headline) !important;
}
h4 {
	font-size: 1.125rem !important;
	line-height: 1.4em !important;
	font-weight: 600 !important;
	color: var(--color-headline) !important;
}

p {
	&:last-child {
		margin-bottom: 0 !important;
	}
	+ h3 {
		margin-top: 2rem !important;
	}
}
.surface-contrast {
	background: var(--contrast) !important;
	h1,h2,h3,h4,h5,p,a {
		color: var(--lightest) !important;
	}
}
.surface-contrast-light {
	background: var(--contrast-light) !important;
}
.surface-contrast-lighter {
	background: var(--contrast-lighter) !important;
}

.color-lightest {
	h1,h2,h3,h4,h5,p,a {
		color: var(--lightest) !important;
	}
}


/* -------------------------------------------------- Buttons ------- */
.btn {
	a {
		border: none !important;
		font-size: 1rem !important;
		line-height: 1.75em !important;
		padding: 0.875rem 1.75rem !important;
		border-radius: 0 !important;
		@media (max-width: 991px) {
			padding: 0.5rem 1.25rem !important;
		}
		svg {
			width: 15px !important;
			height: 15px !important;
			max-height: 15px !important;
			margin-left: 17px !important;
			@media (max-width: 991px) {
				width: 12px !important;
				height: 12px !important;
				max-height: 12px !important;
				margin-left: 10px !important;
			}
			path {
				stroke: currentColor !important;
			}
		}
	}
	&.btn-warning,
	&.btn-contrast a {
		background: var(--contrast) !important;
		color: var(--lightest) !important;
		&:hover {
			background: var(--contrast-dark) !important;
			color: var(--lightest) !important;
		}
	}
	&.btn-contrast-light a {
		background: var(--contrast-light) !important;
		color: var(--dark) !important;
		&:hover {
			background: var(--contrast-dark) !important;
			color: var(--lightest) !important;
		}
	}
	&.btn-contrast-lighter a {
		background: var(--contrast-lighter) !important;
		color: var(--dark) !important;
		&:hover {
			background: var(--contrast-light) !important;
		}
	}
	&.btn-warning {
		border: none !important;
		border-radius: 0 !important;
		padding: 0.875rem 1.75rem !important;
	}
}



/* -------------------------------------------------- Cards ------- */
.card {
	border-radius: 0 !important;
	padding: 1.5rem !important;

	.elementor-widget-heading {
		margin: 0 !important;
		.elementor-heading-title {
			color: var(--contrast) !important;
			font-weight: bold !important;
		}
	}
	.elementor-widget-text-editor {
		li,
		p {
			font-size: 0.875rem !important;
			line-height: 1.4em !important;
			color: var(--dark) !important;
		}
	}

	&.card-light {
		border: 5px solid var(--contrast-light) !important;
	}
	&.card-lighter {
		padding: 5px !important;
		background: var(--contrast-lighter) !important;
		.elementor-widget-heading {
			padding: 0 1.5rem !important;
		}
		.elementor-widget-text-editor {
			padding: 0 1.5rem 1.5rem !important;
		}
	}
	&.card-contrast {
		border: 5px solid var(--contrast) !important;
	}
	&.card-side-img {
		h3 {
			font-size: 2rem !important;
			@media (max-width: 991px) {
				font-size: 1.6rem !important;
			}
		}
		.elementor-widget-heading {
			padding: 2rem 1.5rem 0 0 !important;
			@media (max-width: 991px) {
				padding: 1rem 1rem 0 0 !important;
			}
			@media (max-width: 767px) {
				padding: 0 !important;
			}
		}
		.elementor-widget-text-editor {
			padding: 0 1.5rem 0 0 !important;
			p {
				font-size: 1.125rem !important;
				@media (max-width: 991px) {
					font-size: 1rem !important;
				}
			}
		}
		> .elementor-element {
			&:first-child {
				@media (max-width: 767px) {
					padding-bottom: 0 !important;
				}
			}
			&:last-child {
				@media (max-width: 767px) {
					padding-top: 0 !important;
				}
			}
		}
		.elementor-widget-button {
			margin-top: auto !important;
		}
	}
}


/* -------------------------------------------------- Header ------- */

header {
	ul.eael-simple-menu {
		li.menu-item {
			margin: 0.5rem 1rem !important;
			a {
				padding: 0.25rem 0 !important;
				background: transparent !important;
				border-radius: 0 !important;
				color: var(--color-menuitem) !important;
			}
			&:hover,
			&.current-menu-parent,
			&.current-menu-item {
				a.eael-item-active,
				a {
					color: var(--color-menuitem) !important;
					border-bottom: 2px solid var(--contrast);
					background: transparent !important;
					svg {
						fill: var(--color-menuitem) !important;
					}
				}
			}
		}
	}
	.elementor-element-527b42d {
		> .elementor-element {
			> .elementor-element {
				border-color: var(--contrast-light) !important;
			}
		}
	}
	ul.sub-menu {
		background: var(--contrast-lighter) !important;
		li.menu-item {
			a {
				border-bottom: 2px solid transparent !important;
			}
			&:hover,
			&.current-menu-parent,
			&.current-menu-item {
				a.eael-item-active,
				a {
					color: var(--color-menuitem) !important;
					border-bottom-color: var(--contrast) !important;
				}
			}
		}
	}
	button#menuToggle {
		background: var(--contrast) !important;
		border-radius: 0 !important;
		padding: 0.75rem !important;
		width: auto !important;
		height: auto !important;
		&:hover,
		&:focus {
			background: var(--contrast-dark) !important;
		}
		img {
			width: 1.5rem !important;
		}
	}
	.offcanvas-menu {
		background: var(--contrast-lighter) !important;
		.close-btn {
			color: var(--dark) !important;
			&:hover,
			&:active,
			&:focus {
				background: transparent !important;
			}
		}
		ul {
			li {
				a {
					color: var(--dark) !important;
				}
				&.current-menu-parent,
				&.current_page_item {
					> a {
						color: var(--contrast-dark) !important;
					}
				}
				.dropdown-arrow {
					svg.arrow-icon {
						color: var(--dark) !important;
						stroke: var(--dark) !important;
					}
					&:active,
					&:focus,
					&:hover {
						svg.arrow-icon {
							color: var(--dark) !important;
							stroke: var(--dark) !important;
						}
					}
				}
			}
		}
	}
}

/* -------------------------------------------------- Slider ------- */
.swiper-slide {
	.e-parent {
		.e-con-inner {
			background: var(--contrast-lighter) !important;
			margin-bottom: 2rem !important;
			padding: 5px !important;
			> .elementor-element {
				> .elementor-element:last-child {
					padding: 0 1.5rem 1.5rem !important;
					color: var(--dark) !important;
					.e-child {
						margin: 0 !important;
					}
					h3.elementor-heading-title  {
						font-weight: 600 !important;
					}
					.elementor-widget-text-editor,
					.elementor-icon-list-text {
						font-size: 0.875rem !important;
						line-height: 1.3em !important;
						color: var(--dark) !important;
						margin-bottom: 0 !important;
					}
					.elementor-icon-list--layout-traditional {
						border: none !important;
						border-radius: 0 !important;
						background: transparent !important;
						padding: 0 !important;
						.elementor-icon-list-icon {
							display: none !important;
						}
						.elementor-icon-list-text {
							padding: 0 !important;
							a {
								color: var(--dark) !important;
								display: inline !important;
							}
						}
					}
				}
			}
		}
	}
}

.auswiperslogo {
	.swiper-slide {
		img {
			filter: grayscale(1);
		}
	}
}



/* -------------------------------------------------- Work Results – Unsere Arbeiten ------- */
.work-filter-wrapper {
	.filter-box {
		label {
			color: var(--dark);
			font-size: 1rem;
			min-width: 100px !important;
		}
		.work-filter {
			max-width: 100% !important;
			width: 100% !important;
			min-width: auto !important;
			border-radius: 0 !important;
			border-color: var(--contrast-light) !important;
			&:hover,
			&:focus,
			&:active {
				border-radius: 0 !important;
				border-color: var(--contrast) !important;
			}
		}
	}
}
#work-results {
	.work-box {
		border: 15px solid var(--contrast-lighter);
		background: var(--contrast-lighter);
		img {
			border-radius: 0 !important;
		}
		h3 {
			color: var(--contrast) !important;
			font-weight: bold !important;
			font-size: 1.5rem !important;
		}
		p {
			font-size: 1rem !important;
			line-height: 1.4em !important;
			color: var(--dark) !important;
		}
	}
}

/* -------------------------------------------------- Formular ------- */
form.wpcf7-form {
	textarea.wpcf7-textarea,
	input.wpcf7-text {
		border: 2px solid var(--contrast) !important;
		border-radius: 0 !important;
		color: var(--dark) !important;
		&::-webkit-input-placeholder {color: var(--contrast) !important;}
		&::-moz-placeholder {color: var(--contrast) !important;}
		&:-ms-input-placeholder {color: var(--contrast) !important;}
		&:-moz-placeholder {color: var(--contrast) !important;}
	}
}
body .elementor-2783 .elementor-element.elementor-element-0a52c4f .eael-contact-form-7 .wpcf7-form input[type="submit"].wpcf7-submit,
body .elementor-2272 .elementor-element.elementor-element-c2d1012 .eael-contact-form-7 .wpcf7-form input[type="submit"].wpcf7-submit {
	border: none !important;
	font-size: 1rem !important;
	line-height: 1.75em !important;
	padding: 0.875rem 1.75rem !important;
	border-radius: 0 !important;
	background: var(--contrast) !important;
	color: var(--lightest) !important;
	&:hover {
		background: var(--contrast-dark) !important;
		color: var(--lightest) !important;
	}
	@media (max-width: 991px) {
		padding: 0.5rem 1.25rem !important;
	}
}

.textxnt a {
	color: var(--contrast-dark) !important;
	&:hover {
		color: var(--contrast) !important;
	}
}

/* -------------------------------------------------- Blog ------- */
.card-lighter.e-parent {
	> .e-con-inner {
		padding: 10px !important;
		.elementor-widget-icon-list {
			padding: 0 !important;
			color: var(--bs-dark) !important;
			border-radius: 0 !important;
			border: none !important;
			a {
				color: var(--bs-dark) !important;
			}
			.elementor-icon-list-icon {
				display: none !important;

			}
		}
		> .elementor-element:last-child {
			padding: 1rem 0 1rem !important;
			h3 {
				font-size: 1.5rem !important;
			}
			> .elementor-element {
				padding: 0 !important;
				color: var(--bs-dark) !important;
				font-size: 1rem !important;
				line-height: 1.4em;
			}
		}
	}
}

.e-n-tabs-heading {
	button.e-n-tab-title {
		border-radius: 0 !important;
		color: var(--dark) !important;
		background: var(--contrast-light) !important;
		&:hover,
		&[aria-selected="true"] {
			color: white !important;
			background: var(--contrast) !important;
		}
	}
}


/* -------------------------------------------------- Pagebrowser ------- */
nav.elementor-pagination {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	.page-numbers {
		&.next,
		&.prev {
			border-radius: 0 !important;
			border-color: var(--contrast-light) !important;
			color: var(--dark) !important;
			position: static !important;
			&:hover,
			&:active,
			&:focus {
				background-color: var(--contrast-light) !important;
			}
		}
		&.prev {
			margin-right: auto !important;
		}
		&.next {
			margin-left: auto !important;
		}
		&.current {
			background-color: var(--contrast-light) !important;
			color: var(--dark) !important;
		}
	}
}

.vx-pagination {
	border: none !important;
	ul.pagination {
		padding: 0 !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		li {
			&:first-child {
				margin-right: auto !important;
			}
			&:last-child {
				margin-left: auto !important;
			}
			a {
				&.paginext,
				&.pagiprev {
					border-radius: 0 !important;
					border-color: var(--contrast-light) !important;
					color: var(--dark) !important;
					position: static !important;
					&:hover,
					&:active,
					&:focus {
						background-color: var(--contrast-light) !important;
					}
				}
			}
		}
	}
}

/* -------------------------------------------------- Social Media ------- */
.vx-share-wrapper {
	.vx-icon-btn,
	.vx-share-btn {
		border-radius: 0 !important;
	}
}

/* -------------------------------------------------- Footer ------- */

footer.elementor-location-footer {
	background: var(--contrast-lighter) !important;
	.elementor-icon-list-text {
		color: var(--dark) !important;
		font-size: 0.875rem !important;
	}
	.elementor-widget-image {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		@media (max-width: 767px) {
			padding-left: 0.25rem !important;
			padding-right: 0.25rem !important;
		}
		+ .elementor-widget-text-editor {
			padding-left: 1rem !important;
			padding-right: 1rem !important;
			color: var(--dark) !important;
			@media (max-width: 767px) {
				padding-left: 0.25rem !important;
				padding-right: 0.25rem !important;
			}
		}
	}
	.e-con-inner .elementor-widget-image {
		background: transparent !important;
		padding: 0 var(--column-gap) 0 0 !important;
		border-right: 2px solid var(--contrast-light);
		border-radius: 0 !important;
		&:last-child {
			border: none !important;
		}
	}
	.elementor-divider-separator{
		border-block-start: 2px var(--divider-border-style) var(--contrast-light) !important;
	}
	.landingsubscribe {
		.formcnt {
			input.form-control {
				border-radius: 0 !important;
				border-color: var(--contrast-light) !important;
				color: var(--dark) !important;
				&::-webkit-input-placeholder {color: var(--dark) !important;}
				&::-moz-placeholder {color: var(--dark) !important;}
				&:-ms-input-placeholder {color: var(--dark) !important;}
				&:-moz-placeholder {color: var(--dark) !important;}
			}

		}
		.submibtns {
			input[type="submit"] {
				background: var(--contrast) !important;
				border: 1px solid var(--contrast) !important;
				border-radius: 0 !important;
			}
		}
	}
	.elementor-widget-text-editor {
		color: var(--dark) !important;
	}
	.elementor-element-4da93e1 {
		font-size: 0.875rem !important;
	}
	@media (min-width: 991px) and (max-width: 1199px) {
		.elementor-col-25 {
			width: 33.333% !important;
			&:first-child {
				width: 100% !important;
			}
		}
	}
	@media (max-width: 767px) {
		.elementor-col-25 {
			margin-top: 1rem !important;
			&:first-child {
				margin-top: 0 !important;
			}
		}
		.elementor-element.elementor-element-cd8b788 {
			padding-bottom: 0 !important;
		}
	}

}


/* -------------------------------------------------- Keine Ahnung wie ich die sonst hätte anpassen sollen ------- */
.e-parent {
	padding-left: 0 !important;
	padding-right: 0 !important;
	> .e-con-inner {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}
.elementor-element-0063318 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.back-to-top {
	background: var(--contrast-light) !important;
	&:hover,
	&:focus,
	&:active {
		background: var(--contrast) !important;
	}
}
.img-invert {
	img {
		filter: invert(1);
	}
}