/*
Theme Name: Hello Elementor Child
Theme URI: https://one-dot.de
Description: Child theme for Hello Elementor — Glanz & Leistung
Author: ONEDOT
Author URI: https://one-dot.de
Template: hello-elementor
Version: 1.0.23
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   GL Global — body color + base overrides (Spec 013)
   Source: glanzleistung/dist/styles/theme.min.css body{color:#5a5a5a!important}
   ========================================================================== */

body {
	color: #5a5a5a;
}

/* Heading class overrides — Source: theme.min.css .h1/.h2 rules (1rem=10px → px)
   Applied via Elementor widget _css_classes field */
.h1 .elementor-heading-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: #038ea7;
}

/* Standard nicht möglich weil: Elementor applies 20px bottom margin globally to widgets via JS/Kit;
   override requires !important. Live shows 5px gap h1→h2. */
.h1.elementor-widget-heading {
	margin-bottom: 5px !important;
}

.h2 .elementor-heading-title {
	font-size: 30px;
	margin-bottom: 30px;
}

/* Bare heading tags inside rich-text content (text/text-editor widgets) —
   original theme styled h1–h6 globally; Hello-Elementor drops those, so
   content-embedded headings (e.g. Impressum, Datenschutz) render unstyled.
   Source: theme.min.css h1–h6 rules (1rem=10px → px). */
.elementor-widget-text-editor h1 {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: #038ea7;
	margin-bottom: 5px;
}
.elementor-widget-text-editor h2 {
	font-size: 30px;
	margin-bottom: 30px;
}
.elementor-widget-text-editor h3 {
	font-size: 17.5px;
	text-transform: uppercase;
}
.elementor-widget-text-editor h4 {
	font-size: 16px;
	text-transform: uppercase;
	color: #038ea7;
	margin-bottom: 20px;
}
.elementor-widget-text-editor h5 {
	font-size: 12.5px;
	text-transform: uppercase;
}

/* Banner top section overlay + title (Spec 013)
   Source: .banner-top / .banner-top__title in theme.min.css */
.banner-top {
	position: relative;
}
.banner-top::after {
	content: "";
	background-color: rgba(3, 142, 167, 0.5);
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none;
}
.banner-top__title .elementor-heading-title {
	color: #fff;
	font-size: 60px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	position: relative;
	z-index: 1;
}
/* Banner title vertical position — Standard nicht möglich weil: per-breakpoint
   column-align (center desktop / bottom mobile) ist in Elementor Free nicht
   responsiv setzbar. Desktop centering = Elementor items-middle (native);
   mobile bottom-align overrides it (selector matches Elementor specificity,
   style.css loads after frontend.min.css). Source: theme.min.css .banner-top. */
@media (max-width: 767px) {
	.banner-top__title .elementor-heading-title {
		font-size: 40px;
	}
	.banner-top.elementor-section-items-middle > .elementor-container {
		align-items: flex-end;
	}
	.banner-top__title {
		padding-bottom: 40px;
	}
}

/* Intro text (einzeiler_banner) — Source: .intro-text in theme.min.css
   Standard nicht möglich weil: Elementor text-editor widget overrides line-height via body font stack;
   !important needed to win specificity on the inner .intro-text div. */
.intro-text {
	font-size: 24px;
	line-height: 36px !important;
	max-width: 800px;
	margin: 0 auto;
	padding-top: 150px;
	padding-bottom: 150px;
	text-align: center;
}

/* Referenzen-Vorschau — Source: .reference-preview__image-2 in theme.min.css */
.reference-preview__image-2 img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* .load-more — Standard nicht möglich weil: fat_adv_gallery-rendered; reset.css a{} forces pink. */
.load-more {
	color: #5a5a5a;
}

/* "Alle Referenzen" button — .btn-secondary-2 wipe-hover (Spec 013)
   Source: .btn-secondary-2 in theme.min.css. Elementor button widget renders
   the link as .elementor-button inside the .btn-secondary-2 wrapper. */
.btn-secondary-2 .elementor-button {
	position: relative;
	overflow: hidden;
	background: transparent;
	color: #333;
	border: 1px solid #038ea7;
	text-transform: uppercase;
	transition: color .3s;
	z-index: 0;
}
.btn-secondary-2 .elementor-button::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #038ea7;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .3s ease-out;
}
.btn-secondary-2 .elementor-button:hover {
	color: #fff;
}
.btn-secondary-2 .elementor-button:hover::before {
	transform: scaleX(1);
}

/* Service headings within .service section */
.service__h1 .elementor-heading-title {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.service__h2 .elementor-heading-title {
	color: #fff;
	font-size: 30px;
	margin-bottom: 30px;
}

/* ==========================================================================
   GL Footer — Source: theme.min.css #footer / .logo-footer / .social-list (Spec 013)
   ========================================================================== */

.logo-footer img {
	max-width: 255px;
	width: auto;
}
.social-list {
	font-size: 35px;
}
.social-list li {
	margin-right: 20px;
}

/* Footer menu — Standard nicht möglich weil: HFE nav-menu Free klappt mobil ein;
   daher plain HTML widget. Stil muss Bootstrap nav-link defaults überschreiben. */
.footer-menu li,
.footer-menu-col .footer-menu li {
	padding-top: 5px;
	padding-bottom: 5px;
	list-style: none;
}
.footer-menu a,
.footer-menu a.nav-link {
	font-size: 16px;
	font-weight: 400;
	color: #000;
	padding: 0;
	line-height: 30px;
}
.footer-menu a:hover,
.footer-menu a.nav-link:hover {
	color: #038ea7;
	text-decoration: none;
}

/* ==========================================================================
   GL Templates — single / archive / search / 404 (Spec 005)
   ========================================================================== */

/* Container */
.gl-container {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Shared H1 */
.gl-single__title,
.gl-archive__title,
.gl-search__title,
.gl-404__title {
	color: #038ea7;
	font-weight: 700;
	text-transform: uppercase;
}

/* Button */
.gl-btn {
	display: inline-block;
	background: transparent;
	border: 1px solid #038ea7;
	color: #038ea7;
	padding: 1em 1.5em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .3s, color .3s;
}
.gl-btn:hover,
.gl-btn:focus {
	background: #038ea7;
	color: #fff;
}

/* Utility templates (no banner) sit under the fixed transparent header +
   overhanging logo box (bottom ≈180px) — top padding clears it. */

/* ---------- Single ---------- */
.gl-single {
	color: #5a5a5a;
	padding: 200px 0 40px;
}
.gl-single__thumbnail {
	margin-bottom: 24px;
}
.gl-single__img {
	width: 100%;
	height: auto;
	display: block;
}
.gl-single__header {
	margin-bottom: 24px;
}
.gl-single__meta {
	color: #888;
	font-size: .9em;
}
.gl-entry-meta__author a {
	color: #038ea7;
	text-decoration: none;
}
.gl-single__content {
	color: #5a5a5a;
}
.gl-page-nav {
	margin-top: 24px;
}

/* ---------- Archive ---------- */
.gl-archive {
	color: #5a5a5a;
	padding: 200px 0 40px;
}
.gl-archive__header {
	margin-bottom: 32px;
	text-align: center;
}
.gl-archive__description {
	color: #5a5a5a;
}
.gl-archive__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
@media (max-width: 900px) {
	.gl-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.gl-archive__grid {
		grid-template-columns: 1fr;
	}
}
.gl-archive__link {
	display: block;
	text-decoration: none;
	color: #5a5a5a;
}
.gl-archive__img {
	width: 100%;
	height: auto;
	display: block;
}
.gl-archive__no-img {
	width: 100%;
	padding-top: 66%;
	background: #eee;
}
.gl-archive__item-title {
	display: block;
	margin-top: 8px;
	font-weight: 600;
	color: #038ea7;
}

/* ---------- Search ---------- */
.gl-search {
	color: #5a5a5a;
	padding: 200px 0 40px;
}
.gl-search__title span {
	font-weight: 400;
}
.gl-search__results {
	list-style: none;
	padding: 0;
	margin: 0;
}
.gl-search__item {
	padding: 20px 0;
	border-bottom: 1px solid #eee;
}
.gl-search__item-title a {
	color: #038ea7;
	text-decoration: none;
}
.gl-search__date {
	font-size: .85em;
	color: #888;
}
.gl-search__excerpt {
	margin-top: 8px;
}
.gl-search__empty {
	margin-top: 16px;
}

/* ---------- 404 ---------- */
.gl-404 {
	color: #5a5a5a;
	padding: 200px 0 40px;
}
.gl-404__lead {
	margin-bottom: 24px;
}

/* ---------- Pagination ---------- */
.gl-pagination {
	margin-top: 40px;
	text-align: center;
}
.gl-pagination .nav-links a,
.gl-pagination .nav-links span {
	display: inline-block;
	padding: .5em .9em;
	border: 1px solid #038ea7;
	color: #038ea7;
	text-decoration: none;
	margin: 0 2px;
	transition: background .3s, color .3s;
}
.gl-pagination .nav-links .current,
.gl-pagination .nav-links a:hover {
	background: #038ea7;
	color: #fff;
}

/* ==========================================================================
   GL 007 Service Grid — hover + layout (Spec 007)
   Source: glanzleistung/dist/styles/theme.min.css .service* rules
   Elementor Free has no per-widget custom CSS → scoped here.
   ========================================================================== */

.service {
	padding: 50px;
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	position: relative;
}

.service:after {
	content: "";
	background-color: rgba(239, 124, 23, 0.61);
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	z-index: 1;
}

.service__wrapper {
	z-index: 2;
	position: relative;
}


.service__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Override Elementor's 20%-column so service tiles wrap 3+2 like original */
.service__inner > .elementor-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0;
	max-width: none;
}
.service__inner > .elementor-container > .elementor-column {
	width: calc(33.33% - 15px) !important;
	max-width: none !important;
	flex: none !important;
	margin-left: 15px;
}

.service__item {
	width: 100%;
	margin-left: 0;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
	height: 360px;
	text-decoration: none;
	display: block;
}

/* Höhen-basiertes Tile-Layout: feste Item-Höhe (360px) durchreichen, damit die
   weiße Box per flex:1 den Rest unter dem Bild einnimmt (kein Padding-Trick). */
.service__item .elementor-widget-container {
	height: 100%;
}
.service__item .elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.service__item .elementor-image-box-img {
	display: block;
	flex: 0 0 auto;
	position: relative;
	text-align: center;
	padding: 0;
	background: #fefefe;
	width: 100%;
	height: 170px;
	overflow: hidden;
	transition: .5s;
}

/* Image-Box "Image Spacing" (Elementor-Default 15px) entfernen — weiße Box bündig
   am Bild. Quelle ist auto-generiertes post-5.css mit 5-Klassen-Spezifität
   (.elementor-5 .elementor-element-XXX.elementor-position-top …); der :not(#gl)-
   Boost gewinnt ohne !important. */
.service__item:not(#gl) .elementor-image-box-img {
	margin-bottom: 0;
}

.service__item .elementor-image-box-img img {
	background: transparent;
	border-radius: 0;
	width: 100%;
	height: auto;
	padding: 0;
	transform: translateY(-42px);
	transition: .5s;
}

.service__item .elementor-image-box-img:after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0; top: 0;
	background: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all .5s ease-in-out;
}

.service__item .elementor-image-box-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	background: #fff;
	transition: .5s;
}

.service__item .elementor-image-box-description {
	font-size: 14px;
	padding: 10px 40px;
	transition: .5s;
	height: 100px;
	overflow: hidden;
}

.service__item:hover .elementor-image-box-img {
	height: 300px;
}

.service__item:hover .elementor-image-box-img:after {
	opacity: 1;
}

.service__item:hover .elementor-image-box-img img {
	transform: translateY(0);
}

/* Title exakt mittig in der weißen Box halten: das asymmetrische Default-Margin
   (8px top / 16px bottom) würde den Titel im Flex-Center um 4px nach oben ziehen. */
.service__item:hover .elementor-image-box-title {
	margin: 0;
}

.service__item:hover .elementor-image-box-description {
	display: none;
}

/* D6: Whole tile linked — Standard nicht möglich weil: Elementor image-box 'link' wraps
   only the image (figure has position:relative + overflow:hidden, contains img a::after).
   Title link is outside the figure and positioned relative to .service__item → its ::after
   covers the full tile. Source: verified via computed-style (figure=relative, title-a=static,
   nearest-positioned-ancestor=.service__item). */
.service__item {
	position: relative;
}
.service__item .elementor-image-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* D6: Title font — Live: 20px weight 400; generator sets 2rem/700 via Kit typography token.
   Standard nicht möglich weil: Elementor Free custom typography in image-box title uses Kit
   token (primary) which maps to 18px/700; override needed to match live 20px/400. */
.service__item .elementor-image-box-title {
	font-size: 20px !important;
	font-weight: 400 !important;
}

/* D5: Service tiles 1-column on mobile — Standard nicht möglich weil: column _inline_size_mobile
   in Elementor Free saved templates does not propagate; CSS media query override needed. */
@media (max-width: 767px) {
	.service__inner > .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
	}
}

/* Service tiles 2-per-row on tablet (768–1024px). Base rule sets 33.33% for all
   widths >767px; this narrows it to 2 columns in the tablet range. */
@media (min-width: 768px) and (max-width: 1024px) {
	.service__inner > .elementor-container > .elementor-column {
		width: calc(50% - 15px) !important;
	}
}

/* ---------- Search form ---------- */
.gl-searchform {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.gl-searchform__input {
	flex: 1 1 200px;
	padding: .6em .8em;
	border: 1px solid #ccc;
	color: #5a5a5a;
}
.gl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Contact module (Spec 013, Step 9)
   Source: .contact* + #contact-form + .btn-secondary rules in theme.min.css
   (original html{font-size:10px} → 1rem=10px, ported to px).
   Elementor Free drops per-item icon-list css_classes (.contact__list-item),
   so the icon circle + hover are remapped onto .elementor-icon-list-* nodes. */
.contact .elementor-icon-list-items {
	list-style: none;
	padding: 0;
}
.contact .elementor-icon-list-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 30px;
}
.contact .elementor-icon-list-item:hover {
	cursor: pointer;
}
.contact .contact__list .elementor-icon-list-icon {
	margin-right: 15px;
	flex: 0 0 auto;
}
.contact .contact__list .elementor-icon-list-icon i {
	display: block;
	text-align: center;
	font-size: 36px;
	color: #000;
	background-color: #fff;
	width: 65px;
	height: 65px;
	line-height: 65px;
	border: 2px solid #000;
	border-radius: 100%;
	transition: all .3s linear 0s;
}
.contact .contact__list .elementor-icon-list-item:hover .elementor-icon-list-icon i {
	background-color: #ef7c17;
	border-color: #ef7c17;
	color: #fff;
}
.contact .contact__headline {
	display: block;
	margin-top: 0;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-weight: 700;
	color: #038ea7;
	font-size: 18px;
}
.contact .contact__sub-headline {
	display: block;
	font-size: 20px;
}

/* CF7 form — fields/submit carry Bootstrap classes (.form-control/.btn-secondary)
   whose styling lived in the old theme CSS; ported scoped under .contact-form. */
.contact-form label {
	width: 100%;
	color: #5a5a5a;
}
.contact-form .form-control {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	padding: 3.75px 7.5px;
	font-size: 16px;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 2.5px;
}
.contact-form .form-control::placeholder {
	text-transform: uppercase;
}
.contact-form input[type="text"].form-control,
.contact-form input[type="email"].form-control {
	height: 44px;
}
.contact-form textarea.form-control {
	padding-top: 15px;
}
.contact-form br {
	display: none;
}
.contact-form .btn-secondary {
	display: inline-block;
	background: none;
	padding: 1em;
	color: #333;
	border: 1px solid #ef7c17;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 1.5;
	cursor: pointer;
	transition: color .3s, background-color .3s, border-color .3s;
}
.contact-form .btn-secondary:hover {
	background-color: #ef7c17;
	color: #fff;
	border-color: #ef7c17;
}
.contact-form .btn-secondary:disabled {
	background-color: #dee2e6;
	border-color: #dee2e6;
	color: #fff;
	cursor: not-allowed;
}
.contact-form .wpcf7-not-valid {
	border-color: red;
}

/* ==========================================================================
   Mobile-Gutter — Inhalte (Texte) sollen nicht am Rand kleben.
   Standard nicht möglich weil: Elementor schreibt das Section-Padding als
   per-element CSS (post-N.css, z.B. `.elementor-5 .elementor-element-XXX`,
   Spezifität 0,3,0+) — eine schlichte `.elementor-top-section`-Klassenregel
   verliert dagegen. Der `:not(#gl)`-Boost hebt die Spezifität über die
   generierten Regeln (ohne !important). Full-Bleed-Hero (RevSlider via
   shortcode) bleibt randlos.
   ========================================================================== */
@media (max-width: 767px) {
	.elementor-top-section:not(#gl) {
		padding-left: 15px;
		padding-right: 15px;
	}
	.elementor-top-section:has(.elementor-widget-shortcode):not(#gl),
	.elementor-top-section:has(.elementor-widget-image-carousel):not(#gl) {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   Home-Hero (Elementor Image-Carousel) — Höhe als Anteil der Viewport-Höhe.
   Image-Carousel hat kein natives Höhenfeld; Höhe = Bild-Ratio. Hier per vh +
   object-fit:cover erzwungen. Scope .home = nur Startseite (dort einziges
   Carousel) → andere Carousels unberührt. Desktop 60vh / Tablet 40vh / Mobil 30vh. */
.home .elementor-widget-image-carousel .swiper-slide img {
	height: 60vh;
	width: 100%;
	object-fit: cover;
}
@media (max-width: 1024px) {
	.home .elementor-widget-image-carousel .swiper-slide img {
		height: 40vh;
	}
}
@media (max-width: 767px) {
	.home .elementor-widget-image-carousel .swiper-slide img {
		height: 30vh;
	}
}