/* =========================================================
   SITE-HEADER WRAPPER
   Positionierungs-Anker für #header (statt html/body): dadurch bleibt
   "top:40px" immer korrekt relativ zum Seitenanfang, egal ob WordPress
   durch die Admin-Bar zusätzlichen Abstand oben einfügt oder nicht --
   #site-header ist ein normales Flow-Element und rutscht mit der
   Admin-Bar automatisch mit nach unten, #header hängt sich nur daran.
   ========================================================= */
#site-header {
	position: relative;
}

/* =========================================================
   HEADER (absolute, liegt über dem Hero)
   ========================================================= */
#header {
	position: absolute;
	top: 40px; /* Höhe der Top-Header-Bar */
	left: 0;
	right: 0;
	width: 100%;
	height: 260px;
	/* Muss über #nav-backdrop (z-index:900) liegen: beide sind Geschwister
	   auf body-Ebene, und die Submenu-Box (Nachfahre von #header) ragt
	   unten über die Header-Höhe hinaus. Läge #header darunter, würde der
	   Backdrop den herausragenden Teil der Box optisch/für Pointer-Events
	   verdecken -- die Maus landet dann auf dem Backdrop statt der Box,
	   und das Menü schließt sofort beim Reinfahren. */
	z-index: 950;
	background-image: url('../img/header-bg.png');
	background-repeat: repeat-x;
	background-position: top left;
	/* Höhe füllt den Header, Breite kachelt sich per repeat-x über die volle Breite */
	background-size: auto 100%;
	/* Kein overflow:hidden hier -- das clippt sonst die Submenu-Box, die
	   unter dem #header_container-Bereich weiter nach unten herausragt. */
}

#header_container {
	width: 100%;
	max-width: var(--content-max);
	height: 100%;
	margin: 0 auto;
	padding: 0 20px 14px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	position: relative;
	z-index: 3000;
}

#header_container .clear {
	display: none;
}

#header_brand {
	display: flex;
	align-items: flex-end;
	flex: 0 0 auto;
}

#logo {
	display: block;
	height: 230px;
	width: auto;
}

/* =========================================================
   HEADER-OFFSET
   Fallback-Abstandshalter für Seiten ohne Hero (ACF-Felder leer):
   verhindert, dass der Main-Content vom absolut positionierten
   Header überlagert wird. Höhe = #header Höhe je Breakpoint.
   ========================================================= */
#header-offset {
	height: 260px;
	margin-bottom: 30px;
}

/* =========================================================
   HERO (liegt hinter dem Header)
   ========================================================= */
#hero {
	position: relative;
	z-index: 1;
	width: 100%;
	background: #000;
	/* Keine feste Höhe mehr: Smart Slider berechnet seine eigene Höhe per JS
	   (weicht von jeder fest gesetzten Höhe ab, z.B. 548px statt 500px) --
	   #hero-slider/#hero-image sind jetzt normale Flow-Elemente, #hero
	   wächst mit ihrer tatsächlichen Höhe mit. So bleibt kein Rest sichtbar
	   überlappend mit dem Content danach.
	   margin-top schiebt den Hero etwas nach unten, sodass #header (absolut
	   positioniert, 260px) nur einen Teil seiner Höhe überdeckt, nicht mehr. */
	margin-top: 215px;
	margin-bottom: 30px;
}

#hero-slider {
	position: relative;
	width: 100%;
}

#hero-image {
	position: relative;
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: center;
}

#hero-caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	color: #fff;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

#hero-title {
	font-family: 'Anton', sans-serif;
	font-size: 48px;
	line-height: 1.1;
}

#hero-subtitle {
	font-family: 'Anton', sans-serif;
	font-size: 26px;
	margin-top: 12px;
}

/* =========================================================
   NAV BASE
   ========================================================= */
#navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: absolute;
	/* Kein transform hier: das würde für jedes position:fixed-Kind (z.B.
	   das mobile Off-Canvas-Panel) einen neuen Bezugsrahmen aufspannen --
	   es würde sich dann auf dieses winzige Element statt den Viewport
	   beziehen und komplett kollabieren. Deshalb calc() statt
	   top:35%+translateY(-50%) fürs vertikale Zentrieren um die 35%-Marke. */
	top: calc(35% - 20px);
	right: 20px;
	z-index: 3001;
	font-family: 'Inter', sans-serif;
	background: transparent !important;
}

#navigation,
#navigation * {
	box-sizing: border-box;
}

#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation ul,
#navigation li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

#navigation a {
	text-decoration: none;
	color: inherit;
}

#navigation > .menu-hauptnavi-container {
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	background: transparent !important;
}

/* =========================================================
   BACKDROP
   ========================================================= */
#nav-backdrop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: var(--header-bottom);
	background: var(--overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t) ease;
	z-index: 900;
}

#nav-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* =========================================================
   BURGER
   ========================================================= */
#nav-burger {
	display: none;
	align-items: center;
	justify-content: flex-end;
	width: auto;
	margin-left: auto;
	padding: 12px 0;
	background: transparent !important;
	border: 0;
	cursor: pointer;
	box-shadow: none;
}

#nav-burger .label {
	display: none;
}

#nav-burger .icon {
	width: 28px;
	height: 20px;
	position: relative;
	display: block;
}

#nav-burger .icon span {
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--tbg-red);
	border-radius: 2px;
	transition: transform var(--t) ease, opacity var(--t) ease, top var(--t) ease;
}

#nav-burger .icon span:nth-child(1) { top: 0; }
#nav-burger .icon span:nth-child(2) { top: 8px; }
#nav-burger .icon span:nth-child(3) { top: 16px; }

#navigation.is-menu-open #nav-burger .icon span:nth-child(1) {
	top: 8px;
	transform: rotate(45deg);
}
#navigation.is-menu-open #nav-burger .icon span:nth-child(2) {
	opacity: 0;
}
#navigation.is-menu-open #nav-burger .icon span:nth-child(3) {
	top: 8px;
	transform: rotate(-45deg);
}

/* =========================================================
   LEVEL 1 (Hauptmenü, rechtsbündig, weiß, Anton, Hover -> Rot)
   ========================================================= */
#navigation > .menu-hauptnavi-container > ul.menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 34px;
	width: 100%;
	margin: 0;
	padding: 20px 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: transparent !important;
}

#navigation > .menu-hauptnavi-container > ul.menu > li {
	position: relative;
	background: transparent !important;
}

#navigation > .menu-hauptnavi-container > ul.menu > li > a {
	color: #fff;
	font-family: 'Anton', sans-serif;
	font-size: 20px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	background: transparent !important;
	transition: color var(--t) ease;
}

#navigation > .menu-hauptnavi-container > ul.menu > li > a:hover,
#navigation > .menu-hauptnavi-container > ul.menu > li.current-menu-item > a,
#navigation > .menu-hauptnavi-container > ul.menu > li.current-menu-ancestor > a {
	color: var(--tbg-red);
}

#navigation li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	flex: 0 0 auto;
	transform: translateY(1px);
	transition: transform 180ms ease;
}

#navigation li.is-open > a::after,
#navigation li.is-sub-open > a::after {
	transform: translateY(1px) rotate(180deg);
}

/* =========================================================
   HIDE SUBMENUS DEFAULT
   ========================================================= */
#navigation ul.sub-menu {
	display: none;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	transition: opacity var(--t) ease, max-height 260ms ease;
}

/* =========================================================
   DESKTOP >1024: MEGA-MENU BOX (schwarz, 2 Spalten, roter Rand)
   ========================================================= */
@media (min-width: 1025px) {

	/* Öffnet sich direkt unterhalb des jeweiligen Menüpunkts (nicht über die
	   volle Breite). top:100% statt fixed/--header-bottom schließt außerdem
	   die Lücke zwischen Trigger und Box, die die Maus beim Reinfahren
	   ins Leere laufen ließ und das Menü vorzeitig schließen ließ. */
	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu.hsg-mega-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1100;
		width: 400px;
		background: #000;
		border-top: 4px solid var(--tbg-red);
		padding: 24px 28px;
		display: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 28px;
		max-height: none !important;
		overflow: visible !important;
	}

	/* Verhindert, dass die Box bei den letzten Menüpunkten rechts über den Viewport hinausragt */
	#navigation > .menu-hauptnavi-container > ul.menu > li:nth-last-child(-n+2) > ul.sub-menu.hsg-mega-menu {
		left: auto;
		right: 0;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li.is-open > ul.sub-menu.hsg-mega-menu {
		display: grid;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	/* Ebene 2: Anton */
	#navigation ul.sub-menu.hsg-mega-menu > li.hsg-menu-level-2 {
		text-align: left;
		break-inside: avoid;
	}

	#navigation ul.sub-menu.hsg-mega-menu > li.hsg-menu-level-2 > a {
		color: #fff;
		font-family: 'Anton', sans-serif;
		font-size: 15px;
		line-height: 1.2;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 6px;
		text-transform: none;
		letter-spacing: 0;
		text-align: left;
	}

	#navigation ul.sub-menu.hsg-mega-menu > li.hsg-menu-level-2 > a:hover,
	#navigation ul.sub-menu.hsg-mega-menu > li.hsg-menu-level-2.current-menu-item > a,
	#navigation ul.sub-menu.hsg-mega-menu > li.hsg-menu-level-2.current-menu-ancestor > a {
		color: var(--tbg-red);
	}

	/* Ebene 3: Inter */
	#navigation ul.sub-menu.hsg-mega-menu-sub {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		max-height: none !important;
		overflow: visible !important;
		transition: none;
	}

	#navigation ul.sub-menu.hsg-mega-menu-sub > li.hsg-menu-level-3 > a {
		color: #fff;
		font-family: 'Inter', sans-serif;
		font-size: 12.5px;
		line-height: 1.4;
		display: block;
		text-align: left;
		padding: 2px 0;
		text-transform: none;
		letter-spacing: 0;
		transition: color var(--t) ease;
	}

	#navigation ul.sub-menu.hsg-mega-menu-sub > li.hsg-menu-level-3 > a:hover,
	#navigation ul.sub-menu.hsg-mega-menu-sub > li.current-menu-item > a,
	#navigation ul.sub-menu.hsg-mega-menu-sub > li.current-menu-ancestor > a {
		color: var(--tbg-red);
	}
}

/* =========================================================
   TABLET 768-1024: schmalere Box, kompaktere Abstände
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {

	#header {
		height: 170px;
	}

	#header-offset {
		height: 170px;
	}

	#hero {
		margin-top: 85px;
	}

	#header_container {
		padding: 0 16px 18px;
	}

	#logo {
		height: 108px;
	}

	#navigation {
		right: 16px;
	}

	#navigation > .menu-hauptnavi-container > ul.menu {
		gap: 18px;
		padding: 14px 0;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li > a {
		font-size: 16px;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu.hsg-mega-menu {
		width: 300px;
		padding: 20px 22px;
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* =========================================================
   MOBILE <768: Off-Canvas-Panel mit mobile-menu.png
   ========================================================= */
@media (max-width: 767px) {

	#header {
		height: 130px;
	}

	#hero {
		margin-top: 65px;
	}

	/* Solange das Off-Canvas-Menü offen ist, denselben Hintergrund wie das
	   Panel selbst zeigen (per JS: .mobile-menu-open, siehe mega-menu.js).
	   background-attachment:fixed ist hier entscheidend: dadurch bezieht
	   sich cover/center auf den Viewport statt auf die jeweils eigene Box
	   von #header bzw. dem Panel -- beide zeigen so denselben durchgehenden
	   Bildausschnitt statt zwei separat zugeschnittener Kopien. */
	#header.mobile-menu-open {
		background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75)), url('../img/mobile-menu.png');
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}

	#header-offset {
		height: 130px;
	}

	#header_container {
		padding: 0 16px 26px;
	}

	#logo {
		height: 76px;
	}

	#navigation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		right: 16px;
		background: transparent !important;
	}

	#navigation > .menu-hauptnavi-container {
		width: 100%;
		max-width: none;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: static;
		background: transparent !important;
	}

	#nav-burger {
		display: flex;
		position: relative;
		z-index: 1301;
		background: transparent !important;
	}

	#navigation > .menu-hauptnavi-container > ul.menu {
		position: fixed;
		top: var(--header-bottom);
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		display: block;
		margin: 0;
		padding: 24px 24px 40px;
		/* !important nötig: die Basis-Regel weiter oben setzt für dasselbe
		   Element (Desktop-Menüleiste) background:transparent !important,
		   das sonst auch hier gewinnt und Bild/Farbe unsichtbar macht. */
		background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75)), url('../img/mobile-menu.png') center / cover no-repeat #000 !important;
		background-attachment: fixed !important;
		border-left: 4px solid var(--tbg-red);
		z-index: 1200;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		pointer-events: none;
		transform: translateX(100%);
		transition: transform var(--t) ease, opacity var(--t) ease;
	}

	#navigation.is-menu-open > .menu-hauptnavi-container > ul.menu {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li:first-child {
		border-top: 0;
	}

	/* Ebene 1 mobil */
	#navigation > .menu-hauptnavi-container > ul.menu > li > a {
		position: relative;
		width: 100%;
		display: block;
		color: #fff;
		font-family: 'Anton', sans-serif;
		font-size: 20px;
		padding: 14px 28px 14px 0;
		background: transparent !important;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li.menu-item-has-children > a::after {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li.is-open > a::after,
	#navigation > .menu-hauptnavi-container > ul.menu > li.is-sub-open > a::after {
		transform: translateY(-50%) rotate(180deg);
	}

	/* Ebene 2 standardmäßig verstecken */
	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu {
		position: static;
		width: 100%;
		display: none;
		background: transparent !important;
		border: 0;
		padding: 0;
		margin: 0;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li.is-sub-open > ul.sub-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		padding: 0 0 12px 0;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Ebene 2 mobil: Anton */
	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li > a {
		color: #fff;
		font-family: 'Anton', sans-serif;
		font-size: 18px;
		line-height: 1.2;
		position: relative;
		display: block;
		width: 100%;
		padding: 12px 28px 8px 0;
		text-transform: none;
		letter-spacing: 0;
		background: transparent !important;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li.menu-item-has-children > a::after {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li.is-open > a::after,
	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li.is-sub-open > a::after {
		transform: translateY(-50%) rotate(180deg);
	}

	/* Ebene 3 standardmäßig verstecken */
	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li > ul.sub-menu {
		display: none;
		padding: 0;
		margin: 0;
		background: transparent !important;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
	}

	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li.is-sub-open > ul.sub-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		padding: 0 0 8px 0;
	}

	/* Ebene 3 mobil: Inter */
	#navigation > .menu-hauptnavi-container > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
		color: #fff;
		font-family: 'Inter', sans-serif;
		font-size: 16px;
		line-height: 1.3;
		display: block;
		padding: 7px 0 7px 12px;
		text-transform: none;
		letter-spacing: 0;
		background: transparent !important;
	}

	#hero-image {
		height: 320px;
	}

	#hero-title {
		font-size: 30px;
	}

	#hero-subtitle {
		font-size: 15px;
	}
}