/* ============================================================
   AL2 – Header Effects (Glasoptik + Scroll-Verhalten)
   - Milchglas-Hintergrund auf beiden Header-Zeilen (Desktop+Tablet / Mobile),
     von Anfang an aktiv, kein Umschalten
   - Eigenes position:fixed statt Elementors natives "Sticky"-Feature: das
     lief über ein eigenes, kontinuierlich aktives JS (Sticky-Effects-Modul),
     das alle meine Style-Änderungen an diesem Element (Breite, Padding,
     transform, ...) laufend zurücksetzt hat – daher hier deaktiviert
     (siehe _elementor_data) und durch schlichtes CSS ersetzt.
   - ~20% kleinere Headerhöhe beim Scrollen, per transform: scaleY() auf der
     kompletten Zeile – rein compositor-basiert, läuft butterweich per
     CSS-Transition. scaleY() allein staucht aber den Inhalt nur vertikal
     (Logo/Text wirken gequetscht), daher bekommt der Inhalts-Wrapper
     zusätzlich ein Gegen-scaleX(): geerbtes scaleY(0.8) vom Elternelement
     + eigenes scaleX(0.8) = am Ende gleichmäßig scale(0.8, 0.8) auf den
     Inhalt, ohne Verzerrung.
   ============================================================ */

header.elementor-location-header .elementor-element-131ac1ae,
header.elementor-location-header .elementor-element-703bb706 {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 999 !important;
	background: rgba(18, 18, 18, 0.62) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Fallback für Browser ohne backdrop-filter: volldeckend statt Glas-Look */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.elementor-location-header .elementor-element-131ac1ae,
	header.elementor-location-header .elementor-element-703bb706 {
		background: rgba(18, 18, 18, 0.94) !important;
	}
}

.elementor-element-131ac1ae,
.elementor-element-703bb706 {
	transform: scaleY(1);
	transform-origin: top center;
	transition: transform 0.35s ease;
}
.al2-header--scrolled .elementor-element-131ac1ae,
.al2-header--scrolled .elementor-element-703bb706 {
	transform: scaleY(0.8);
}

/* Gegen-Skalierung des Inhalts, damit die Proportionen erhalten bleiben.
   Desktop: ein gemeinsamer Wrapper (Logo + Menü). Mobile: drei einzelne
   Geschwister-Container (Menü-Icon, Logo, Warenkorb), da es dort keinen
   gemeinsamen Wrapper gibt. */
.elementor-element-ba59159,
.elementor-element-165ff843,
.elementor-element-4cadb3e6,
.elementor-element-597d74eb {
	transform: scaleX(1);
	transition: transform 0.35s ease;
}
.al2-header--scrolled .elementor-element-ba59159,
.al2-header--scrolled .elementor-element-165ff843,
.al2-header--scrolled .elementor-element-4cadb3e6,
.al2-header--scrolled .elementor-element-597d74eb {
	transform: scaleX(0.8);
}