/* =========================================================
   BRANDO24 – Header / Navigation
   Ziel: Gemini-Design mit nativer Flatsome-Header-Engine.
   ========================================================= */

.brando24-sanitaercontainer {
	--brando-navy: #0b1220;
	--brando-navy-2: #111b2e;
	--brando-text: #263244;
	--brando-muted: #64748b;
	--brando-surface: #f4f6f8;
	--brando-border: #e5e9ef;
	--brando-orange: #e87500;
	--brando-orange-hover: #f28a14;
	--brando-white: #ffffff;
	--brando-radius-pill: 999px;
	--brando-radius-card: 16px;
	--brando-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.10);
}

/* ---------- Gesamter Header ---------- */
.brando24-sanitaercontainer #header {
	background: var(--brando-white);
}

.brando24-sanitaercontainer #header .header-wrapper {
	background: var(--brando-white);
}

/* ---------- Topbar ---------- */
.brando24-sanitaercontainer #top-bar {
	background: var(--brando-navy);
	border: 0;
	min-height: 30px;
}

.brando24-sanitaercontainer #top-bar .flex-row {
	min-height: 30px;
}

.brando24-sanitaercontainer #top-bar,
.brando24-sanitaercontainer #top-bar a,
.brando24-sanitaercontainer #top-bar .nav > li > a,
.brando24-sanitaercontainer #top-bar .html {
	color: rgba(255, 255, 255, 0.86);
	font-size: 12px;
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.brando24-sanitaercontainer #top-bar .nav > li {
	margin: 0;
}

.brando24-sanitaercontainer #top-bar .nav > li > a,
.brando24-sanitaercontainer #top-bar .html {
	padding-top: 6px;
	padding-bottom: 6px;
}

.brando24-sanitaercontainer #top-bar .flex-center {
	text-align: center;
}

/* ---------- Main Header ---------- */
.brando24-sanitaercontainer #masthead.header-main {
	background: var(--brando-white);
	border: 0;
}

.brando24-sanitaercontainer #masthead .header-inner {
	min-height: 82px;
	align-items: center;
}

.brando24-sanitaercontainer #masthead .top-divider {
	display: none;
}

/* Logo bewusst über Flatsome Theme Options steuerbar lassen. */
.brando24-sanitaercontainer #logo img {
	object-fit: contain;
}

/* ---------- Desktop Navigation als gemeinsame Pill ---------- */
.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main {
	background: var(--brando-surface);
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: var(--brando-radius-pill);
	padding: 5px 7px;
	min-height: 50px;
	align-items: center;
	gap: 1px;
	white-space: nowrap;
}

.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main > li {
	margin: 0;
}

.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main > li > a.nav-top-link {
	min-height: 38px;
	padding: 0 12px;
	border-radius: var(--brando-radius-pill);
	color: var(--brando-text);
	font-size: 13px;
	font-weight: 650;
	line-height: 38px;
	letter-spacing: -0.01em;
	text-transform: none;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main > li:hover > a.nav-top-link,
.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main > li.active > a.nav-top-link,
.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main > li.current-menu-item > a.nav-top-link,
.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main > li.current-menu-ancestor > a.nav-top-link {
	background: var(--brando-white);
	color: var(--brando-navy);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.brando24-sanitaercontainer #masthead .nav-top-link .icon-angle-down {
	font-size: .8em;
	margin-left: 5px;
	opacity: .65;
}


/* Angebotsbutton ist falsch ausgerichtet */

.brando24-sanitaercontainer #header
.header-button .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;
	padding: 0 20px;

	font-size: 16px !important;
	font-weight: 700;
	line-height: 1;

	border-radius: 999px;
	white-space: nowrap;
}

/* Abstand zwischen Navigation und Angebotsbutton */
.brando24-sanitaercontainer #header
.header-main .flex-right {
	margin-left: 14px;
}

/* =========================================================
   Hauptnavigation – Dropdown geöffnet
   Google/Gemini Active State
   ========================================================= */

/* Pfeil im normalen Zustand */
.brando24-sanitaercontainer #header
.header-nav-main > li.has-dropdown > a.nav-top-link .icon-angle-down {
	color: #8ca0ba;
	font-size: 15px;
	transition:
		color .18s ease,
		transform .18s ease;
	transform-origin: center;
}

/* Geöffneter / aktiver Dropdown-Menüpunkt */
.brando24-sanitaercontainer #header
.header-nav-main > li.has-dropdown:hover > a.nav-top-link,
.brando24-sanitaercontainer #header
.header-nav-main > li.has-dropdown:focus-within > a.nav-top-link {
	background: #ffffff;
	border-radius: 999px;
	box-shadow:
		0 1px 3px rgba(15, 23, 42, .08),
		0 4px 12px rgba(15, 23, 42, .06);
	color: var(--brando-navy);
}

/* Pfeil geöffnet: orange + nach oben drehen */
.brando24-sanitaercontainer #header
.header-nav-main > li.has-dropdown:hover > a.nav-top-link .icon-angle-down,
.brando24-sanitaercontainer #header
.header-nav-main > li.has-dropdown:focus-within > a.nav-top-link .icon-angle-down {
	color: var(--brando-orange);
	transform: rotate(180deg) scale(1.18);
	font-weight: 700;
}

.brando24-sanitaercontainer #header
.header-nav-main > li.has-dropdown > a.nav-top-link {
	transition:
		background-color .18s ease,
		box-shadow .18s ease,
		color .18s ease;
}

/* ---------- Header CTA ---------- */
.brando24-sanitaercontainer #masthead .flex-right .header-button,
.brando24-sanitaercontainer #masthead .flex-right .button {
	margin: 0;
}

.brando24-sanitaercontainer #masthead .flex-right .header-button .button,
.brando24-sanitaercontainer #masthead .flex-right > .header-nav-main .button,
.brando24-sanitaercontainer #masthead .flex-right .button {
	background: var(--brando-orange) !important;
	border-color: var(--brando-orange) !important;
	border-radius: var(--brando-radius-pill) !important;
	box-shadow: none !important;
	color: var(--brando-white) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	min-height: 46px;
	padding: 0 20px;
	text-transform: none;
}

.brando24-sanitaercontainer #masthead .flex-right .header-button .button:hover,
.brando24-sanitaercontainer #masthead .flex-right .button:hover {
	background: var(--brando-orange-hover) !important;
	border-color: var(--brando-orange-hover) !important;
	transform: translateY(-1px);
}

/* ---------- Sticky ---------- */
.brando24-sanitaercontainer .stuck #masthead,
.brando24-sanitaercontainer .header-wrapper.stuck #masthead {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* ---------- Mobile ---------- */
.brando24-sanitaercontainer .mobile-nav > li > a {
	color: var(--brando-navy);
}

.brando24-sanitaercontainer .mobile-nav .nav-icon a {
	border-radius: 10px;
}

@media (max-width: 1270px) {
	.brando24-sanitaercontainer #masthead .flex-left > .header-nav-main > li > a.nav-top-link {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 12.5px;
	}
}

@media (max-width: 849px) {
	.brando24-sanitaercontainer #masthead .header-inner {
		min-height: 68px;
	}

	.brando24-sanitaercontainer #top-bar {
		min-height: 0;
	}
}