/* Overrides */
header {
	padding-top: 0px !important;
}
nav.main {
	position: absolute !important;
}
nav.main .container-bar > div:first-child,
nav.main .full-h-svg {
	height: calc(var(--nav-height) - var(--padding-xs)) !important;
}
nav.main .full-h-svg svg {
	height: 100% !important;
	width: auto !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	nav.main .container-bar > div:first-child,
	nav.main .full-h-svg {
		height: 3rem !important;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	nav.main .container-bar > div:first-child,
	nav.main .full-h-svg {
		height: 2.5rem !important;
	}
}

/* ----------------------------------------------------------------
	Content
-----------------------------------------------------------------*/
#countdown-clock.gap {
	gap: 0.75rem 3rem !important;
}
@media only screen and (max-width: 688px) {
	#countdown {
		padding-bottom: 2.5rem !important;
		gap: 1.25rem !important;
	}
	#countdown-clock.gap {
		gap: 0.75rem 0px !important;
	}
	#countdown-clock.gap > * {
		width: 50%;
	}
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	footer .flex-h.arrange-cc, footer .flex-h.arrange-cr {
		justify-content: flex-start !important;
	}
}

.container-icons svg {
	height: 1.25rem;
}
@media only screen and (min-width: 993px) {
	section[name=icon] .container-icons {
		flex-wrap: nowrap !important;
	}
}
.container-buttons .stroke {
	stroke-width: 2px !important;
}

/* Banner */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=banner] .container-content {
		align-items: center;
		text-align: center;
	}
	section[name=banner] .container-content h2 {
		width: 100%;
	}
	section[name=banner] .container-buttons {
		justify-content: center;
		width: 100%;
		flex-wrap: wrap !important;
	}
	section[name=banner] .container-buttons a {
		text-wrap: wrap;
		white-space: normal;
		text-align: center;
	}
}

/* Header & CTA */
section[name=header] .wrapper-bg, section[name=header] .container-bg {
	mask-image: url('./header-mask.svg');
	-webkit-mask-image: url('./header-mask.svg');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-position: 50% 100%;
	-webkit-mask-position: 50% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
section[name=header] .container-bg {
	mask-image: url('./header-mask-2.svg');
	-webkit-mask-image: url('./header-mask-2.svg');
}
section[name=header] .container-pin {
	mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
	-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
	height: 57.5%;
}
section[name=header] > picture {
	right: calc(var(--grid-padding) * -2) !important;
	bottom: 50% !important;
}
section[name=header] > picture.header-foreground {
	opacity: 0;
}
@media only screen and (min-width: 993px) {
	section[name=header] > picture {
		width: 100% !important;
		max-width: none;
	}
	section[name=header] > picture img {
		width: 100%;
		height: auto;
	}
}
section[name=header] .container-cta {
	bottom: 1.25rem;
}
section[name=header] .container-text {
	opacity: 0;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=header] .container-text.main {
		margin-bottom: 35vh;
		margin-bottom: 35svh;
		width: 66.666% !important;
	}
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=header] .wrapper-bg {
		overflow: hidden;
		align-items: flex-end !important;
		justify-content: flex-end !important;
	}
	section[name=header] .container-bg {
		align-items: flex-end !important;
		justify-content: flex-end !important;
	}
	section[name=header] .container-pin {
		width: 170% !important;
		height: 100% !important;
		align-self: flex-end;
	}
	section[name=header] .container-pin picture,
	section[name=header] .container-pin img {
		width: 100%;
		height: 88%;
		object-fit: cover;
		object-position: 50% 100%;
	}
	section[name=header] > picture.header-foreground {
		right: calc(var(--grid-padding) * -4) !important;
		bottom: 30% !important;
		width: 150% !important;
		max-width: none;
	}
	section[name=header] > picture.header-foreground img {
		width: 100%;
		height: auto;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=header] .container-text.main {
		padding-top: var(--padding-xl) !important;
	}
	section[name=header] > picture.header-foreground {
		right: calc(var(--grid-padding) * -6) !important;
	}
}

/* USP */
section[name=usp] .accordion-item .stroke {
	stroke-width: 2px !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=usp] {
		padding-right: var(--grid-padding) !important;
		background-color: var(--bg-white) !important;
	}
	section[name=usp] .container-content {
		flex-direction: column-reverse !important;
		gap: 0px !important;
	}
	section[name=usp] .accordion {
		padding-top: var(--padding-l) !important;
	}
	section[name=usp] .accordion-item.padding-xs-tb {
		padding-top: var(--gap-xs) !important;
		padding-bottom: var(--gap-xs) !important;
	}
	section[name=usp] .accordion-item .container-text {
		width: calc(11 * var(--grid-column) + 10 * var(--grid-gutter));
	}
	section[name=usp] .accordion-images {
		min-height: calc(8 * var(--grid-column) + 7 * var(--grid-gutter));
	}
}

/* Video */
section[name=video] .container-video {
	mask-image: linear-gradient(to right, transparent 0%, black 0%, black 100%, transparent 100%);
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=component] .container-content {
		gap: 0px !important;
	}
	section[name=component] .container-content > .width-3 {
		padding-top: var(--padding-l) !important;
	}
	section[name=gearbox] .container-content > .width-5 {
		flex-wrap: nowrap;
	}
}

/* Component */
.margin-kicker {
	margin-top: var(--text-gap-kicker) !important;
}
section[name=component] [data-component-trigger] {
	cursor: pointer;
	text-align: left;
	width: 100%;
}
section[name=component] [data-component-trigger] strong,
section[name=component] [data-component-trigger] p {
	transition: color var(--transition-default);
}
section[name=component] [data-component-trigger].icon-grey strong,
section[name=component] [data-component-trigger].icon-grey p {
	color: var(--font-color-default-grey) !important;
}
section[name=component] .container-component-images {
	position: relative;
	min-height: 1px;
}
section[name=component] .container-component-images > [data-component-image] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity var(--transition-l);
	pointer-events: none;
}
section[name=component] .container-component-images > [data-component-image]:first-child {
	position: relative;
}
section[name=component] .container-component-images > [data-component-image].is-active {
	opacity: 1;
	z-index: 1;
	pointer-events: auto;
}
section[name=component] .icon-xs svg .stroke,
section[name=component] .icon-xs svg .fill {
	transition: stroke var(--transition-default), fill var(--transition-default);
}
section[name=component] .icon-xs svg .stroke,
section[name=gearbox] .icon-xs svg .stroke {
	stroke-width: 1px !important;
}

/* Fair & Cabin arrow buttons */
section[name=fair] .container-buttons.arrows .primary > svg,
section[name=cabin] .container-buttons.arrows .primary > svg {
	height: var(--button-icon-size) !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=fair] picture {
		min-height: calc(3 * var(--grid-column) + 3 * var(--grid-gutter)) !important;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=fair] picture {
		min-height: calc(6 * var(--grid-column) + 5 * var(--grid-gutter)) !important;
	}	
}

/* Cabin */
section[name=cabin] .container-cabin {
	position: relative;
}

/* Desktop hotspot buttons */
section[name=cabin] .hotspot {
	position: absolute;
	left: var(--hotspot-x);
	top: var(--hotspot-y);
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-default), opacity var(--transition-default);
	z-index: 2;
}

section[name=cabin] .hotspot svg {
	display: block;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

section[name=cabin] .hotspot .hotspot-circle {
	fill: var(--shade-grey-light);
	transition: fill var(--transition-default);
}

section[name=cabin] .hotspot .hotspot-plus {
	fill: var(--shade-white);
}

section[name=cabin] .hotspot.active .hotspot-circle {
	fill: var(--color-main);
}

section[name=cabin] .hotspot:hover,
section[name=cabin] .hotspot:focus,
section[name=cabin] .hotspot.active {
	transform: translate(-50%, -50%) scale(1.1);
}

/* Card */
section[name=cabin] .card {
	padding: var(--gap-default);
	width: 100%;
	box-sizing: border-box;
}

/* Image slide wrapper, if data-cabin-slide still exists */
section[name=cabin] .container-content > .width-3-5 > .relative {
	overflow: hidden;
	width: 100%;
}

section[name=cabin] .container-content > .width-3-5 > .relative > [data-cabin-slide] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

section[name=cabin] .container-content > .width-3-5 > .relative > [data-cabin-slide]:first-child {
	position: relative;
}

/* Text slides */
section[name=cabin] .card > .relative {
	display: grid;
	overflow: hidden;
	width: 100%;
}

section[name=cabin] .card > .relative > [data-cabin-text] {
	grid-area: 1 / 1;
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

section[name=cabin] .card > .relative > [data-cabin-text].active,
section[name=cabin] .card > .relative > [data-cabin-text].is-active,
section[name=cabin] .card > .relative > [data-cabin-text]:first-child:not(.inactive) {
	opacity: 1;
	pointer-events: auto;
}

section[name=cabin] .card > .relative > [data-cabin-text].inactive {
	opacity: 0;
	pointer-events: none;
}

/* Arrow button icons */
section[name=cabin] .container-buttons.arrows .primary > svg {
	height: var(--button-icon-size) !important;
}

/* Desktop layout */
@media only screen and (min-width: 993px) {
	section[name=cabin] .container-content {
		align-items: stretch;
	}

	section[name=cabin] .container-content > .container-cabin,
	section[name=cabin] .container-content > .width-3-5 {
		height: 100%;
	}

	section[name=cabin] .container-content > .width-3-5 {
		align-items: stretch;
	}

	section[name=cabin] .container-content > .width-3-5 > .relative,
	section[name=cabin] .container-content > .width-3-5 > .card {
		width: 100%;
		height: 100%;
	}

	section[name=cabin] .container-cabin {
		align-self: stretch;
		overflow: hidden;
	}

	section[name=cabin] .container-cabin picture {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	section[name=cabin] .container-cabin picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Tablet + mobile layout */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=cabin] .container-content.height-4 {
		height: auto !important;
		min-height: 0 !important;
	}

	section[name=cabin] .container-content,
	section[name=cabin] .container-content > .width-3-5 {
		gap: 0 !important;
	}

	section[name=cabin] .container-content > .container-cabin,
	section[name=cabin] .container-content > .width-3-5,
	section[name=cabin] .container-content > .width-3-5 > .card {
		height: auto !important;
		min-height: 0 !important;
	}

	section[name=cabin] .container-content > .width-3-5 {
		align-items: stretch;
		width: 100% !important;
	}

	section[name=cabin] .container-content > .width-3-5 > .relative,
	section[name=cabin] .container-content > .width-3-5 > .card {
		width: 100% !important;
	}

	/* Image box responsive height */
	section[name=cabin] .container-cabin {
		width: 100% !important;
		aspect-ratio: 16 / 7;
		overflow: hidden;
	}

	section[name=cabin] .container-cabin picture {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		display: block;
		width: 100% !important;
		height: 100% !important;
	}

	section[name=cabin] .container-cabin picture img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}

	/* Card centered content */
	section[name=cabin] .card {
		display: flex;
		align-items: center !important;
		justify-content: center !important;
		text-align: center;
		height: auto !important;
		min-height: 9rem;
		padding: var(--gap-default);
	}

	section[name=cabin] .card > .relative {
		width: 100%;
	}

	section[name=cabin] .card [data-cabin-text] {
		align-items: center !important;
		justify-content: center !important;
		text-align: center;
		width: 100%;
	}

	section[name=cabin] .card [data-cabin-text] h3,
	section[name=cabin] .card [data-cabin-text] p {
		width: 100%;
		text-align: center !important;
	}

	section[name=cabin] .card .container-buttons {
		justify-content: center !important;
		align-items: center !important;
		width: 100%;
	}

	/* Tablet/mobile hotspots: larger invisible hitbox, small visible dot */
	section[name=cabin] .hotspot {
		--hotspot-hitbox-size: 44px;
		--hotspot-dot-size: 14px;

		width: var(--hotspot-hitbox-size);
		height: var(--hotspot-hitbox-size);
		border-radius: 50%;
		background: transparent;
		transform: translate(-50%, -50%);
		overflow: visible;
		border: none;
		padding: 0;
		cursor: pointer;
		pointer-events: auto;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	section[name=cabin] .hotspot svg {
		display: none;
	}

	/* Small visible dot */
	section[name=cabin] .hotspot::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: var(--hotspot-dot-size);
		height: var(--hotspot-dot-size);
		border-radius: 50%;
		background: var(--shade-grey-light);
		transform: translate(-50%, -50%);
		pointer-events: none;
		transition:
			background-color var(--transition-default),
			transform var(--transition-default);
	}

	/* Optional pulse ring for active dot */
	section[name=cabin] .hotspot::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: var(--hotspot-dot-size);
		height: var(--hotspot-dot-size);
		border-radius: 50%;
		background: var(--color-main);
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
		pointer-events: none;
	}

	section[name=cabin] .hotspot.active::before {
		background: var(--color-main);
	}

	section[name=cabin] .hotspot:hover,
	section[name=cabin] .hotspot:focus,
	section[name=cabin] .hotspot.active {
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Tablet portrait: image/card next to each other */
@media only screen and (max-width: 992px) and (min-width: 689px) and (orientation: portrait) {
	section[name=cabin] .container-content > .width-3-5 {
		flex-direction: row !important;
	}

	section[name=cabin] .container-content > .width-3-5 > .relative,
	section[name=cabin] .container-content > .width-3-5 > .card {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
	}

	section[name=cabin] .container-cabin {
		aspect-ratio: 16 / 8;
	}
}

/* Mobile portrait: image on top, card below */
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=cabin] .container-content > .width-3-5 {
		flex-direction: column !important;
	}

	section[name=cabin] .container-cabin {
		aspect-ratio: 16 / 9;
	}

	section[name=cabin] .card {
		min-height: 8rem;
		padding: var(--gap-s);
		align-items: center !important;
		text-align: center;
	}

	section[name=cabin] .card [data-cabin-text] {
		align-items: center !important;
		text-align: center;
	}

	section[name=cabin] .card [data-cabin-text] h3,
	section[name=cabin] .card [data-cabin-text] p {
		width: 100%;
		text-align: center !important;
	}

	section[name=cabin] .card .container-buttons {
		justify-content: center;
		width: 100%;
	}
}

/* Feature */
section[name=feature] .create-scrolly {
	position: relative;
	background-color: var(--bg-white);
}
section[name=feature] .create-scrolly canvas {
	display: block;
	width: 100%;
	height: 100%;
}
section[name=feature] .accordion .item-target {
	font-size: 2.5rem;
	line-height: var(--line-height-h3);
	transition: color var(--transition-default);
}
section[name=feature] .accordion .accordion-item {
	padding-top: var(--gap-s) !important;
	padding-bottom: var(--gap-s) !important;
}
section[name=feature] .accordion .accordion-item > .container-text {
	cursor: default;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=feature] {
		padding-right: 0 !important;
		padding-bottom: var(--padding-l) !important;
		gap: 0 !important;
	}
	section[name=feature] .create-scrolly,
	section[name=feature] .accordion {
		width: 100% !important;
	}
	section[name=feature] .create-scrolly,
	section[name=feature] .create-scrolly canvas {
		height: auto !important;
		aspect-ratio: 16 / 9;
		width: 100% !important;
		flex-shrink: 0;
	}
	section[name=feature] .accordion .item-target {
		font-size: var(--font-size-h4);
		line-height: var(--line-height-h4);
	}
	section[name=feature] .accordion {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding-left: var(--grid-padding);
		padding-right: var(--grid-padding);
	}
}

/* Newsletter */
section[name=newsletter] .container-bg {
	z-index: 0;
	height: 100%;
	top: 0;
	left: 30rem;
	width: 100%;
}
section[name=newsletter] .container-bg > div {
	height: 130% !important;
}
section[name=newsletter] .container-bg picture {
	transform: none;
}
section[name=newsletter] .form svg {
	display: none;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=newsletter] .container-bg {
		display: none;
	}
}

section[name=newsletter] .page {
	align-items: stretch !important;
}

section[name=newsletter] .field:not(.captcha),
section[name=newsletter] .field__normal,
section[name=newsletter] .button-center,
section[name=newsletter] .submitButton {
	display: flex;
	align-items: stretch;
}

section[name=newsletter] .field:not(.captcha) {
	flex: 1 1 auto;
}

section[name=newsletter] .field__normal {
	height: 100%;
}

section[name=newsletter] input[name="email"],
section[name=newsletter] input[type="submit"] {
	height: 100%;
	min-height: var(--newsletter-control-height, 4.25rem);
	box-sizing: border-box;
}

/* Contact */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=contact] .container-foreground {
		display: none;
	}
}
@media only screen and (min-width: 993px) {
	section[name=contact] .container-foreground {
		left: calc(var(--grid-padding) * -2) !important;
		right: auto !important;
		width: 90% !important;
		max-width: none;
	}
	section[name=contact] .container-foreground picture,
	section[name=contact] .container-foreground img {
		width: 100%;
		height: auto;
		object-position: left bottom;
	}
}

/* Application & Hydraulics toggles */
section[name=application] .container-content > .width-6.relative,
section[name=hydraulics] .container-content > .width-6.relative,
section[name=application] .container-table > .relative,
section[name=hydraulics] .container-table > .relative {
	overflow: hidden;
}

/* Application table */
section[name=application] .container-table table {
	table-layout: fixed;
	width: calc(5 * var(--grid-column) + 4 * var(--grid-gutter)) !important;
}
section[name=application] .container-table th,
section[name=application] .container-table td {
	white-space: nowrap;
}

/* Hydraulics table */
section[name=hydraulics] .container-table table {
	table-layout: fixed;
	width: calc(6 * var(--grid-column) + 5 * var(--grid-gutter)) !important;
}
section[name=hydraulics] .container-table th,
section[name=hydraulics] .container-table td {
	white-space: nowrap;
}
section[name=application] .container-table tbody tr:first-child > *,
section[name=hydraulics] .container-table tbody tr:first-child > * {
	border-top: none !important;
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=application] .container-table,
	section[name=hydraulics] .container-table {
		width: 100% !important;
		max-width: 100%;
		overflow-x: hidden;
	}
	section[name=application] .container-table > .relative,
	section[name=hydraulics] .container-table > .relative {
		overflow-x: hidden;
		max-width: 100%;
	}
	section[name=application] .container-table table,
	section[name=hydraulics] .container-table table {
		width: 100% !important;
		max-width: 100%;
		table-layout: fixed;
	}
	section[name=application] .container-table th,
	section[name=application] .container-table td,
	section[name=hydraulics] .container-table th,
	section[name=hydraulics] .container-table td {
		width: auto !important;
		max-width: 100%;
		white-space: normal;
		word-break: break-word;
	}
}

/* Application & Hydraulics side toggles */
section[name=application] [data-application-toggle] .primary,
section[name=hydraulics] [data-hydraulics-toggle] .primary {
	color: var(--font-color-primary);
	background-color: var(--color-main);
	border-color: var(--color-main);
}
section[name=application] [data-application-toggle] .secondary,
section[name=hydraulics] [data-hydraulics-toggle] .secondary {
	color: var(--color-main);
	background-color: transparent;
	border-color: var(--color-main);
}
section[name=application] [data-application-toggle] .primary:not(:disabled):hover,
section[name=application] [data-application-toggle] .primary:not(:disabled):focus,
section[name=hydraulics] [data-hydraulics-toggle] .primary:not(:disabled):hover,
section[name=hydraulics] [data-hydraulics-toggle] .primary:not(:disabled):focus {
	color: var(--font-color-primary);
	background-color: var(--color-main);
	border-color: var(--color-main);
}
section[name=application] [data-application-toggle] .secondary:not(:disabled):hover,
section[name=application] [data-application-toggle] .secondary:not(:disabled):focus,
section[name=hydraulics] [data-hydraulics-toggle] .secondary:not(:disabled):hover,
section[name=hydraulics] [data-hydraulics-toggle] .secondary:not(:disabled):focus {
	color: var(--color-main);
	background-color: transparent;
	border-color: var(--color-main);
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=hydraulics] [data-hydraulics-toggle] {
		gap: 0 !important;
	}
	section[name=hydraulics] [data-hydraulics-toggle] .primary,
	section[name=hydraulics] [data-hydraulics-toggle] .secondary {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
}

@media only screen and (max-width: 992px) {
	section[name=cta] .cta-image {
		display: none !important;
	}

	section[name=cta] > div {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	section[name=cta] .container-text {
		width: 100% !important;
		align-items: center !important;
		text-align: center;

		/* keep grid on tablet/mobile */
		padding-left: var(--grid-padding) !important;
		padding-right: var(--grid-padding) !important;
	}

	section[name=cta] .container-text.grid-r {
		padding-left: var(--grid-padding) !important;
		padding-right: var(--grid-padding) !important;
	}

	section[name=cta] .container-text h2 {
		width: 100% !important;
		text-align: center;
	}

	section[name=cta] .container-buttons {
		width: 100%;
		justify-content: center !important;
	}
}