/*
 * lx-contact 2.2: main navigation per Miro "Adaptierung Hauptnavigation".
 * Status pill + strip ([lx_status]) and header adjustments for Bricks
 * template 15 (BricksExtras header rows). Selectors start at #brx-header to
 * beat the per-element ID rules Bricks prints.
 */

#brx-header {
	/* Pill colours as the section badge ("Aktuell online …", section.css). */
	--lxk-online: hsl(145, 65%, 45%);
	--lxk-online-line: hsl(145, 55%, 42%);
	--lxk-away: hsl(36, 92%, 55%);
	--lxk-online-strip: #36b37e;
	--lxk-away-strip: #ff9f1c;
	--lxk-bar: rgba(0, 0, 0, 0.9);
	--lxk-bar-sticky: rgba(0, 0, 0, 0.75);
	--lxk-red: #b20b2b;
}

/* Slightly transparent bar as before 2.2 (the Bricks row settings): normal
   row 90% black, sticky row 75%. The overlay header would otherwise paint the
   normal row with --x-overlay-header-background (transparent). */
#brx-header .brxe-xheaderrow {
	--x-overlay-header-background: var(--lxk-bar);
	background: var(--lxk-bar) !important;
}

#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] {
	--x-overlay-header-background: var(--lxk-bar-sticky);
	background: var(--lxk-bar-sticky) !important;
}

/* ------------------------------------------------------------ status pill */

#brx-header .lxk-hs {
	position: absolute;
	z-index: 5;
	font-family: "Poppins", sans-serif;
}

/* Same format as the section badge: thin green outline, glowing dot with a
   slow pulse. */
#brx-header .lxk-hs__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 16px;
	border: 1px solid var(--lxk-online-line);
	border-radius: 20px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

#brx-header .lxk-hs__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lxk-online);
	box-shadow: 0 0 6px var(--lxk-online);
	animation: lxk-hs-pulse 2.4s ease-in-out infinite;
}

#brx-header .lxk-hs--away .lxk-hs__pill {
	border-color: var(--lxk-away);
}

#brx-header .lxk-hs--away .lxk-hs__dot {
	width: 12px;
	height: 12px;
	background: var(--lxk-away);
	box-shadow: 0 0 6px var(--lxk-away);
	animation-name: lxk-hs-pulse-away;
}

@keyframes lxk-hs-pulse {
	0%, 100% { box-shadow: 0 0 4px var(--lxk-online); }
	50% { box-shadow: 0 0 12px 2px var(--lxk-online); }
}

@keyframes lxk-hs-pulse-away {
	0%, 100% { box-shadow: 0 0 4px var(--lxk-away); }
	50% { box-shadow: 0 0 12px 2px var(--lxk-away); }
}

@media (prefers-reduced-motion: reduce) {
	#brx-header .lxk-hs__dot {
		animation: none;
	}
}

#brx-header .lxk-hs__label--short {
	display: none;
}

/* ------------------------------------------------------------------ strip */

#brx-header .lxk-hs__strip {
	position: absolute;
	box-sizing: border-box;
	padding: 6px 16px;
	background: var(--lxk-online-strip);
	color: #000;
	font-size: 14px;
	font-weight: 400; /* as the menu (client, 2026-10-27) */
	line-height: 1.4;
	text-align: center;
}

#brx-header .lxk-hs__strip[hidden] {
	display: none;
}

#brx-header .lxk-hs__strip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: var(--lxk-arrow-x, 50%);
	transform: translateX(-50%);
	border: 0 solid transparent;
	border-width: 0 10px 9px;
	border-bottom-color: var(--lxk-online-strip);
}

#brx-header .lxk-hs--away .lxk-hs__strip {
	background: var(--lxk-away-strip);
}

#brx-header .lxk-hs--away .lxk-hs__strip::before {
	border-bottom-color: var(--lxk-away-strip);
}

#brx-header .lxk-hs__inner {
	max-width: 1200px;
	margin: 0 auto;
}

#brx-header .lxk-hs__cta {
	color: inherit;
	text-decoration: underline;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- desktop */

@media (min-width: 992px) {
	/* Pill and VIP logo sit at the bar edges, outside the boxed container:
	   100% is the container width, so this lands 40px from the viewport edge. */
	#brx-header .lxk-hs {
		top: 50%;
		left: calc(40px - (100vw - 100%) / 2);
		transform: translateY(-50%);
	}

	/* Menu: three items left of the logo, three right, gap exactly centred
	   (equal columns), VIP-Club logo pinned to the right edge. */
	#brx-header .brxe-nav-menu.header-21__nav-menu {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: 0;
		transform: translateY(-50%);
	}

	#brx-header .header-21__nav-menu .bricks-nav-menu {
		display: grid;
		grid-template-columns: repeat(3, 120px) 200px repeat(3, 120px);
		justify-content: center;
		gap: 0 4px;
	}

	#brx-header .header-21__nav-menu .bricks-nav-menu > li:nth-child(3) {
		margin-right: 0;
	}

	/* Texts lean towards the logo: the grid is symmetric, so "Services" ends
	   as far left of the logo as "Honorare" starts right of it. Bricks' 30px
	   item margin and the logo's 6px margin / 8px padding would shift both. */
	#brx-header .header-21__nav-menu .bricks-nav-menu > li {
		margin-left: 0;
	}

	#brx-header .brxe-xheaderrow .brxe-logo {
		margin-left: 0;
		padding-right: 0;
	}

	#brx-header .header-21__nav-menu .bricks-nav-menu > li:nth-child(-n+3) {
		justify-self: end;
	}

	#brx-header .header-21__nav-menu .bricks-nav-menu > li:nth-child(n+4) {
		justify-self: start;
	}

	/* Column 4 is the logo gap. */
	#brx-header .header-21__nav-menu .bricks-nav-menu > li:nth-child(4) {
		grid-column: 5;
	}

	#brx-header .bricks-nav-menu .lxk-menu-vip {
		position: absolute;
		top: 50%;
		right: calc(40px - (100vw - 100%) / 2);
		transform: translateY(-50%);
	}

	#brx-header .bricks-nav-menu .lxk-menu-vip > a {
		display: block;
		width: 96px;
		height: 46px;
		background: center / contain no-repeat;
		font-size: 0;
		color: transparent;
	}

	/* Normal row: the tall bar, logo fully inside it. */
	#brx-header .brxe-xheaderrow > .x-header_wrap {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#brx-header .brxe-xheaderrow .bricks-site-logo {
		height: 60px;
	}

	/* Sticky row: compact bar with the red line. */
	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] {
		border-bottom: 2px solid var(--lxk-red);
	}

	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] > .x-header_wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] .bricks-site-logo {
		height: 40px;
	}
}

/* Long pill label only where it clears the menu. */
@media (min-width: 992px) and (max-width: 1599px) {
	#brx-header .lxk-hs__label--long {
		display: none;
	}

	#brx-header .lxk-hs__label--short {
		display: inline;
	}
}

/* Narrow desktops: tighter menu, pill shrinks to its dot. */
@media (min-width: 992px) and (max-width: 1279px) {
	#brx-header .header-21__nav-menu .bricks-nav-menu {
		grid-template-columns: repeat(3, 94px) 170px repeat(3, 94px);
		gap: 0;
		font-size: 14px;
	}

	#brx-header .bricks-nav-menu .lxk-menu-vip > a {
		width: 72px;
		height: 36px;
	}

	#brx-header .lxk-hs__pill {
		padding: 8px;
	}

	/* Label stays readable for screen readers. */
	#brx-header .lxk-hs__label--short {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 991px) {
	/* Two-line bar at every mobile/tablet width: logo line, then the pill on
	   its own line. The container spans the whole bar (its children are all
	   absolute), so the hamburger centres on the full height. Bricks' 35-40px
	   row padding above 478px is dropped. */
	#brx-header .brxe-xheaderrow {
		padding-top: 0;
		padding-bottom: 0;
	}

	#brx-header .brxe-xheaderrow .brxe-container {
		box-sizing: border-box;
		height: 100px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Logo stays on the first line (Bricks centres it at top: 50%). */
	#brx-header .brxe-xheaderrow .brxe-logo {
		top: 30px;
	}

	#brx-header .brxe-xheaderrow .bricks-site-logo {
		height: 60px;
	}

	/* Hamburger centred on the whole bar. No transform here: it would trap
	   Bricks' fixed mobile menu overlay. */
	#brx-header .brxe-xheaderrow .brxe-nav-menu {
		top: calc(50% - 8px);
		margin-top: 0;
	}

	/* Mobile menu opens below the (taller) bar. */
	#brx-header .brxe-xheaderrow .bricks-mobile-menu-wrapper {
		top: 100px;
	}

	#brx-header .lxk-hs {
		top: 60px;
		left: 50%;
		transform: translateX(-50%);
	}

	/* Sticky: compact, red line under the pill line. */
	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] {
		border-bottom: 2px solid var(--lxk-red);
	}

	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] .brxe-container {
		height: 88px;
	}

	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] .brxe-logo {
		top: 25px;
	}

	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] .bricks-site-logo {
		height: 44px;
	}

	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] .lxk-hs {
		top: 50px;
	}

	#brx-header .brxe-xheaderrow[data-x-sticky-active*=true] .bricks-mobile-menu-wrapper {
		top: 90px;
	}

	#brx-header .lxk-hs__label--long {
		display: none;
	}

	#brx-header .lxk-hs__label--short {
		display: inline;
	}

	#brx-header .lxk-hs__strip {
		font-size: 13px;
	}

	/* More room between header (+ pill) and the H1 (client note). */
	body:has(#brx-header .lxk-hs) .lx-hero .lx-hero-first-line {
		margin-top: 56px;
	}
}

/* Contact target clears the fixed header when scrolled to. */
#kontakt,
.lxk-section {
	scroll-margin-top: 110px;
}