/* =========================================================
   ReGaWatt Header (Theme-Part header/v1) – Figma 5:514 + 3:78
   Tokens: weiss #fff | Logo-Block #f4f5f2 | Text #4a2e15 | orange #f48520
   Font-Sizes rem, Spacing px.
   ========================================================= */

.rw_header {
	--rw-gutter: 70px;
	--rw-logo-zone: 298px;   /* Claim + erstes Menue-Item in einer Flucht (Topbar + Nav teilen sich den Wert) */
	display: contents;       /* kein eigener Kasten -> Topbar scrollt weg, nur .rw_nav bleibt sticky (Containing-Block = body) */
}
.rw_header.is-stuck .rw_nav { box-shadow: 0 2px 16px rgba(39, 27, 17, 0.10); }

/* ---------- Top-Leiste (scrollt mit dem Inhalt weg) ---------- */
.rw_topbar { background-color: #f4f5f2; position: relative; z-index: 999; }
.rw_topbar_inner {
	width: calc(100% - var(--rw-gutter) * 2);   /* gleicher Container wie der Footer */
	margin: 0 auto;
	padding: 8px 0 7px var(--rw-logo-zone);      /* Claim in Flucht mit erstem Menue-Item */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: 0.9375rem;           /* 15px */
	line-height: 25px;
}
.rw_topbar_claim,
.rw_topbar_contact,
.rw_topbar a { font-size: 0.9375rem !important; }   /* 15px, gegen Elementor-Kit */
.rw_topbar_claim { margin: 0; color: #685a51; }
.rw_topbar_claim strong { color: #4a2e15; font-weight: 700; }
.rw_topbar_contact { margin: 0; display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.rw_topbar_contact a { color: #4a2e15 !important; text-decoration: none !important; }
.rw_topbar_contact a:hover { color: #f48520 !important; }
.rw_topbar_sep { color: rgba(74, 46, 21, 0.3); }

/* ---------- Haupt-Navi (bleibt beim Scrollen oben kleben) ---------- */
.rw_nav { position: sticky; top: 0; z-index: 1000; background-color: #fff; }
.rw_nav_inner {
	width: calc(100% - var(--rw-gutter) * 2);   /* gleicher Container wie der Footer */
	margin: 0 auto;
	display: flex;
	align-items: center;
	min-height: 100px;
	position: relative;
	padding-left: var(--rw-logo-zone);           /* Menue beginnt in Flucht mit dem Claim */
}

/* Logo-Block (hellgrau): absolut, blutet zur Viewport-Kante, Logo ragt oben ueber.
   Absolut => verschiebt den Menue-Start nicht (Flucht bleibt = --rw-logo-zone). */
.rw_logo_block {
	position: absolute;
	left: calc(var(--rw-gutter) * -1);
	top: 0;
	bottom: 0;
	width: 265px;   /* Figma: Panel bis x265 -> 66px rechts vom Logo, 105px vor dem Menue */
	padding-left: var(--rw-gutter);
	background-color: #f4f5f2;
	display: flex;
	align-items: flex-end;
	z-index: 1;
}
.rw_logo { display: block; line-height: 0; }
.rw_logo img,
.rw_logo svg,
.rw_logo_svg {
	display: block;
	width: 129px;
	height: 129px;
	margin-top: -29px;   /* Top-Overhang */
	transition: width .25s ease, height .25s ease, margin-top .25s ease;
}

/* Beim Scrollen (Topbar weg, Nav klebt): Logo schrumpft + zentriert sich
   mit Abstand im Panel, statt am Rand zu kleben. Nur Desktop (Panel-Kontext). */
@media screen and (min-width: 1420px) {
	/* Vorm Scroll: Logo linksbuendig, Abstand links 70px / rechts 65px (Panel 264px). */
	.rw_logo_block { width: 264px; padding-left: 70px; transition: padding-left .25s ease; }
	/* Beim Scrollen: Logo schrumpft und bleibt mittig im Panel (264-72)/2 = 96px je Seite.
	   Zentrierung ueber padding-left (statt justify-content) -> weicher Uebergang. */
	.rw_header.is-stuck .rw_logo_block { padding-left: 96px; align-items: center; }
	.rw_header.is-stuck .rw_logo img,
	.rw_header.is-stuck .rw_logo svg,
	.rw_header.is-stuck .rw_logo_svg { width: 72px; height: 72px; margin-top: 0; }
}

/* ---------- Desktop-Menue ---------- */
.rw_nav_menu { display: flex; align-items: center; }
/* Gap 37px auf grossen Screens; skaliert fluide bis ~20px Richtung 1420px,
   damit die 5 langen Menuepunkte + CTA auch auf kleineren Desktops passen. */
.rw_menu { display: flex; align-items: center; gap: clamp(20px, calc(20px + (100vw - 1420px) * 0.12143), 37px); list-style: none; margin: 0; padding: 0; }
.rw_menu > li { position: relative; }
.rw_menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 38px 0;                /* grosse Klickflaeche in der 100px-Leiste */
	color: #4a2e15 !important;
	font-size: 1rem;                /* 16px */
	font-weight: 400;
	line-height: 25px;
	text-decoration: none !important;
	white-space: nowrap;
}
.rw_menu > li > a:hover { color: #f48520 !important; }
/* Dropdown-Caret: flaches gefuelltes Dreieck (Figma 8x4) */
.rw_menu > li.menu-item-has-children > a::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform .2s ease;
}
.rw_menu > li.menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* Dropdown-Panel */
.rw_menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -20px;
	min-width: 250px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background-color: #fff;
	box-shadow: 0 12px 28px rgba(39, 27, 17, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 60;
}
.rw_menu > li:hover > .sub-menu,
.rw_menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.rw_menu .sub-menu a {
	display: block;
	padding: 9px 24px;
	color: #4a2e15 !important;
	font-size: 1rem;                /* 16px */
	line-height: 22px;
	text-decoration: none !important;
	white-space: nowrap;
}
.rw_menu .sub-menu a:hover { color: #f48520 !important; background-color: #f4f5f2; }

/* Active State */
.rw_menu > li.current-menu-item > a,
.rw_menu > li.current-menu-ancestor > a,
.rw_menu .sub-menu li.current-menu-item > a { color: #f48520 !important; font-weight: 600; }

/* ---------- CTA-Button (nutzt globalen .mM_links-Primary-Button) ---------- */
.rw_nav_cta { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.rw_nav_cta .mM_links_container,
.rw_nav_cta .mM_links,
.rw_nav_cta .mM_link_container { margin: 0; padding: 0; }
.rw_nav_cta .mM_links a { white-space: nowrap; }

/* ---------- Burger (nur mobil) ---------- */
.rw_burger {
	display: none !important;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	margin-left: auto;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}
.rw_burger span { display: block; width: 26px; height: 2px; background-color: #4a2e15; margin: 0 auto; transition: transform .25s ease, opacity .25s ease; }
.rw_header.is-menu-open .rw_burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rw_header.is-menu-open .rw_burger span:nth-child(2) { opacity: 0; }
.rw_header.is-menu-open .rw_burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile-Overlay ---------- */
.rw_mobile { display: none; }

/* =========================================================
   Responsive – Burger ab <=991px
   ========================================================= */
@media screen and (max-width: 1200px) {
	.rw_header { --rw-gutter: 40px; --rw-logo-zone: 215px; }
	.rw_menu { gap: 22px; }
}

@media screen and (max-width: 1419px) {
	.rw_header { --rw-gutter: 40px; }
	/* Mobil: Telefon-/Mail-Leiste ausblenden */
	.rw_topbar { display: none; }
	.rw_nav_menu,
	.rw_nav_cta { display: none; }
	/* Kompakter Mobile-Header: kein Menue-Offset, kein graues Panel,
	   Logo gross genug und mit Luft ober-/unterhalb. */
	.rw_nav_inner { min-height: 124px; align-items: center; padding-left: 0; }
	.rw_logo_block { width: auto; padding-right: 24px; align-items: center; background-color: transparent; }
	.rw_logo img,
	.rw_logo svg,
	.rw_logo_svg { width: 88px; height: 88px; margin-top: 0; }
	.rw_burger { display: flex !important; }

	/* Overlay faehrt von links herein */
	.rw_mobile {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background-color: #fff;
		padding: 150px var(--rw-gutter) 40px;
		overflow-y: auto;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility .35s;
		will-change: transform;
	}
	.rw_header.is-menu-open .rw_mobile { transform: translateX(0); visibility: visible; }

	.rw_menu_mobile { list-style: none; margin: 0 0 32px; padding: 0; }
	.rw_menu_mobile > li { border-bottom: 1px solid rgba(74, 46, 21, 0.18); }
	.rw_menu_mobile > li:first-child { border-top: 1px solid rgba(74, 46, 21, 0.18); }
	.rw_menu_mobile > li > a {
		position: relative;
		display: block;
		padding: 17px 32px 17px 0;
		color: #4a2e15 !important;
		font-size: 1.0625rem;
		font-weight: 400;
		text-decoration: none !important;
	}
	.rw_menu_mobile > li.current-menu-item > a,
	.rw_menu_mobile > li.current-menu-ancestor > a { color: #f48520 !important; }
	.rw_menu_mobile > li.menu-item-has-children > a::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 4px;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		transition: transform .25s ease;
	}
	.rw_menu_mobile > li.is-open.menu-item-has-children > a::after { transform: translateY(-30%) rotate(-135deg); }
	.rw_menu_mobile .sub-menu { display: none; list-style: none; margin: 0; padding: 0 0 14px; }
	.rw_menu_mobile > li.is-open > .sub-menu { display: block; }
	.rw_menu_mobile .sub-menu a {
		display: block;
		padding: 7px 0;
		color: #4a2e15 !important;
		font-size: 1rem;
		text-decoration: none !important;
	}
	.rw_menu_mobile .sub-menu a:hover { color: #f48520 !important; }

	.rw_mobile_cta .mM_links_container,
	.rw_mobile_cta .mM_links,
	.rw_mobile_cta .mM_link_container { margin: 0; padding: 0; }
	.rw_mobile_contact { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; }
	.rw_mobile_contact a { color: #4a2e15 !important; text-decoration: none !important; font-size: 0.875rem !important; }
}

@media screen and (max-width: 600px) {
	.rw_header { --rw-gutter: 24px; }
	.rw_topbar_contact .rw_topbar_sep { display: none; }
	.rw_topbar_contact { flex-direction: column; gap: 0; align-items: flex-end; }
}