/* ==========================================================================
   LIEPS COMPONENT – HEADER LOGO
   Aus der bisherigen custom.css unverändert ausgelagert.
   ========================================================================== */

/* ==========================================================================
   Header-Logo

   Unterseiten: statisch.
   Startseite (#page1): zunächst verborgen; JavaScript blendet es nach
   Abschluss der Hero-Szene ein.

   Kontrast:
   - helle Fläche        -> Originalfarbe
   - dunkle Fläche       -> weiß
   - Navigation offen    -> weiß
   - Kontakt offen       -> weiß
   ========================================================================== */

header.header .logo {
	--logo-height: 40px;
	--logo-left: 20px;

	position: absolute;
	top: calc((var(--site-header-height) - var(--logo-height)) / 2);
	left: var(--logo-left);
	z-index: 1001;

	display: block;
	line-height: 0;

	transform-origin: center center;
	filter: none;

	transition:
		filter .3s ease,
		opacity .3s ease;
}

header.header .logo img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: none;
	max-height: var(--logo-height);
}

/* Startseite: Steuerung zunächst durch Hero-JavaScript */
#page1 header.header .logo {
	visibility: hidden;
}

/* Dunkle Fläche unter den Header-Controls */
header.header:has(.head .contact.is-over-dark-surface) .logo,
header.header:has(.head .ham.is-over-dark-surface) .logo {
	filter: brightness(0) invert(1);
}

/* Hauptnavigation / Kontakt geöffnet */
header.header.clicked .logo,
header.header.contact-open .logo {
	filter: brightness(0) invert(1) !important;
}

/* Auf der Startseite muss das Logo in Overlays sichtbar sein */
#page1 header.header.clicked .logo,
#page1 header.header.contact-open .logo {
	visibility: visible !important;
	opacity: 1 !important;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

/* SM >= 576px */
@media (min-width: 576px) {
	header.header .logo {
		--logo-height: 40px;
		--logo-left: 24px;
	}
}

/* MD >= 768px */
@media (min-width: 768px) {
	header.header .logo {
		--logo-height: 50px;
		--logo-left: 32px;
	}
}

/* LG >= 992px */
@media (min-width: 992px) {
	header.header .logo {
		--logo-height: 60px;
		--logo-left: 40px;
	}
}

/* XL >= 1200px */
@media (min-width: 1200px) {
	header.header .logo {
		--logo-height: 60px;
		--logo-left: 40px;
	}
}

/* XXL >= 1400px */
@media (min-width: 1400px) {
	header.header .logo {
		--logo-height: 60px;
	}
}