/* =========================================================
   Header (hone, Figma Navi 1:665)
   Tokens: Leiste #1f1f1f | gold #a5936f | weiss #fff
   Font: cresta | Font-Sizes in rem (Basis 20px), Spacing in px.
   Aufbau: Logo | Trennlinie | Services-Menue | Kontakt-Button |
   Trennlinie | Burger (vorerst ohne Funktion).
   ========================================================= */

header.btw_header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000; /* ueber der m44-Infobox (z-index 999) */
	display: block !important; /* Altseiten-CSS: header { display:none !important } unter 992px */
	height: 135px;
	padding: 0;               /* Altseiten-CSS setzt header { padding: 35px 85px 0 } */
	background-color: #1f1f1f;
}

.btw_header .btw_header_inner {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 80px;
	box-sizing: border-box;
}

/* ---------- Logo ---------- */
.btw_header .btw_header_logo {
	flex: 0 0 auto;
	display: block;
}

.btw_header .btw_header_logo img {
	display: block;
	width: 210px;
	height: auto;
}

/* ---------- Trennlinien (Figma: 1px, 56px hoch) ---------- */
.btw_header .btw_header_sep {
	flex: 0 0 auto;
	width: 1px;
	height: 56px;
	margin: 0 37px 0 42px;
	background-color: rgba(255, 255, 255, 0.3);
}

.btw_header .btw_header_sep_burger {
	margin: 0 37px 0 43px;
}

/* ---------- Services-Menue ---------- */
.btw_header .btw_header_nav {
	flex: 1 1 auto;
	min-width: 0;
}

.btw_header .btw_header_menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Alt-Theme/Bootstrap gibt li ein Padding — hier neutralisieren, damit die
   34px-gap das echte Item-Spacing bestimmt (frueher per custom.js inline gesetzt) */
.btw_header .btw_header_menu li {
	margin: 0;
	padding: 0;
}

.btw_header .btw_header_menu li a {
	font-size: 0.75rem;        /* 15px (Basis 20px) */
	line-height: 15px;
	letter-spacing: 0.375px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: color .3s;
}

.btw_header .btw_header_menu li a:hover,
.btw_header .btw_header_menu li.current-menu-item a {
	color: #a5936f;
}

/* Beim Hover NICHT die Font-Weight aendern (style.css setzt sonst 500 -> Layout-Shift).
   Alle Nav-Items bleiben bei 400 (Ruhe-Gewicht), nur die Farbe wechselt auf Gold. */
.btw_header .btw_header_menu li a:hover,
.btw_header .btw_header_menu li.current-menu-item a:hover {
	font-weight: 400;
}

/* ---------- Kontakt-Button (hone Primary, Optik wie project.css-Buttons) ---------- */
.btw_header .btw_header_kontakt {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 41px;
	padding: 0 31px;
	margin-left: 20px;
	background-color: #a5936f;
	font-size: 0.75rem;        /* 15px */
	font-weight: 700;
	letter-spacing: 0.375px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: background-color .3s;
}

.btw_header .btw_header_kontakt::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid currentColor;
}

.btw_header .btw_header_kontakt:hover {
	background-color: #8f7e5d;
	color: #fff;
}

/* ---------- Burger (vorerst ohne Funktion) ---------- */
.btw_header .btw_header_burger {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 30px;
	padding: 6px 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.btw_header .btw_header_burger span {
	display: block;
	width: 30px;
	height: 2px;
	background-color: #fff;
	transition: background-color .3s;
}

.btw_header .btw_header_burger:hover span {
	background-color: #a5936f;
}

/* ---------- Altseiten: fixen Header clearen (alter hw-header war 100px) ---------- */
body .hw-header-bild {
	margin-top: 135px;
}

/* Alte ShiftNav-Toggle-Leiste (Mobil) wuerde neben dem neuen Burger doppelt
   erscheinen — ausblenden, bis das neue Burger-Menue steht */
#shiftnav-toggle-main {
	display: none !important;
}

/* ---------- Responsive ----------
   cresta uppercase laeuft breit: alle 5 Links passen erst ab ~1850px
   in voller Groesse. 1560-1849 kompakt, darunter in den Burger. */
@media (max-width: 1849px) {
	.btw_header .btw_header_inner {
		padding: 0 40px;
	}

	.btw_header .btw_header_menu {
		gap: 0 20px;
	}

	.btw_header .btw_header_menu li a {
		font-size: 0.65rem;    /* 13px */
	}

	.btw_header .btw_header_sep {
		margin: 0 20px;
	}

	.btw_header .btw_header_logo img {
		width: 180px;
	}
}

@media (max-width: 1559px) {
	/* Services wandern spaeter ins Burger-Menue */
	.btw_header .btw_header_nav,
	.btw_header .btw_header_sep:not(.btw_header_sep_burger) {
		display: none;
	}

	.btw_header .btw_header_kontakt {
		margin-left: auto;
	}
}

@media (max-width: 1199px) {
	header.btw_header {
		height: 100px;
	}

	body .hw-header-bild {
		margin-top: 100px;
	}

	/* Menue-Overlay buendig unter die (hier niedrigere) Nav-Bar -> kein Spalt.
	   body-Praefix, damit es die spaeter im File stehende Basis-Regel (top:135px) schlaegt. */
	body .btw_menu_overlay {
		top: 100px;
	}
}

@media (max-width: 575px) {
	header.btw_header {
		height: 80px;
	}

	/* Menue-Overlay buendig unter die 80px-Nav-Bar -> kein Spalt */
	body .btw_menu_overlay {
		top: 80px;
	}

	.btw_header .btw_header_inner {
		padding: 0 20px;
	}

	.btw_header .btw_header_logo img {
		width: 150px;
	}

	.btw_header .btw_header_kontakt {
		display: none;
	}

	.btw_header .btw_header_sep_burger {
		margin-left: auto;
		visibility: hidden;    /* Burger rechts ausrichten, Linie ohne Kontakt-Button sinnlos */
	}

	body .hw-header-bild {
		margin-top: 80px;
	}

	/* Overlay-Fussleiste bis 280px: Adresse darf umbrechen (nowrap sprengte
	   sonst die Leiste), Mittelgruppe fuellt die volle Breite und wrappt darin.
	   Verhindert zugleich horizontalen Seiten-Overflow (die Leiste ist fixed
	   und zaehlt in Chrome zur scrollWidth).
	   body-Praefix: schlaegt die spaeter im File stehenden Basis-Regeln
	   (.btw_menu_bar_adresse{nowrap}, .btw_menu_bar_middle{flex:0 0 auto}). */
	body .btw_menu_bar_adresse {
		white-space: normal;
	}

	body .btw_menu_bar_middle {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* =========================================================
   Overlay-Menue (Figma 00_Menü 83:2)
   Vollflaechig unter der 135px-Leiste: links Menue-Liste
   (Zeilen 97px, Trennlinien #6e6e6e, Hover/aktiv gold mit
   Pfeil), rechts Bildflaeche (Bild wechselt pro Menuepunkt,
   40% Opacity auf #1f1f1f), unten 53px-Kontaktleiste.
   ========================================================= */
.btw_menu_overlay {
	position: fixed;
	top: 135px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	background-color: #1f1f1f;
	border-top: 1px solid #6e6e6e;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

body.btw_menu_open .btw_menu_overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

body.btw_menu_open {
	overflow: hidden;
}

/* Bei offenem Overlay die Navbar-Menuepunkte ausblenden */
body.btw_menu_open .btw_header .btw_header_menu {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.btw_menu_columns {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

.btw_menu_left {
	flex: 0 0 50.52%;          /* Figma: 970/1920 */
	box-sizing: border-box;
	border-right: 1px solid #6e6e6e;
	overflow-y: auto;
	padding: 51px 0 40px 0;    /* erste Zeile 52 unter der Headerkante */
}

/* ---------- Bildflaeche rechts ---------- */
.btw_menu_media {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
}

.btw_menu_media_img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .35s ease;
}

.btw_menu_media_img.is_active {
	opacity: .4;               /* Figma: Bild 40% auf #1f1f1f */
}

/* ---------- Menue-Liste ---------- */
.btw_menu_list,
.btw_menu_sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.btw_menu_item {
	border-top: 1px solid #6e6e6e;
}

.btw_menu_item:last-child {
	border-bottom: 1px solid #6e6e6e;
}

.btw_menu_link {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 97px;
	padding: 0 40px 6px 80px;   /* Text 3px nach oben: oben 3px weniger, unten 3px mehr */
	box-sizing: border-box;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.75rem;        /* 35px (Basis 20px) */
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.875px;
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
	color: #fff;
	transition: background-color .2s ease, padding-left .2s ease;
}

/* Pfeil links (Figma: 13x24 weiss bei x39) */
.btw_menu_link::before {
	content: '';
	position: absolute;
	left: 39px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 13px solid #fff;
	opacity: 0;
	transition: opacity .2s ease;
}

.btw_menu_item:hover > .btw_menu_link,
.btw_menu_item.is_open > .btw_menu_link,
.btw_menu_item.is_active > .btw_menu_link {
	background-color: #a5936f;
	padding-left: 90px;
}

.btw_menu_item:hover > .btw_menu_link::before,
.btw_menu_item.is_open > .btw_menu_link::before,
.btw_menu_item.is_active > .btw_menu_link::before {
	opacity: 1;
}

/* ---------- Untermenue (Leistungen, Klick-Accordion) ---------- */
.btw_menu_sub {
	height: 0;
	overflow: hidden;
	transition: height .25s ease;
}

/* Aktive Unterseite: Accordion beim Laden offen (JS setzt beim Klick inline height) */
.btw_menu_item.is_open > .btw_menu_sub {
	height: auto;
}

/* Aktives Sub-Item (aktuelle Leistungsseite) gold */
.btw_menu_sub_item.is_active > a {
	color: #a5936f;
}

.btw_menu_sub_item a {
	display: block;
	padding: 0 40px 0 90px;
	font-size: 0.85rem;        /* 17px (Basis 20px) */
	line-height: 33px;
	letter-spacing: 0.45px;
	color: #fff;
	text-decoration: none;
}

.btw_menu_sub_item:first-child a { padding-top: 16px; }
.btw_menu_sub_item:last-child a { padding-bottom: 26px; }

.btw_menu_sub_item a:hover {
	color: #a5936f;
}

/* ---------- Kontaktleiste unten (wie Subfooter) ---------- */
.btw_menu_bar {
	flex: 0 0 53px;
	display: flex;
	align-items: center;
	padding: 0 80px;
	box-sizing: border-box;
	background-color: #303030;
	border-top: 1px solid #6b6b6b;
	font-size: 0.75rem;        /* 15px */
	letter-spacing: 0.45px;
	color: rgba(255, 255, 255, 0.5);
}

.btw_menu_bar_adresse {
	margin: 0;
	flex: 1 1 0;
	white-space: nowrap;
}

.btw_menu_bar_middle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 22px;   /* Telefonnummer <-> E-Mail */
}

.btw_menu_bar_middle a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color .2s ease;
}

.btw_menu_bar_middle a:hover {
	color: #a5936f;
}

.btw_menu_bar_socials {
	display: inline-flex;
	align-items: center;
	gap: 11px;           /* Abstand zwischen den Social-Icons */
	margin-left: 48px;   /* Abstand E-Mail <-> Socials (22 + 48 = 70) beibehalten */
}

.btw_menu_bar_middle .btw_menu_social_link img {
	display: block;
	width: 28px;
	height: 28px;
}

.btw_menu_bar_spacer {
	flex: 1 1 0;
}

/* ---------- Burger -> X ---------- */
.btw_header .btw_header_burger span {
	transition: background-color .3s, transform .25s ease, opacity .2s ease;
}

.btw_header .btw_header_burger.is_open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.btw_header .btw_header_burger.is_open span:nth-child(2) {
	opacity: 0;
}

.btw_header .btw_header_burger.is_open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.btw_menu_left {
		flex: 1 1 100%;
		border-right: 0;
		padding-top: 20px;
	}

	.btw_menu_media {
		display: none;
	}

	.btw_menu_link {
		height: 72px;
		padding: 0 30px 0 40px;
		font-size: 1.3rem;
	}

	.btw_menu_link::before { left: 14px; }

	.btw_menu_item:hover > .btw_menu_link,
	.btw_menu_item.is_open > .btw_menu_link,
	.btw_menu_item.is_active > .btw_menu_link {
		padding-left: 44px;
	}

	.btw_menu_sub_item a { padding-left: 44px; }

	.btw_menu_bar {
		flex-wrap: wrap;
		padding: 8px 30px;
		flex-basis: auto;
		gap: 4px 30px;
	}

	.btw_menu_bar_middle {
		flex-wrap: wrap;
		gap: 4px 30px;
	}
	/* Icons als geschlossene Gruppe in eigene Zeile, damit keins abgeschnitten wird */
	.btw_menu_bar_socials {
		flex-basis: 100%;
		gap: 28px;
		margin-top: 4px;
	}
	.btw_menu_bar_spacer { display: none; }
}