/*
Theme Name: Hello Elementor Child
Theme URI: https://test.bluecanard.stage.glanzstueck.it/
Description: Child-Theme von Hello Elementor für BlueCanard QS (Kit Digital Go-Live). Hält A11y-/Kontrast-/Hitbox-/Skip-Link-Patches. Logik in functions.php; CSS in dieser Datei.
Author: Glanzstück / SVOM
Author URI: https://glanzstueck.agency
Template: hello-elementor
Version: 0.6.27
Text Domain: hello-elementor-child
*/

/* ============================================================
 * P16 — Kontrast-Fallback
 * Datenbank-Replace hat bereits 265 Vorkommen #7A7A7A → #666666
 * gesetzt. Für CSS-Files Dritter (Plugin, externes Theme) hier
 * eine pauschale Verdunkelung. Im Body greift kein selektorloser
 * "color: #7A7A7A" mehr.
 * ============================================================ */
:root {
	--bc-text-light: #666666; /* WCAG AA auf #F9F9F7 = 4.54:1 */
	/* S5 — --bc-font wurde in Z.612/620 via var() referenziert, aber nie
	 * definiert (Fallback griff immer). Hier zentral definiert, damit die
	 * Variable echt steuerbar ist. Wert = bisheriger Fallback (unverändert). */
	--bc-font: "Inter", system-ui, sans-serif;
}

/* ============================================================
 * P21 — Skip-Link sichtbar bei :focus
 * Hello Elementor liefert einen Skip-Link, der visually-hidden
 * ist. WCAG 2.1 fordert klare Sichtbarkeit bei Tastatur-Fokus.
 * Ziel-Anker (#content) prüfen wir per JS in qs.js.
 * ============================================================ */
.skip-link,
a.skip-link,
a[href="#content"].skip-link {
	/* Standard: visuell ausgeblendet — erscheint NUR bei Tastatur-Fokus
	 * (siehe :focus-Regel unten). Vorher fehlte das Verstecken → dauerhaft
	 * als Petrol-Button sichtbar oben links. */
	/* kanonisches screen-reader-Pattern + !important, damit KEINE
	 * andere Regel (Theme/Elementor/Admin-Bar/eingeloggt) das Element
	 * sichtbar machen kann — außer der :focus-Regel unten. */
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	background: #014D4E;
	color: #FFFFFF;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: underline;
	z-index: 100000;
}

.skip-link:focus,
.skip-link:focus-visible,
a[href="#content"]:focus,
a[href="#content"]:focus-visible {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	white-space: normal !important;
	margin: 0 !important;
	padding: 12px 18px !important;
	outline: 3px solid #FFD700 !important;
	outline-offset: 2px;
}

/* ============================================================
 * P30 — Mobile-Burger-Toggle: Mindestens 44 × 44 px Hitbox
 * Kombiniert HFE (.hfe-nav-menu__toggle), Hello (.menu-toggle)
 * und Elementor-Standard (.elementor-menu-toggle).
 * ============================================================ */
.hfe-nav-menu__toggle,
.menu-toggle,
.elementor-menu-toggle,
.hfe-nav-menu-icon,
button[aria-label*="enú"],
button[aria-label*="enu"] {
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
 * P32 — WPML-Sprachschalter: 44 × 44 px Hitbox
 * Greift sowohl horizontal-list (.wpml-ls-link) als auch
 * dropdown (.wpml-ls-statics-shortcode-actions a) Layouts.
 * ============================================================ */
.wpml-ls a,
.wpml-ls-link,
.wpml-ls-item > a,
.wpml-ls-display a,
a.wpml-ls-link {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px;
}

/* ============================================================
 * P33 — Cookie-Banner-Buttons: 44 × 44 px Hitbox
 * CookieYes-Klassen: cky-btn-revisit (Revisit-Pill), cky-btn-close
 * (X-Button), cky-accordion-btn (+/− im Modal).
 * Falls CookieYes durch Real Cookie Banner ersetzt wird (P22),
 * können diese Regeln entfernt werden.
 * ============================================================ */
.cky-btn-revisit,
.cky-btn-close,
.cky-accordion-btn,
.cky-banner-btn,
.cky-btn,
button.cky-btn {
	min-width: 44px;
	min-height: 44px;
	padding: 10px 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Cookie-Banner Body-Buttons im Modal explizit erweitern. */
.cky-modal .cky-btn,
.cky-banner-btn-wrapper .cky-btn {
	min-width: 88px; /* breitere Aktions-Buttons; AA-Touchtarget */
}

/* ============================================================
 * R3 — Hero (.hero-content) Text-Kontrast auf Video-Hintergrund
 * Esther: "el color de las letras y su disposicion porque no se leen".
 * Wir forcieren weiß auf allen Hero-Texten mit einem dezenten
 * text-shadow, damit Text auch über bewegten Video-Frames lesbar bleibt.
 * Plus: das Container-Overlay sorgt für AA-Kontrast.
 * ============================================================ */
.hero-content,
.elementor-element.hero-content {
	position: relative;
}

.hero-content h1,
.hero-content h2,
.hero-content .elementor-heading-title,
.hero-content .elementor-widget-text-editor,
.hero-content .elementor-widget-text-editor p,
.elementor-element.hero-content h1,
.elementor-element.hero-content h2,
.elementor-element.hero-content .elementor-heading-title {
	color: #FFFFFF !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
	position: relative;
	z-index: 2;
}

/* Button-Outline-Variante für besseren Kontrast auf Video */
.hero-content .elementor-button-link,
.hero-content a.elementor-button {
	position: relative;
	z-index: 2;
}

/* Hero-Video-Element soll niemals Audio abspielen, falls Elementor das setzt */
.hero-content video.elementor-background-video-embed,
.hero-content video.elementor-background-video-hosted {
	pointer-events: none;
}

/* ============================================================
 * Logo — Wortmark "Blue Canard" (Ente raus, nur Text)
 * "Blue" in Brand-Petrol, "Canard" in Primary-Dark.
 * Sitzt im HFE-Header an Stelle des theme-site-logo Widgets.
 * ============================================================ */
a.bc-wordmark,
.bc-wordmark {
	display: inline-flex !important;
	align-items: baseline;
	gap: 0;
	text-decoration: none !important;
	font-family: "Playfair Display", "Times New Roman", serif !important;
	font-weight: 600 !important;
	font-size: clamp(1.5rem, 2.2vw, 2.25rem) !important;
	line-height: 1 !important;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* Wortmark-Container im Header unten bündig mit Menü-Punkten ausrichten.
 * Elementor's header-section ist flex-row mit align-items: center; die
 * Wortmark ist deutlich größer als die Nav-Items, deshalb wirkt sie
 * versetzt. align-self: flex-end + kleines line-height-Padding hebt sie
 * optisch auf die Baseline der Nav-Items. */
.elementor-element-e2b5340,
.elementor-element-e2b5340.link-logo {
	align-self: flex-end !important;
}

.elementor-element-e2b5340 .bc-wordmark,
.elementor-element-72ed543 .bc-wordmark,
a.bc-wordmark {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	/* Playfair Display hat eine recht große Descender-Zone (Bottom des
	 * Bounding-Box ist deutlich unter der visuellen Baseline). Wir heben
	 * den Wortmark nach oben, sodass das visuelle Bottom der Glyphs mit
	 * dem Bottom der Nav-Item-Texte fluchtet. */
	transform: translateY(-11px) !important;
}

@media (max-width: 1024px) {
	.elementor-element-e2b5340 .bc-wordmark,
	.elementor-element-72ed543 .bc-wordmark,
	a.bc-wordmark {
		transform: translateY(-6px) !important;
	}
}

@media (max-width: 600px) {
	.elementor-element-e2b5340 .bc-wordmark,
	.elementor-element-72ed543 .bc-wordmark,
	a.bc-wordmark {
		transform: translateY(-4px) !important;
	}
}

.bc-wordmark .bc-wordmark__blue {
	color: #014D4E !important;
}

.bc-wordmark .bc-wordmark__canard {
	color: #2C2C2C !important;
}

.bc-wordmark__sep {
	display: inline-block;
	width: 0.35em;
}

.bc-wordmark:hover .bc-wordmark__blue,
.bc-wordmark:focus-visible .bc-wordmark__blue {
	color: #006D77;
}

.bc-wordmark:focus-visible {
	outline: 2px solid #014D4E;
	outline-offset: 4px;
	border-radius: 2px;
}

@media (max-width: 600px) {
	.bc-wordmark {
		font-size: 1.35rem;
	}
}

/* ============================================================
 * /contacto/ — Visítenos-Sektion + Map-Embed
 * ============================================================ */
.section-visitenos {
	margin-top: 0;
}

.section-visitenos em {
	font-style: italic;
}

.bc-contact-map {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #E0E0E0;
}

.bc-contact-map iframe {
	width: 100% !important;
	height: 100% !important;
	min-height: 320px;
	display: block;
}

/* Hero "Hablemos de su proyecto." — em-Italic */
.elementor-element-22dda3c em {
	font-style: italic;
}

@media (max-width: 768px) {
	.section-visitenos {
		flex-direction: column !important;
	}
	.section-visitenos > .e-con {
		width: 100% !important;
	}
}

/* ============================================================
 * /servicios/home-staging/ Hero — Text in weiß
 * ============================================================ */
.elementor-element-065aa74 h1,
.elementor-element-065aa74 h2,
.elementor-element-065aa74 .elementor-heading-title,
.elementor-element-065aa74 .elementor-widget-text-editor,
.elementor-element-065aa74 .elementor-widget-text-editor p,
.elementor-element-065aa74 .hfe-breadcrumbs a,
.elementor-element-065aa74 .hfe-breadcrumbs span {
	color: #FFFFFF !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
 * /servicios/diseno-de-espacios/ Hero — Text in weiß
 * ============================================================ */
.elementor-element-5bd25dfc h1,
.elementor-element-5bd25dfc h2,
.elementor-element-5bd25dfc .elementor-heading-title,
.elementor-element-5bd25dfc .elementor-widget-text-editor,
.elementor-element-5bd25dfc .elementor-widget-text-editor p,
.elementor-element-5bd25dfc .hfe-breadcrumbs a,
.elementor-element-5bd25dfc .hfe-breadcrumbs span {
	color: #FFFFFF !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
 * /servicios/gestion-de-reformas/ Hero — Text in weiß
 * Hero-Container fc6b738 hat Overlay rgba(0,0,0,0.35); damit
 * Text lesbar wird, forcieren wir Heading + Text-Editor auf weiß.
 * ============================================================ */
.elementor-element-fc6b738 h1,
.elementor-element-fc6b738 h2,
.elementor-element-fc6b738 .elementor-heading-title,
.elementor-element-fc6b738 .elementor-widget-text-editor,
.elementor-element-fc6b738 .elementor-widget-text-editor p,
.elementor-element-fc6b738 .hfe-breadcrumbs a,
.elementor-element-fc6b738 .hfe-breadcrumbs span {
	color: #FFFFFF !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
 * Otros Servicios a Medida — Cards uniform aspect ratio
 * Die 4 Service-Featured-Images haben unterschiedliche
 * Aspect-Ratios (3:2 / 1:1 / 16:9 / 2:3). object-fit:cover plus
 * fixe aspect-ratio macht alle Karten optisch identisch.
 * ============================================================ */
/* 2x2 Grid auf Desktop, 1 Spalte ab Tablet. Section ist auf
 * flex align-items:center constrainiert, das collapsed das
 * Widget auf Content-Größe. Wir forcieren full-width Section
 * und 2 gleiche Spalten via minmax(0,1fr). */
.elementor-element-883f1e0 {
	align-items: stretch !important;
}

.elementor-element-883f1e0 .elementor-widget-posts,
.elementor-element-883f1e0 .elementor-element-b58eb47,
.elementor-element-883f1e0 .elementor-element-b58eb47 .elementor-widget-container {
	width: 100% !important;
	max-width: 1100px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.section-service .elementor-posts-container.elementor-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 2.5rem !important;
	width: 100% !important;
}

/* Karten füllen ihre Grid-Zelle */
.section-service .elementor-post,
.section-service .elementor-post.elementor-grid-item {
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 auto !important;
}

@media (max-width: 768px) {
	.section-service .elementor-posts-container.elementor-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.section-service .elementor-post__thumbnail__link,
.section-service .elementor-post__thumbnail {
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #F0F0EB;
}

.section-service .elementor-post__thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Sicherheitsnetz: falls Theme auto-height vergibt */
.section-service .elementor-post__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: 0;
}

/* Thumbnail ohne Rand/Margin direkt an Card-Kante */
.section-service .elementor-post__thumbnail__link,
.section-service .elementor-post__thumbnail {
	margin: 0 !important;
	padding: 0 !important;
}

.section-service .elementor-post__text {
	padding-top: 1rem;
}

.section-service .elementor-post__read-more {
	color: #014D4E;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 0.85rem;
	text-decoration: none;
}

/* Grüner "Servicios"-Kategorie-Badge (post_categories meta) ausblenden */
.section-service .elementor-post__meta-data,
.section-service .elementor-post__badge,
.section-service .elementor-post__card .post-categories,
.section-service .elementor-post__card .cat-links,
.section-service .elementor-post__card a[rel~="category"] {
	display: none !important;
}

.section-service .elementor-post__read-more:hover,
.section-service .elementor-post__read-more:focus-visible {
	text-decoration: underline;
}

/* ============================================================
 * R-Horizontal — Pack-Pills von vertikal auf horizontal-stacked
 * umbauen. Esther: "Cinnamon Brown" bricht in vertikalen schmalen
 * Pillen um. Lösung: Pillen quer legen, untereinander stacken.
 * Reiner CSS-Override; Elementor-Container-Settings bleiben
 * unangetastet (damit der Visual-Editor noch sinnvoll bedienbar
 * bleibt). Heading + Price stehen in jeder Pille nebeneinander.
 * ============================================================ */
.palette-cards {
	flex-direction: column !important;
	gap: 1.25rem !important;
	max-width: 720px;
	margin-left: auto !important;
	margin-right: auto !important;
	align-items: stretch !important;
}

/* Spalten-Container, die jeweils eine Pill enthalten: volle Breite */
.palette-cards > .e-con,
.palette-cards > [class*="elementor-element"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
}

/* Leere Container, die vorher die "Link contacto"-Buttons hielten,
 * jetzt 0 Kinder haben → komplett kollabieren. */
.palette-cards > .e-con > .e-con-inner > .e-con:empty,
.palette-cards > .e-con > .e-con-inner > .e-con > .e-con-inner:empty {
	display: none !important;
}

/* Die kleinen runden farbigen Punkte oben über den Pillen
 * (frühere Platzhalter-Container der Buttons). Direkt by-ID raus. */
.elementor-element-9aa041b,
.elementor-element-5ce77a9,
.elementor-element-26e95db,
.elementor-element-797fd7c {
	display: none !important;
}

/* Die Pillen selbst: horizontal flach, Inhalt nebeneinander */
.palette-pill {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 72px !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 32px !important;
	border-radius: 60px !important;
	gap: 16px !important;
}

/* Heading "Warm Beige" / "Cinnamon Brown" etc. — bleibt links, nowrap */
.palette-pill .elementor-widget-heading {
	margin: 0 !important;
	flex: 0 1 auto !important;
	width: auto !important;
}

.palette-pill h1,
.palette-pill h2,
.palette-pill h3,
.palette-pill h4,
.palette-pill h5,
.palette-pill h6 {
	margin: 0 !important;
	font-size: clamp(1.1rem, 2.2vw, 1.6rem) !important;
	white-space: nowrap !important;
	line-height: 1.1 !important;
}

/* Preis-Text rechts, gleicher Vertical-Center */
.palette-pill .elementor-widget-text-editor {
	margin: 0 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	text-align: right !important;
}

.palette-pill .elementor-widget-text-editor p {
	margin: 0 !important;
	font-size: 0.95rem !important;
	white-space: nowrap !important;
	line-height: 1.3 !important;
}

@media (max-width: 540px) {
	.palette-pill {
		flex-direction: column !important;
		justify-content: center !important;
		min-height: 96px !important;
		padding: 14px 24px !important;
		gap: 4px !important;
	}
	.palette-pill h1,
	.palette-pill h2,
	.palette-pill h3,
	.palette-pill h4,
	.palette-pill h5,
	.palette-pill h6 {
		font-size: 1.1rem !important;
	}
	.palette-pill .elementor-widget-text-editor p {
		font-size: 0.85rem !important;
	}
}

/* ============================================================
 * R2A — Pack-Pills clickable (Hover-Effekt für besseren UX-Hinweis)
 * Click-Handler kommt aus qs.js. Hier nur visuelles Feedback.
 * ============================================================ */
.palette-pill[data-bc-linkified="1"] {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	cursor: pointer;
}

.palette-pill[data-bc-linkified="1"]:hover,
.palette-pill[data-bc-linkified="1"]:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.palette-pill[data-bc-linkified="1"]:focus-visible {
	outline: 3px solid #014D4E;
	outline-offset: 4px;
}

/* ============================================================
 * R6 — Packs-Section .box-option Link-Buttons
 * "Link contacto"-Anchors auf der /servicios/-Seite waren als
 * blaue Default-Hyperlinks gerendert. Hier echtes Button-Styling
 * mit Brand-Petrol auf Hover/Focus. Anchor selbst bleibt semantisch
 * <a>, damit Screenreader es als Link ankündigen.
 * ============================================================ */
a.box-option,
.palette-cards a.box-option {
	display: inline-block;
	padding: 12px 22px;
	background: #014D4E;
	color: #FFFFFF;
	text-decoration: none;
	border: 2px solid #014D4E;
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 0.875rem;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
	min-height: 44px;
	min-width: 140px;
	box-sizing: border-box;
	text-align: center;
}

a.box-option:hover,
a.box-option:focus-visible {
	background: #FFFFFF;
	color: #014D4E;
	text-decoration: none;
	outline: 2px solid #014D4E;
	outline-offset: 2px;
}

/* ============================================================
 * P14 — Kit-Digital-Banner (global per wp_footer im mu-plugin)
 * ============================================================ */
.bc-kd-banner {
	background: #141414;
	color: #FFFFFF;
	padding: 28px 20px 24px;
	border-top: 1px solid #141414;
	font-family: var(--bc-font, "Inter", system-ui, sans-serif);
}

/* Copyright (zusammen mit Banner via wp_footer emittiert) */
.bc-footer-copyright {
	background: #FFFFFF;
	text-align: center;
	padding: 14px 20px;
	font-family: var(--bc-font, "Inter", system-ui, sans-serif);
	font-size: 0.875rem;
	color: #2C2C2C;
	border-top: 1px solid #E0E0E0;
}

.bc-footer-copyright p {
	margin: 0;
}

.bc-footer-copyright a {
	color: #014D4E;
	text-decoration: underline;
}

.bc-footer-copyright a:hover,
.bc-footer-copyright a:focus-visible {
	text-decoration: none;
}

/* Offizieller Kit-Digital-Footer (Manual de Identidad para Digitalizadores):
 * EINE Kombi-Grafik (Gobierno de España + Ministerio + red.es + Kit Digital +
 * PRTR + EU-Emblem „Financiado por la Unión Europea NextGenerationEU"),
 * weiße Version auf dunklem Grund. Quelle: LogosEnero2024 (red.es). */
.bc-kd-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}

.bc-kd-banner__top {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: #EDEDED;
	max-width: 1000px;
}

.bc-kd-banner__composite {
	width: 100%;
	max-width: 1100px;
	height: auto;
	display: block;
}

.bc-kd-banner__financing {
	margin: 4px 0 0;
	font-size: 0.72rem;
	line-height: 1.5;
	color: #B8B8B8;
	max-width: 1000px;
}

@media (max-width: 768px) {
	.bc-kd-banner {
		padding: 20px 12px 16px;
	}
	.bc-kd-banner__composite {
		max-width: 360px;
	}
	.bc-kd-banner__top {
		font-size: 0.72rem;
	}
	.bc-kd-banner__financing {
		font-size: 0.66rem;
	}
}

/* ============================================================
 * P31 — Mobile-Navi (Hamburger ≤767px): linksbündig + Panel-Fix
 * Zwei HFE-Mängel behoben:
 *  1) Menü-Anchors hatten justify-content:space-between → Icon links,
 *     Label rechts. Fix: flex-start (Icon + Label zusammen links),
 *     nur der Submenu-Pfeil bleibt rechts (margin-left:auto).
 *  2) HFE positioniert das Dropdown-Panel absolut per JS-Inline-Style
 *     (left:-337px) → ~36px zu weit links, Icons beschnitten. Fix:
 *     position:fixed + viewportbreit. top = Header-Höhe.
 * STRIKT ≤767px gescopt — ab 768px ist das Menü horizontal (Desktop),
 * da darf KEINE dieser Regeln greifen. */
@media (max-width: 767px) {
	.hfe-nav-menu__layout-horizontal {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		top: 124px !important;
	}
	.hfe-nav-menu .hfe-menu-item,
	.hfe-nav-menu a.hfe-menu-item {
		justify-content: flex-start !important;
		text-align: left !important;
		padding-left: 22px !important;
		padding-right: 18px !important;
	}
	.hfe-nav-menu .hfe-menu-item .sub-arrow,
	.hfe-nav-menu .hfe-menu-item > .hfe-menu-toggle {
		margin-left: auto !important;
	}
	.hfe-nav-menu .sub-menu .hfe-menu-item {
		padding-left: 42px !important;
	}
}

/* Tablet-Hochformat (601–767px): Header ist dort etwas niedriger. */
@media (min-width: 601px) and (max-width: 767px) {
	.hfe-nav-menu__layout-horizontal {
		top: 112px !important;
	}
}

/* ============================================================
 * P34 — Sprachumschalter als DROPDOWN (alle Breiten)
 * WPML rendert beide Flaggen als Liste. Wir zeigen nur die aktuelle
 * Sprache als Trigger (+ Caret); die andere klappt darunter auf bei
 * Hover (Desktop), Tastatur-Fokus, oder Tap (.is-open via JS, mobil
 * — siehe mu-plugin P35). Funktioniert Desktop + Mobil identisch.
 * ============================================================ */
/* Clipping der absoluten Dropdown verhindern */
.elementor-widget-wpml-language-switcher .elementor-widget-container,
.wpml-elementor-ls,
.wpml-ls-legacy-list-horizontal {
	overflow: visible !important;
}
.wpml-ls-legacy-list-horizontal ul {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Trigger = aktuelle Sprache */
.wpml-ls-legacy-list-horizontal li.wpml-ls-current-language {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}
.wpml-ls-legacy-list-horizontal li.wpml-ls-current-language > a {
	pointer-events: none; /* Klick auf aktuelle Sprache togglet (JS), kein Reload */
}
.wpml-ls-legacy-list-horizontal li.wpml-ls-current-language::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 7px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.65;
	transition: transform 0.2s ease;
}
/* andere Sprache(n): Dropdown-Panel, standard versteckt */
.wpml-ls-legacy-list-horizontal li:not(.wpml-ls-current-language) {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 6px;
	padding: 7px 11px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	z-index: 100001;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* öffnen: Hover (Desktop) · Tastatur-Fokus · Tap (.is-open) */
.wpml-ls-legacy-list-horizontal:hover li:not(.wpml-ls-current-language),
.wpml-ls-legacy-list-horizontal:focus-within li:not(.wpml-ls-current-language),
.wpml-ls-legacy-list-horizontal.is-open li:not(.wpml-ls-current-language) {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.wpml-ls-legacy-list-horizontal:hover li.wpml-ls-current-language::after,
.wpml-ls-legacy-list-horizontal:focus-within li.wpml-ls-current-language::after,
.wpml-ls-legacy-list-horizontal.is-open li.wpml-ls-current-language::after {
	transform: rotate(180deg);
}

/* ============================================================
 * P37 — Kontrast Pack-Karten /servicios/ (WCAG 1.4.3 AA)
 * Beige-Karte „Warm Beige": heller Text auf hellem Beige (#b39b82)
 * fiel durch (2,2–2,6:1). Text auf dunkel #2C2C2C → ~6:1 (bewahrt
 * die Beige-Optik). Preis auf Braun (#8d5a34): cream → reinweiß
 * (4,34 → ~5:1). Reversibel; Esther kann's prüfen.
 * ============================================================ */
.elementor-element-057ac72 h3,
.elementor-element-057ac72 .elementor-heading-title {
	color: #2C2C2C !important;
}
.elementor-element-6c4c9db,
.elementor-element-6c4c9db p {
	color: #2C2C2C !important;
}
.elementor-element-4d1973c,
.elementor-element-4d1973c p {
	color: #FFFFFF !important;
}

/* ============================================================
 * P38 — Hero-Hintergrundvideo bei prefers-reduced-motion stoppen
 * WCAG 2.2.2 (Pausar, detener, ocultar): das autoplay-loop-Video
 * ist bewegter Inhalt >5s. Für Nutzer mit „reduzierte Bewegung"
 * blenden wir das Video aus → das statische Hero-Poster
 * (background_image) erscheint. JS pausiert es zusätzlich
 * (mu-plugin P36). Kombiniert = konformer Mechanismus.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.elementor-background-video-container,
	.elementor-background-video-hosted,
	.elementor-background-video-embed,
	.hero-content video.elementor-background-video-hosted,
	.hero-content video.elementor-background-video-embed,
	.hero-content .elementor-background-video-container {
		display: none !important;
	}
}

/* ============================================================
 * Allgemein — :focus-visible einheitliche, sichtbare Markierung
 * Für alle interaktiven Elemente (Links, Buttons, Inputs, Tabs),
 * ohne den default outline aus dem Theme-Reset zu unterdrücken.
 * ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #014D4E;
	outline-offset: 2px;
}

/* ============================================================
 * Reseñas / Testimonials (Sektion "Lo que dicen nuestros clientes")
 * Foto-lose Lösung: das Elementor-Pro Reviews-Widget (e56ce51) zeigt
 * keine Fotos mehr (echte Kundenstimmen ohne Bildmaterial). Statt
 * Foto ein markenfarbiger Initialen-Avatar, dezentes Zitatzeichen,
 * gold Sterne, Projekt-Typ als Untertitel. Avatare hängen an den
 * STABILEN repeater-item-Klassen (slide _id) — nicht an nth-child,
 * damit Umsortieren im Backend die Zuordnung nicht zerschießt.
 * ============================================================ */

/* Karten: gleiche Höhe, weiche Karte */
.section-clientes .swiper-slide {
	height: auto;
	display: flex;
}
.section-clientes .elementor-testimonial {
	background: #F9F9F7;
	border: 1px solid rgba(1, 77, 78, 0.08);
	border-radius: 14px;
	padding: 32px 28px 28px;
	width: 100%;
	height: 100%;
	box-shadow: 0 6px 22px rgba(1, 77, 78, 0.06);
}

/* Kopfzeile: Avatar links, Name/Rolle/Sterne rechts */
.section-clientes .elementor-testimonial__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}
/* echtes (leeres) Foto + Read-more-Icon ausblenden */
.section-clientes .elementor-testimonial__image,
.section-clientes .elementor-testimonial__icon {
	display: none !important;
}

/* Initialen-Avatar via ::before auf dem (immer vorhandenen) header */
.section-clientes .elementor-testimonial__header::before {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-family: "Inter", system-ui, sans-serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.5px;
	line-height: 1;
}
/* Sara Cuevas — Forest-Green-Ton */
.section-clientes .elementor-repeater-item-80dc59f .elementor-testimonial__header::before {
	content: "SC";
	background: #3E5C4B;
}
/* Sandra y José — Brand-Petrol */
.section-clientes .elementor-repeater-item-b1dc4bd .elementor-testimonial__header::before {
	content: "S&J";
	background: #014D4E;
}
/* Cristina Vinces — Cinnamon-Brown-Ton */
.section-clientes .elementor-repeater-item-9a4dc4f .elementor-testimonial__header::before {
	content: "CV";
	background: #9C5B34;
}

/* Name / Projekt-Typ */
.section-clientes .elementor-testimonial__cite {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-style: normal;
}
.section-clientes .elementor-testimonial__name {
	color: #014D4E;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
}
.section-clientes .elementor-testimonial__title {
	color: #666666;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.section-clientes .elementor-star-rating {
	margin-top: 6px;
	font-size: 15px;
}

/* Zitat-Text: dezentes Anführungszeichen davor */
.section-clientes .elementor-testimonial__text {
	color: #2C2C2C;
	font-style: italic;
	line-height: 1.65;
	position: relative;
}
.section-clientes .elementor-testimonial__text::before {
	content: "\201C";
	font-family: Georgia, "Times New Roman", serif;
	font-size: 52px;
	line-height: 0.1;
	color: #967D26;
	opacity: 0.35;
	display: block;
	margin-bottom: 10px;
	font-style: normal;
}

/* Mobil: etwas kompakter */
@media (max-width: 767px) {
	.section-clientes .elementor-testimonial {
		padding: 26px 22px 24px;
	}
	.section-clientes .elementor-testimonial__header::before {
		width: 50px;
		height: 50px;
		font-size: 16px;
	}
}

/* ============================================================
 * back-to-top-Pfeil entfernen (User-Wunsch)
 * Der "Volver arriba"-Button (#back-to-top) liegt als HTML-Widget
 * (elementor-element-0946e3c) im HFE-Footer-Template (elementor-80),
 * oberhalb des dunklen Footers. Reversibel per CSS ausgeblendet —
 * das Widget bleibt im Backend erhalten. Wirkt ES + EN (geteilter Footer).
 * ============================================================ */
#back-to-top,
.back-to-top,
.elementor-element-0946e3c {
	display: none !important;
}

/* ============================================================
 * Hero-CTAs (User-Wunsch)
 * Beide Hero-Buttons sollen wie "Descubrir Paquetes" aussehen
 * (gefüllt dunkel #2C2C2C, weißer Text) — "Contacto" (Widget cff8126)
 * war zuvor transparent/Outline. Beide bekommen leicht abgerundete
 * Ecken (6px). Widget-IDs: aa83aca (Descubrir), cff8126 (Contacto).
 * Hover dezent aufgehellt für Affordance.
 * ============================================================ */
.elementor-element-aa83aca .elementor-button,
.elementor-element-cff8126 .elementor-button {
	background-color: #2C2C2C !important;
	color: #FFFFFF !important;
	border: 1px solid #2C2C2C !important;
	border-radius: 6px !important;
}
.elementor-element-aa83aca .elementor-button:hover,
.elementor-element-aa83aca .elementor-button:focus-visible,
.elementor-element-cff8126 .elementor-button:hover,
.elementor-element-cff8126 .elementor-button:focus-visible {
	background-color: #014D4E !important;
	border-color: #014D4E !important;
	color: #FFFFFF !important;
}

/* ============================================================
 * Contacto — "Visítenos"-Block ausblenden (User-Wunsch)
 * Section 7d5bdc8 = Heading "Visítenos"/"Visit Us" + Adresse +
 * Öffnungszeiten + Google-Map. Enthält KEIN Kontaktformular
 * (das sitzt in separater Section 8525ee9). WPML: ES + EN teilen
 * dieselbe Section-ID → eine Regel wirkt auf beide Sprachen.
 * Reversibel; Elementor-Inhalt bleibt im Backend erhalten.
 * ============================================================ */
.elementor-element-7d5bdc8 {
	display: none !important;
}

/* ============================================================
 * R7 — Einheitlicher Button-Radius: alle Buttons leicht + gleich (6px)
 * User-Wunsch: alle Buttons gleich abgerundet. 6px = bestehender
 * Hero-CTA-Wert, damit "gleich" wirklich überall gleich ist.
 * Bewusst NICHT erfasst (kein Button / eigenes Design, behalten Radius):
 *   .palette-pill (Pack-Pillen, 60px), CookieYes (.cky-btn, Fremd-UI),
 *   Avatare (border-radius:50%), Cards.
 * !important erzwingt Uniformität über per-Widget-Elementor-Radien.
 * ============================================================ */
.elementor-button,
a.elementor-button,
.elementor-button-link,
.elementor-field-type-submit .elementor-button,
button[type="submit"].elementor-button,
a.box-option,
.palette-cards a.box-option,
.bc-map-consent__btn {
	border-radius: 6px !important;
}

/* ============================================================
 * R8 — "Más allá de los packs"-Karten (Servicios, Posts-Widget b58eb47)
 * User-Wunsch: Thumbnails mit leicht abgerundeten Ecken + leichtem
 * Schatten. Scope auf das eine Posts-Widget (Node ID ES=EN via WPML).
 * ============================================================ */
.elementor-element-b58eb47 .elementor-post__thumbnail {
	border-radius: 8px !important;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ============================================================
 * R9 — Rechtstexte-Seiten Polish
 * Scope: body.bc-legal (mu-plugin) + NUR Seiteninhalt
 * [data-elementor-type="wp-page"] — damit NICHT in Header/Footer
 * blutet (die sind eigene HFE-Templates, type header/footer).
 * Firmendaten als getönte <dl>-Info-Karte, Buchstaben-Liste,
 * runterskalierte Section-Headings. Text bleibt 1:1.
 * ============================================================ */
.bc-legal [data-elementor-type="wp-page"] h1.elementor-heading-title {
	font-size: clamp(2rem, 4vw, 2.6rem) !important;
	line-height: 1.2 !important;
}
.bc-legal [data-elementor-type="wp-page"] h2.elementor-heading-title {
	font-size: clamp(1.3rem, 2.4vw, 1.5rem) !important;
	line-height: 1.3 !important;
	color: #014D4E !important;
	margin-top: 1.4em !important;
	padding-bottom: 0.35em;
	border-bottom: 1px solid #e7e1d6;
}
.bc-legal [data-elementor-type="wp-page"] h3.elementor-heading-title {
	font-size: 1.15rem !important;
	color: #014D4E !important;
}
.bc-legal [data-elementor-type="wp-page"] .elementor-widget-text-editor {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: #2c2c2c;
}
.bc-legal [data-elementor-type="wp-page"] .elementor-widget-text-editor p {
	margin: 0 0 1.05em;
}
.bc-legal [data-elementor-type="wp-page"] .elementor-widget-text-editor a {
	color: #014D4E;
	text-underline-offset: 2px;
}
/* Firmendaten-Info-Karte */
.bc-legal [data-elementor-type="wp-page"] .legal-id-card {
	margin: 0.3em 0 0.8em;
	padding: 1.5rem 1.75rem;
	background: #f6f2ec;
	border: 1px solid #e7e1d6;
	border-left: 3px solid #014D4E;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.bc-legal [data-elementor-type="wp-page"] .legal-id-card dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.55rem 1.5rem;
	margin: 0;
}
.bc-legal [data-elementor-type="wp-page"] .legal-id-card dt {
	margin: 0;
	font-weight: 700;
	color: #014D4E;
}
.bc-legal [data-elementor-type="wp-page"] .legal-id-card dd {
	margin: 0;
	color: #2c2c2c;
	overflow-wrap: anywhere;
}
@media (max-width: 540px) {
	.bc-legal [data-elementor-type="wp-page"] .legal-id-card {
		padding: 1.2rem 1.2rem;
	}
	.bc-legal [data-elementor-type="wp-page"] .legal-id-card dl {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
	.bc-legal [data-elementor-type="wp-page"] .legal-id-card dt {
		margin-top: 0.7rem;
	}
	.bc-legal [data-elementor-type="wp-page"] .legal-id-card dt:first-child {
		margin-top: 0;
	}
}
/* Buchstaben-Liste a)/b)/c) — Marker steckt im Text */
.bc-legal [data-elementor-type="wp-page"] .legal-list--lettered {
	list-style: none;
	margin: 0 0 1.2em;
	padding-left: 0;
}
.bc-legal [data-elementor-type="wp-page"] .legal-list--lettered li {
	padding-left: 1.6em;
	text-indent: -1.6em;
	margin-bottom: 0.55em;
}

/* ============================================================
 * R10 — Contact-Infozeilen (Telefon/E-Mail/Adresse) glatt ziehen
 * Telefon + E-Mail sind rohe <a> in HTML-Widgets → erbten die blaue
 * Theme-Linkfarbe. Hier dunkel wie die Adresse, Hover Petrol. Plus
 * gleichmäßiger Abstand der 3 Zeilen-Container (Margins waren ungleich).
 * Element-IDs sind ES+EN geteilt → greift in beiden Sprachen.
 * ============================================================ */
.elementor-element-c1b3988 a,
.elementor-element-ad70db8 a,
.elementor-element-8d47d33 a,
.elementor-element-02c6165 a {
	color: #2C2C2C;
	text-decoration: none;
}
.elementor-element-c1b3988 a:hover,
.elementor-element-ad70db8 a:hover,
.elementor-element-8d47d33 a:hover,
.elementor-element-02c6165 a:hover {
	color: #014D4E;
}
.elementor-element-2ee7ddf,
.elementor-element-241cc0c,
.elementor-element-747061c,
.elementor-element-698d7fa,
.elementor-element-f28355e {
	margin: 0 0 0.8rem 0 !important;
}
/* About-Foto rund statt oval (4:3-Bild → quadratisch zugeschnitten) */
.elementor-element-6b0d50e img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ============================================================
 * R11 — Footer Google-Maps-Consent-Box: Inhalt mittig
 * Der Consent-Platzhalter (.bc-map-consent, 240px, flex-zentriert)
 * steckte in .map-embed mit fixer height:150px → Button unten
 * abgeschnitten, Inhalt nicht mittig. Container auf volle Höhe
 * wachsen lassen (das geladene Map-iframe will ohnehin min. 240px).
 * ============================================================ */
.map-embed {
	height: auto !important;
	min-height: 240px !important;
}
.bc-map-consent {
	width: 100%;
	height: 100%;
}

/* ============================================================
 * R12 — Logo-Lockup im Header: rundes Logo + Schriftzug darunter
 * Rundes Siegel-Logo oben, "Blue Canard" gestapelt darunter.
 * Neutralisiert den translateY-Baseline-Hack der alten horizontalen
 * Wortmarke und skaliert den Schriftzug als Sub-Label kleiner.
 * ============================================================ */
.bc-nav-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	line-height: 1;
}
.bc-nav-logo img {
	display: block;
}
.bc-nav-logo .bc-wordmark {
	transform: none !important;
	font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
	letter-spacing: 0.5px;
}
/* Lockup vertikal mittig zur Navi (statt flex-end der alten Wortmarke) */
.elementor-element-e2b5340 {
	align-self: center !important;
}

/* ============================================================
 * R13 — Mobile: horizontaler Scroll durch CookieYes-Modal
 * Das versteckte Preference-Center (visibility:hidden, aber display:flex
 * im Layout-Fluss, 845px breit) schob die Seite auf dem Handy seitlich
 * (~129px Querscroll). Modal auf Viewport-Breite begrenzen + phantom-
 * Overflow am body clippen (clip statt hidden = position:sticky bleibt heil).
 * ============================================================ */
.cky-preference-center,
.cky-modal,
.cky-consent-container {
	max-width: 100vw;
}
body {
	overflow-x: hidden;
	overflow-x: clip;
}