/*
Theme Name: Würschum Child
Theme URI: https://wuerschum.dev.ehnes.co
Template: hello-elementor
Author: Ehnes Digital
Author URI: https://ehnes-digital.de
Description: Custom Child-Theme für Würschum GmbH (Dosier- & Abfüllanlagen). Stellt das Design-System (Tokens) sowie die interaktiven Header-Elemente bereit: Such-Overlay, Sprach-Switcher (DE/EN) und Produkte-Mega-Menü. Alle Werte stammen aus DESIGN.md.
Version: 0.6.8
Text Domain: wuerschum-child
*/

/* =========================================================================
   0. Design-Tokens  (Single Source of Truth → DESIGN.md)
   ========================================================================= */
:root {
	--ws-blue:        #0B55A0;   /* Primär (Marke) */
	--ws-blue-dark:   #08427B;   /* Hover/aktiv */
	--ws-ink:         #1C2530;   /* Überschriften / dunkler Text */
	--ws-muted:       #5B6770;   /* Fließtext gedämpft */
	--ws-line:        #E5E9ED;   /* Trennlinien / Borders */
	--ws-bg-soft:     #EAF1F8;   /* zarter Blauton (Sektionen) */
	--ws-white:       #FFFFFF;
	--ws-font:        "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ws-container:   1180px;
	--ws-radius:      6px;
	--ws-shadow:      0 12px 40px rgba(28, 37, 48, 0.12);
	--ws-ease:        cubic-bezier(.4, 0, .2, 1);
	/* Einheitlicher Milchglas-Backdrop für alle Overlays (Suche, Mega-Menü,
	   Flyout-Lightboxen). Transparent + kräftiger Blur (Apple-Stil). */
	--ws-glass-bg:    rgba(248, 250, 252, 0.40);
	--ws-glass-solid: rgba(244, 247, 250, 0.80);   /* Fallback ohne backdrop-filter */
	--ws-glass-blur:  blur(24px) saturate(180%);
	/* Regelmäßiges pointy-top Hexagon. Mathematisch korrekt NUR bei
	   Seitenverhältnis Breite:Höhe = √3/2 ≈ 0.866 (via aspect-ratio gesetzt). */
	--ws-hex:         polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	--ws-hex-ratio:   0.8660;
}

/* =========================================================================
   1. Sticky-Header-Anker
   (Sticky NUR am direkten Body-Child header.elementor-location-header —
    innere Elementor-Container sind als Sticky-Anker unzuverlässig.)
   ========================================================================= */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ws-white);
}
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .elementor-location-header { top: 46px; }
}

/* =========================================================================
   2. Such-Overlay — full-page Frosted-Glass (Apple-Style)
   (Trigger: .ws-search-trigger im Header)
   ========================================================================= */
.ws-search-trigger { cursor: pointer; }

.ws-search {
	position: fixed;
	inset: 0;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s var(--ws-ease);
}
.ws-search.is-open { opacity: 1; pointer-events: auto; }

/* Milchglas: heller, transparenter Blur (einheitlicher Token) */
.ws-search__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ws-glass-bg);
	-webkit-backdrop-filter: var(--ws-glass-blur);
	        backdrop-filter: var(--ws-glass-blur);
}
/* Fallback ohne backdrop-filter-Support: zarter heller Schleier */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ws-search__backdrop { background: var(--ws-glass-solid); }
}

.ws-search__panel {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	transform: translateY(10px);
	transition: transform .3s var(--ws-ease);
}
.ws-search.is-open .ws-search__panel { transform: translateY(0); }

.ws-search__form {
	display: flex;
	align-items: center;
	gap: 18px;
	width: min(720px, 92vw);
	border-bottom: 2px solid var(--ws-blue);
	padding-bottom: 16px;
}
.ws-search__form::before {
	content: "";
	width: 28px; height: 28px;
	flex: 0 0 28px;
	background: var(--ws-blue);
	-webkit-mask: var(--ws-icon-search) center / contain no-repeat;
	        mask: var(--ws-icon-search) center / contain no-repeat;
}
.ws-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: 400 clamp(24px, 4vw, 34px)/1.2 var(--ws-font);
	color: var(--ws-ink);
}
.ws-search__input::placeholder { color: #9AA4AD; }
.ws-search__submit {
	flex: 0 0 auto;
	border: 0;
	background: var(--ws-blue);
	color: var(--ws-white);
	font: 500 14px/1 var(--ws-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 14px 28px;
	border-radius: var(--ws-radius);
	cursor: pointer;
	transition: background .2s var(--ws-ease);
}
.ws-search__submit:hover { background: var(--ws-blue-dark); }

.ws-search__hint {
	margin: 0;
	font: 400 13px/1.4 var(--ws-font);
	letter-spacing: .02em;
	color: var(--ws-muted);
}
.ws-search__hint kbd {
	font-family: inherit;
	font-weight: 500;
	color: var(--ws-ink);
	background: rgba(11, 85, 160, .08);
	border-radius: 4px;
	padding: 1px 6px;
}

.ws-search__close {
	position: absolute;
	top: 26px; right: 32px;
	z-index: 2;
	border: 0;
	background: transparent;
	color: var(--ws-ink);
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	transition: color .15s var(--ws-ease), transform .2s var(--ws-ease);
}
.ws-search__close:hover { color: var(--ws-blue); transform: rotate(90deg); }

@media (max-width: 600px) {
	.ws-search__form { flex-wrap: wrap; }
	.ws-search__submit { width: 100%; }
}

/* =========================================================================
   3. Sprach-Switcher  (Markup im Header-Text-Editor, Klasse .ws-langsw)
   ========================================================================= */
.ws-lang p { margin: 0; }            /* wpautop-Reste neutralisieren */
.ws-langsw { position: relative; display: inline-block; font-family: var(--ws-font); }

.ws-langsw__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--ws-line);
	background: var(--ws-white);
	color: var(--ws-ink);
	font: 500 13.5px/1 var(--ws-font);
	letter-spacing: .03em;
	padding: 8px 11px;
	border-radius: var(--ws-radius);
	cursor: pointer;
	transition: border-color .2s var(--ws-ease), color .2s var(--ws-ease);
}
.ws-langsw__toggle::before {           /* Globus-Icon */
	content: "";
	width: 15px; height: 15px;
	background: currentColor;
	-webkit-mask: var(--ws-icon-globe) center / contain no-repeat;
	        mask: var(--ws-icon-globe) center / contain no-repeat;
}
.ws-langsw__toggle::after {            /* Caret */
	content: "";
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform .2s var(--ws-ease);
}
.ws-langsw__toggle:hover { border-color: var(--ws-blue); color: var(--ws-blue); }
.ws-langsw.is-open .ws-langsw__toggle { border-color: var(--ws-blue); color: var(--ws-blue); }
.ws-langsw.is-open .ws-langsw__toggle::after { transform: rotate(180deg); }

.ws-langsw__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 168px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--ws-white);
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius);
	box-shadow: var(--ws-shadow);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity .2s var(--ws-ease), transform .2s var(--ws-ease);
	z-index: 200;
}
.ws-langsw.is-open .ws-langsw__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ws-langsw__menu li { margin: 0; }
.ws-langsw__menu a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 4px;
	font: 400 14px/1.2 var(--ws-font);
	color: var(--ws-ink);
	text-decoration: none;
	transition: background .15s var(--ws-ease), color .15s var(--ws-ease);
}
.ws-flag {                             /* Flaggen-Chip (Inline-SVG) */
	flex: none;
	display: block;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	overflow: hidden;
	line-height: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.ws-flag svg { display: block; width: 100%; height: 100%; }
.ws-langsw__menu a::after {            /* Sprach-Kürzel rechts */
	content: attr(hreflang);
	margin-left: auto;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--ws-muted);
}
.ws-langsw__menu a:hover { background: var(--ws-bg-soft); color: var(--ws-blue); }
.ws-langsw__menu a.is-active { color: var(--ws-blue); font-weight: 500; }
.ws-langsw__menu a.is-active::after { color: var(--ws-blue); }

/* =========================================================================
   4. Produkte-Mega-Menü  (Trigger: li.ws-mega-trigger in der Hauptnavi)
   ========================================================================= */
.ws-mega {
	position: fixed;
	left: 0; right: 0; bottom: 0;        /* spannt den sichtbaren Bereich unter dem Header */
	top: 0;                              /* wird per JS auf Header-Unterkante gesetzt */
	z-index: 90;                         /* unter Such-Overlay (9999), über Content */
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s var(--ws-ease);
}
.ws-mega.is-open { opacity: 1; pointer-events: auto; }

/* Milchglas-Backdrop: blurrt die restliche sichtbare Seite (wie Such-Overlay) */
.ws-mega__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ws-glass-bg);
	-webkit-backdrop-filter: var(--ws-glass-blur);
	        backdrop-filter: var(--ws-glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ws-mega__backdrop { background: var(--ws-glass-solid); }
}

/* Weißes Dropdown-Panel oben */
.ws-mega__panel {
	position: relative;
	background: var(--ws-white);
	border-top: 1px solid var(--ws-line);
	box-shadow: var(--ws-shadow);
	transform: translateY(-10px);
	transition: transform .22s var(--ws-ease);
}
.ws-mega.is-open .ws-mega__panel { transform: translateY(0); }

.ws-mega__inner {
	max-width: var(--ws-container);
	margin: 0 auto;
	/* Innenabstand oben/unten fix 45px (Produkte + Aktuelles/Messen) */
	padding: 45px max(24px, calc((100vw - var(--ws-container)) / 2 + 0px));
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.ws-mega__col { min-width: 0; }
.ws-mega__col + .ws-mega__col { border-left: 1px solid var(--ws-line); padding-left: 40px; }

/* Spaltenkopf — einheitlich zur CI-Headline (Hexagon + Uppercase + Roboto 700) */
.ws-mega__cat {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font: 700 20px/1.2 var(--ws-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ws-ink);
}
.ws-mega__hex { width: 19px; height: 19px; flex: none; color: var(--ws-blue); }
.ws-mega__desc {
	margin: 0 0 16px;
	font: 300 15px/1.55 var(--ws-font);
	color: var(--ws-muted);
	max-width: 46ch;
}

/* Produktliste — linksbündig, ohne Bilder, Hexagon-Bullet */
.ws-mega__list { list-style: none; margin: 0; padding: 0; }
.ws-mega__list li { margin: 0; }
.ws-mega__list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font: 400 15.5px/1.3 var(--ws-font);
	color: var(--ws-ink);
	text-decoration: none;
	transition: color .15s var(--ws-ease);
}
.ws-mega__list a::before {
	content: "";
	width: 9px; height: 10px;
	flex: none;
	background: var(--ws-blue);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	opacity: .5;
	transition: opacity .15s var(--ws-ease), transform .15s var(--ws-ease);
}
.ws-mega__list a:hover { color: var(--ws-blue); }
.ws-mega__list a:hover::before { opacity: 1; transform: scale(1.18); }

/* --- Aktuelles-&-Messen-Mega: 3 neueste Beiträge (kompakt, wie Startseite) --- */
.ws-mega__inner--news { grid-template-columns: 1fr; gap: 0; }
.ws-mega__newshead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.ws-mega__newshead .ws-mega__cat { margin: 0; }
.ws-mega__all {
	font: 600 14px/1 var(--ws-font);
	color: var(--ws-blue);
	text-decoration: none;
	white-space: nowrap;
}
.ws-mega__all:hover { color: var(--ws-blue-dark); }

.ws-news3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ws-news3__card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.ws-news3__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--ws-bg-soft) center / cover no-repeat;
	border: 1px solid var(--ws-line);
	border-radius: 0;                    /* eckig (CI) */
}
.ws-news3__cat {
	margin-top: 4px;
	font: 700 .72rem/1 var(--ws-font);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ws-blue);
}
.ws-news3__title { font: 700 15.5px/1.3 var(--ws-font); color: var(--ws-ink); }
.ws-news3__card:hover .ws-news3__title { color: var(--ws-blue); }
.ws-news3__more { margin-top: 2px; font: 600 13.5px/1 var(--ws-font); color: var(--ws-blue); }

/* Produkt-Spalten-Kopf (ws-eyebrow Heading + Beschreibung aus Template) */
.ws-eyebrow {
	font: 700 15px/1.2 var(--ws-font) !important;
	color: var(--ws-blue) !important;
	letter-spacing: .02em;
	margin: 0 0 4px;
}
.ws-eyebrow + .elementor-widget-text-editor,
.ws-eyebrow ~ * .elementor-widget-text-editor { margin-bottom: 8px; }

/* Produkt-Grid + Items
   (Elementor rendert Container-Custom-Classes wie .ws-pgrid NICHT zuverlässig
    — daher den Grid-Container über seine .ws-pitem-Kinder selektieren.) */
.e-con:has(> .ws-pitem) {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 14px 16px !important;
	width: 100% !important;
	align-content: start;
}
.e-con:has(> .ws-pitem) > .ws-pitem {
	width: auto !important;
	max-width: none !important;
}

.ws-pitem .elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}
.ws-pitem .elementor-image-box-img {
	width: 100%;
	margin: 0 !important;
}
.ws-pitem .elementor-image-box-img img {
	width: 100%;
	height: 84px;
	object-fit: cover;
	background: var(--ws-bg-soft);
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius);
	display: block;
}
.ws-pitem .elementor-image-box-content { width: 100%; }
.ws-pitem .elementor-image-box-title {
	font: 500 12px/1.35 var(--ws-font) !important;
	color: var(--ws-ink) !important;
	margin: 0 !important;
}
.ws-pitem {
	border-radius: var(--ws-radius);
	padding: 6px;
	transition: background .15s var(--ws-ease), transform .15s var(--ws-ease);
}
.ws-pitem:hover { background: var(--ws-bg-soft); transform: translateY(-2px); }
.ws-pitem:hover .elementor-image-box-title { color: var(--ws-blue) !important; }

/* Hover-Affordance am Trigger-Menüpunkt */
.ws-nav li.ws-mega-trigger > a { cursor: pointer; }

/* Mega-Trigger nur Desktop: eigenes Caret als Aufklapp-Indikator (Produkte +
   Aktuelles), nativen Elementor-Chevron + Aktuelles-Submenu unterdrücken. */
@media (min-width: 1025px) {
	.ws-nav li.ws-mega-trigger > a .sub-arrow { display: none !important; }
	.ws-nav li.ws-mega-trigger > a {
		display: inline-flex !important;
		align-items: center;
	}
	/* Caret = echtes <span> (per JS injiziert) — kein Pseudo, da Elementors
	   Pointer-::after sonst Positionierung/Border überschreibt. */
	.ws-nav li.ws-mega-trigger .ws-caret {
		display: inline-block;
		flex: none;
		margin-left: 8px;
		width: 0; height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
		transition: transform .2s var(--ws-ease);
	}
	.ws-nav li.ws-mega-trigger.is-active .ws-caret { transform: rotate(180deg); }
	.ws-nav li.ws-mega--news > ul.sub-menu { display: none !important; }
}
@media (max-width: 1024px) {
	.ws-nav li.ws-mega-trigger .ws-caret { display: none; }
}

/* Start-Menüpunkt als invertierter Home-Button: weißes Haus auf Blau.
   (Text bleibt für Screenreader im DOM.) */
.ws-nav li.menu-item-home > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;          /* Icon mittig im Button */
	width: 42px !important;           /* quadratisch, passt zur Zeilenhöhe (statt hoch+schmal) */
	height: 42px !important;
	padding: 0 !important;
	font-size: 0 !important;          /* "Start"-Text visuell ausblenden */
	background: var(--ws-blue) !important;
	border-color: var(--ws-blue) !important;
	color: #fff !important;           /* Icon (currentColor) → weiß */
}
.ws-nav li.menu-item-home > a:hover {
	background: var(--ws-blue-dark) !important;
	border-color: var(--ws-blue-dark) !important;
}
.ws-nav li.menu-item-home > a::before {
	content: "";
	display: inline-block;
	width: 18px; height: 18px;          /* Icon im quadratischen Home-Button */
	background: #fff !important;        /* weißes Icon, unabhängig von Elementors Textfarbe */
	-webkit-mask: var(--ws-icon-home) center / contain no-repeat;
	        mask: var(--ws-icon-home) center / contain no-repeat;
}

/* Hauptnavi (Desktop): rechtsbündig + Umrandung bei Hover/Active statt Unterstrich. */
@media (min-width: 1025px) {
	/* Logo links, Rest (Nav + Such-/Sprachblock) rechtsbündig:
	   Flex-Row auf flex-end + Auto-Margin am Logo schiebt alles nach rechts. */
	.elementor-element-70ecf877 > .e-con-inner { justify-content: flex-end !important; }
	.elementor-element-1d76c9fd { margin-right: auto !important; }
	.ws-nav .elementor-nav-menu { gap: 7px; justify-content: flex-end; }   /* Abstand + rechtsbündig */

	.ws-nav .elementor-nav-menu .elementor-item {
		padding: 9px 8px !important;
		border: 2px solid transparent;
		border-radius: 0;                 /* eckig (CI) */
		transition: border-color .18s var(--ws-ease), color .18s var(--ws-ease), background-color .18s var(--ws-ease);
	}
	.ws-nav .elementor-nav-menu .elementor-item:hover,
	.ws-nav .elementor-nav-menu .elementor-item.elementor-item-active,
	.ws-nav li.ws-mega-trigger.is-active > a {
		border-color: var(--ws-blue);
		color: var(--ws-blue);
	}
}

@media (max-width: 1024px) {
	.ws-mega { display: none !important; }   /* Mega-Menü nur Desktop; mobil greift Standard-Nav */
}

/* =========================================================================
   5. Hero-Slider  (Elementor-Pro "Slides"-Widget, Klasse .ws-hero-slider)
   ========================================================================= */
/* Vertikaler Swiper braucht eine feste Container-Höhe (sonst stapeln die Slides).
   Die Höhe kommt aus der Widget-Einstellung „slides_height" und wird per JS
   gesetzt (siehe functions.php) — daher hier nur overflow. */
.ws-hero-slider .elementor-main-swiper { overflow: hidden; }

/* Slide-Inhalt: links an der Elementor-Content-Breite (1240px) ausrichten */
.ws-hero-slider .swiper-slide-inner {
	align-items: flex-start !important;
	justify-content: center !important;
	text-align: left !important;
	padding: 0 max(24px, calc((100vw - 1240px) / 2)) !important;
}
/* Blaue Glas-Karte: KEINE abgerundeten Ecken, links bündig (Elementor
   zentriert die Content-Box trotz „links" — daher hart links erzwingen). */
.ws-hero-slider .swiper-slide-contents {
	background: rgba(18, 82, 154, 0.67);
	padding: 30px 36px;
	border-radius: 0;
	max-width: 520px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	-webkit-backdrop-filter: blur(2px);
	        backdrop-filter: blur(2px);
	box-shadow: 0 10px 34px rgba(8, 31, 56, 0.22);
}
/* Logo-Motiv: 3 große, ineinandergreifende Hexagone als Akzent über dem
   Hero-Bild (Ecke unten rechts, leicht über den Rand). Unter der Karte. */
.ws-hero-slider .swiper-slide-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ws-hexpattern);
	background-repeat: no-repeat;
	background-position: right -80px bottom -80px;
	background-size: 630px auto;
	opacity: 0.25;
	pointer-events: none;
}

.ws-hero-slider .elementor-slide-heading { margin-bottom: 12px; }
.ws-hero-slider .elementor-slide-description { margin-bottom: 22px; }
/* Button identisch zu den Produktbereich-Buttons (.pb-btn--primary) */
.ws-hero-slider .elementor-slide-button {
	background-color: #0b4a8f !important;
	border: 2px solid #0b4a8f !important;
	color: #FFFFFF !important;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	font-size: .9rem !important;
	font-weight: 600 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	transition: background-color .2s var(--ws-ease), border-color .2s var(--ws-ease);
}
.ws-hero-slider .elementor-slide-button:hover,
.ws-hero-slider .elementor-slide-button:focus {
	background-color: #1565c0 !important;
	border-color: #1565c0 !important;
	color: #FFFFFF !important;
}

/* Navigation: Hexagon-Pfeile ÜBEREINANDER, links unten an der Content-Breite.
   Slider slidet vertikal (Swiper-Richtung via JS auf vertical gesetzt). */
.ws-hero-slider .elementor-swiper-button {
	width: 52px;
	aspect-ratio: var(--ws-hex-ratio);
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;               /* Form/Farbe über Pseudo-Ebenen */
	border-radius: 0;
	color: #FFFFFF;
	top: auto !important;
	transform: none !important;
	right: auto !important;
	left: 10px !important;                 /* ganz an den linken Rand, 10px Abstand */
}
/* Weißer 2px-Rahmen am Hexagon: weißes Hexagon hinten, blaues 2px kleiner davor.
   (clip-path lässt keinen normalen border zu — daher 2 Ebenen.) */
.ws-hero-slider .elementor-swiper-button::before {
	content: ""; position: absolute; inset: 0;
	background: #FFFFFF; clip-path: var(--ws-hex); z-index: 0;
}
.ws-hero-slider .elementor-swiper-button::after {
	content: ""; position: absolute; inset: 2px;
	background: var(--ws-blue); clip-path: var(--ws-hex); z-index: 1;
	transition: background .2s var(--ws-ease);
}
.ws-hero-slider .elementor-swiper-button:hover::after { background: var(--ws-blue-dark); }
.ws-hero-slider .elementor-swiper-button-prev { bottom: 96px; }
.ws-hero-slider .elementor-swiper-button-next { bottom: 28px; }
/* Pfeil-Glyphen über die Pseudo-Ebenen + auf hoch (prev) / runter (next) drehen */
.ws-hero-slider .elementor-swiper-button i,
.ws-hero-slider .elementor-swiper-button svg { position: relative; z-index: 2; transform: rotate(90deg); }

/* Pagination-Dots aus — Navigation übernehmen die gestapelten Pfeile */
.ws-hero-slider .swiper-pagination { display: none !important; }

@media (max-width: 767px) {
	.ws-hero-slider .swiper-slide-inner { padding: 0 18px !important; }
	.ws-hero-slider .swiper-slide-contents { padding: 22px 24px; max-width: none; }
	.ws-hero-slider .elementor-slide-heading { font-size: 26px !important; }
	.ws-hero-slider .elementor-swiper-button { width: 42px; left: 8px !important; }
	.ws-hero-slider .elementor-swiper-button-prev { bottom: 78px; }
	.ws-hero-slider .elementor-swiper-button-next { bottom: 18px; }
}

/* =========================================================================
   6. Quick-Access-Sidebar  (schwebende Flyout-Leiste, rechts mittig)
   Hexagon = CSS clip-path (kein Bild), Icon = Font Awesome.
   ========================================================================= */
.ws-quickbar {
	position: fixed;
	right: 12px;              /* Abstand zum Bildschirmrand */
	top: 50%;
	transform: translateY(-50%);
	z-index: 9000;            /* über Content + Header, unter Such-Overlay (9999) */
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

.ws-quickbar__item {
	display: flex;
	align-items: stretch;
	text-decoration: none;
	cursor: pointer;
}

/* Ausklapp-Label (links, schiebt unter dem Hexagon hervor) */
.ws-quickbar__reveal {
	display: flex;
	align-items: center;
	white-space: nowrap;
	background: var(--ws-blue);
	color: #FFFFFF;
	font: 500 14.5px/1 var(--ws-font);
	letter-spacing: .02em;
	border-radius: var(--ws-radius) 0 0 var(--ws-radius);
	max-width: 0;
	padding: 0;
	margin-right: -14px;     /* hinter das Hexagon tucken */
	opacity: 0;
	overflow: hidden;
	transform: translateX(10px);
	transition: max-width .32s var(--ws-ease), opacity .25s var(--ws-ease),
	            padding .32s var(--ws-ease), transform .32s var(--ws-ease);
	box-shadow: 0 8px 24px rgba(8, 31, 56, 0.18);
}
.ws-quickbar__item:hover .ws-quickbar__reveal,
.ws-quickbar__item:focus-visible .ws-quickbar__reveal {
	max-width: 280px;
	opacity: 1;
	transform: translateX(0);
	padding: 0 26px 0 18px;
}

/* Hexagon-Badge */
.ws-quickbar__hex {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 58px;
	aspect-ratio: var(--ws-hex-ratio);   /* exakt regelmäßiges Hexagon (√3/2) */
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ws-blue);
	clip-path: var(--ws-hex);            /* pointy-top, flache Seiten links/rechts */
	color: #FFFFFF;
	font-size: 20px;
	transition: background .2s var(--ws-ease), transform .2s var(--ws-ease);
}
.ws-quickbar__item:hover .ws-quickbar__hex,
.ws-quickbar__item:focus-visible .ws-quickbar__hex {
	background: var(--ws-blue-dark);
	transform: scale(1.06);
}
.ws-quickbar__hex i { line-height: 1; }

/* dezenter „Pulse"-Hinweis beim Laden, einmalig */
@keyframes ws-qb-pop {
	0%   { transform: scale(0.6); opacity: 0; }
	100% { transform: scale(1);   opacity: 1; }
}
.ws-quickbar__item { animation: ws-qb-pop .35s var(--ws-ease) both; }
.ws-quickbar__item:nth-child(2) { animation-delay: .07s; }
.ws-quickbar__item:nth-child(3) { animation-delay: .14s; }

@media (max-width: 600px) {
	.ws-quickbar { gap: 10px; right: 8px; }
	.ws-quickbar__hex { width: 48px; font-size: 17px; }
	.ws-quickbar__reveal { font-size: 13px; }
}

/* =========================================================================
   7. Unterseiten — Karten-Feinschliff
   ========================================================================= */
/* Branchen-Kacheln (blaue Tiles, weißes SVG-Icon) */
.ws-branche-card { transition: background-color .2s var(--ws-ease), transform .2s var(--ws-ease); }
.ws-branche-card:hover { background-color: var(--ws-blue-dark) !important; transform: translateY(-3px); }
/* Hinweis: Branchen-Karten auf der Startseite laufen jetzt über das Custom-Widget
   „EHNES Branchen" (Plugin ehnes-produktbereich, .ehb) — eigenes Markup/CSS. */

/* News-/Messe-Karten: Bild kartenfüllend oben, Inhalt mit Innenabstand */
.ws-news-card { overflow: hidden; }
.ws-news-card .elementor-image-box-img { width: 100% !important; margin: 0 !important; }
.ws-news-card .elementor-image-box-img img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	background: var(--ws-bg-soft);
}
.ws-news-card .elementor-image-box-content { padding: 18px 22px 24px; }

/* =========================================================================
   8b. Einheitliche Seitenabstände im Content (Mobile/Tablet)
   Diese Elemente verlassen sich am Desktop auf die Container-Content-Breite,
   die es mobil nicht gibt → sonst kleben sie am Rand. Einheitlich 20px Gutter
   (wie Branchen/CTA/Kontakt).
   ========================================================================= */
@media (max-width: 1024px) {
	.eb,
	.ehb,
	.ec,
	.tl,
	.zc,
	.ws-bc,
	.elementor-widget-ehnes_produktbereich > .elementor-widget-container,
	.elementor-widget-ehnes_headline > .elementor-widget-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* =========================================================================
   9. Mobile-Navigation (Off-Canvas-Drawer) — Nav + Suche + Sprache
   ========================================================================= */
.ws-burger { display: none; }
.ws-mnav { display: none; }

@media (max-width: 1024px) {
	/* Natives Elementor-Burger/Dropdown + Floating Such-/Sprachblock deaktivieren */
	.ws-nav .elementor-menu-toggle,
	.ws-nav .elementor-nav-menu--dropdown,
	.elementor-element-6aef31dd { display: none !important; }

	/* Kompakter Mobile-Header (Logo + Burger in einer schlanken Reihe) */
	.elementor-location-header,
	.elementor-element-70ecf877,
	.elementor-element-70ecf877 > .e-con-inner { min-height: 0 !important; }
	.elementor-element-70ecf877 { padding-top: 14px !important; padding-bottom: 14px !important; }
	.elementor-element-70ecf877 > .e-con-inner { padding-top: 6px !important; padding-bottom: 6px !important; align-items: center; }
	/* Logo auf Mobile etwas größer (Eltern-Element + Bild, 100%-Deckelung lösen) */
	.elementor-location-header .elementor-element-1d76c9fd { width: 120px !important; max-width: 120px !important; }
	.elementor-location-header .elementor-element-1d76c9fd img { width: 120px !important; max-width: none !important; height: auto !important; }

	/* Eigener Hamburger – fix oben rechts, auf Logo-Höhe */
	.ws-burger {
		display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 5px; width: 46px; height: 46px; flex: none;
		position: fixed; top: 8px; right: 14px; z-index: 130;
		border: 0; background: transparent; cursor: pointer; padding: 0;
	}
	.ws-burger span { display: block; width: 26px; height: 2px; background: var(--ws-ink); transition: transform .25s var(--ws-ease), opacity .2s var(--ws-ease); }
	.ws-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ws-burger.is-active span:nth-child(2) { opacity: 0; }
	.ws-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Drawer */
	.ws-mnav { display: block; position: fixed; inset: 0; z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s var(--ws-ease); }
	.ws-mnav.is-open { opacity: 1; pointer-events: auto; }
	.ws-mnav__backdrop { position: absolute; inset: 0; background: var(--ws-glass-bg); -webkit-backdrop-filter: var(--ws-glass-blur); backdrop-filter: var(--ws-glass-blur); }
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ws-mnav__backdrop { background: var(--ws-glass-solid); } }
	.ws-mnav__panel {
		position: absolute; top: 0; right: 0; height: 100%; width: min(87vw, 360px);
		background: var(--ws-white); box-shadow: -14px 0 44px rgba(8, 31, 56, .18);
		transform: translateX(100%); transition: transform .28s var(--ws-ease);
		display: flex; flex-direction: column; padding: 16px 20px 26px; overflow-y: auto;
		font-family: var(--ws-font);
	}
	.ws-mnav.is-open .ws-mnav__panel { transform: translateX(0); }
	.ws-mnav__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
	.ws-mnav__title { font: 700 .8rem var(--ws-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-muted); }
	.ws-mnav__close { border: 0; background: none; font-size: 32px; line-height: 1; color: var(--ws-ink); cursor: pointer; padding: 0 4px; }

	.ws-mnav__search { display: flex; border: 1px solid var(--ws-line); margin-bottom: 18px; }
	.ws-mnav__search input { flex: 1; min-width: 0; border: 0; outline: none; padding: 12px 14px; font: 400 16px var(--ws-font); color: var(--ws-ink); background: transparent; }
	.ws-mnav__search button { flex: none; border: 0; background: var(--ws-blue); color: #fff; width: 52px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
	.ws-mnav__search svg { width: 20px; height: 20px; }

	.ws-mnav__list, .ws-mnav__list .sub-menu { list-style: none; margin: 0; padding: 0; }
	.ws-mnav__list a { display: block; text-decoration: none; }
	.ws-mnav__list > li > a { padding: 14px 2px; font: 600 17px var(--ws-font); color: var(--ws-ink); border-bottom: 1px solid var(--ws-line); }
	.ws-mnav__list > li > a:hover { color: var(--ws-blue); }
	.ws-mnav__list .sub-menu { padding-left: 14px; }
	.ws-mnav__list .sub-menu a { padding: 11px 2px; font: 400 15px var(--ws-font); color: var(--ws-muted); border-bottom: 1px solid var(--ws-line); }
	.ws-mnav__list .sub-arrow { display: none; }

	.ws-mnav__lang { margin-top: 22px; }
	.ws-mnav__label { margin: 0 0 8px; font: 700 .72rem var(--ws-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-muted); }
	.ws-mnav__langs { display: flex; flex-wrap: wrap; gap: 8px; }
	.ws-mnav__lang-a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ws-line); padding: 9px 13px; font: 500 14px var(--ws-font); color: var(--ws-ink); text-decoration: none; }
	.ws-mnav__lang-a.is-active { border-color: var(--ws-blue); color: var(--ws-blue); }
}

/* =========================================================================
   10. Content-Set / Wireframe-Seite (Body-Klasse .cs-grey)
   ========================================================================= */
.cs-img {
	display: flex; align-items: center; justify-content: center;
	background: #d4d8dd; color: #6b747d;
	font: 600 14px/1 var(--ws-font); letter-spacing: .04em;
	aspect-ratio: 16 / 9; width: 100%;
	border: 1px dashed #b3bbc4;
}
.cs-label {
	margin: 0 0 2px; font: 700 .72rem/1 var(--ws-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ws-muted);
}
.cs-grey .elementor-widget-heading .elementor-heading-title { font-family: var(--ws-font); color: var(--ws-ink); }
.cs-intro { font: 300 18px/1.6 var(--ws-font); color: var(--ws-muted); }

/* Alle Bilder auf dieser Seite → graue Dummys */
.cs-grey .eb-card__media,
.cs-grey .ws-news3__media,
.cs-grey .pb-tab__media,
.cs-grey .pb-product__thumb { background-image: none !important; background: #d4d8dd !important; }
.cs-grey .ws-pitem .elementor-image-box-img { background: #d4d8dd; }
.cs-grey .ws-pitem .elementor-image-box-img img,
.cs-grey .elementor-widget-image img { opacity: 0 !important; }
.cs-grey .elementor-widget-image .elementor-widget-container { background: #d4d8dd; min-height: 120px; }

/* =========================================================================
   11. Hero-Slider: Video als Slide-Hintergrund (kein Ken Burns)
   ========================================================================= */
.ws-hero-slider .ws-hero-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0; pointer-events: none;
}
/* Leichter Lese-Overlay nur auf dem Video-Slide (weißer Text bleibt lesbar) */
.ws-hero-slider .elementor-repeater-item-wsvideo1 .swiper-slide-bg::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(11, 33, 58, 0.35); z-index: 1; pointer-events: none;
}