.ba-h2 {
    font-size:70px;
    font-weight:bold;
    text-transform:uppercase;
}


html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

:root {
	--mobileBreakpoint: 1024px;
	--color1: #1B1A19;
	--color2: #E6E4DF;
	--color3: #8C8B88;
	--color4: #9B9A97;
	--color5: #00ff00;
	--color6: #ffffff;
	--main-spacing: 32px;
	--nav-height: calc(2 * var(--main-spacing));
	--column-width: calc((100vw - 9 * var(--main-spacing)) / 8);
	--brands-select-category-images-animation-duration: 0.5s;
	--brands-select-category-animation-duration: 0.7s;
	--brands-select-category-animation-easing: cubic-bezier(1.000, -0.015, 0.765, 1.010);
	--brands-select-category-animation-easing: cubic-bezier(0.8, 0, 0.2, 1);
	--easing-1: cubic-bezier(1.000, -0.015, 0.765, 1.010);
	--easing-2: cubic-bezier(0.8, 0, 0.2, 1);
	--hover-link-animation-duration: 0.2s;
	--hover-link-opacity: 0.5;
	--brandsListOffsetX: 300px;
	--brands-ticker-gap: calc(0.5 * var(--main-spacing)); /* space between category window and brand highlight box */

	--small-font-size:clamp(14px, 0.556vw, 16px); /* 16@2880 */
	--small-line-height:clamp(18.4px, 0.833vw, 21px); /* 24@2880 */
	--small-letter-spacing: 0em;
	--medium-font-size:clamp(15px, 0.694vw, 20px); /* 20@2880 */
	--medium-line-height:clamp(22.5px, 1.042vw, 30px); /* 30@2880 */
	--medium-letter-spacing: -0.01em;
	--larger-font-size:clamp(20px, calc(24px * 0.5 + (24vw * (1 - 0.5)) / 28.80), 24px); /* 24@2880 */
	--larger-line-height:clamp(27px, calc(34px * 0.5 + (34vw * (1 - 0.5)) / 28.80), 34px); /* 34@2880 */
	--larger-letter-spacing: 0.02em;
	--body-font-size:clamp(16px, calc(24px * 0.5 + (24vw * (1 - 0.5)) / 28.80), 24px); /* 24@2880 */
	--body-line-height:clamp(22.7px, calc(34px * 0.5 + (34vw * (1 - 0.5)) / 28.80), 34px); /* 34@2880 */
	--body-letter-spacing: 0.02em;
	--h1-font-size: clamp(80px, 9.271vw, 267px); /* 267@2880 */
	--h1-line-height: clamp(64px, 7.431vw, 214px); /* 214@2880 */
	--xh1-font-size: clamp(89px, calc(267px * 0.05 + (267vw * (1 - 0.05)) / 28.80), 267px); /* 267@2880 */
	--xh1-line-height: clamp(72px, calc(214px * 0.05 + (214vw * (1 - 0.05)) / 28.80), 214px); /* 214@2880 */
	--h1-letter-spacing: -0.03em;
	--h2-font-size: clamp(28px, 1.354vw, 39px); /* 39@2880 */
	--h2-line-height: clamp(28px, 1.354vw, 39px); /* 39@2880 */
	--h2-letter-spacing: 0.03em;
	--h2-small-font-size: clamp(22px, 1.076vw, 31px); /* 31@2880 — ~0.8 × h2 */
	--h2-small-line-height: clamp(24px, 1.181vw, 34px); /* 34@2880 */
	--h2-small-letter-spacing: 0.03em;
	--h3-font-size: clamp(28px, 2.1875vw, 63px); /* 63@2880 */
	--h3-line-height: clamp(28px, 2.1875vw, 63px); /* 63@2880 */
	--h3-letter-spacing: 0.03em;
	--h4-font-size: clamp(157px, 16.701vw, 481px); /* 481@2880 */
	--h4-line-height: clamp(126px, 13.368vw, 385px); /* 385@2880 */
	--h4-letter-spacing: -0.03em;
}

@media (min-width:1200px) and (max-width:1600px) {
	:root {
		--body-font-size:20px; /* 24@2880 */
		--body-line-height:27px; /* 34@2880 */
	}
}

@font-face {
	font-family: 'KHTeka';
	src: url('../etc/app/fonts/KHTeka-Regular.woff2') format('woff2'),
		 url('../etc/app/fonts/KHTeka-Regular.woff') format('woff'),
		 url('../etc/app/fonts/KHTeka-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'KHTeka';
	src: url('../etc/app/fonts/KHTeka-Black.woff2') format('woff2'),
		 url('../etc/app/fonts/KHTeka-Black.woff') format('woff'),
		 url('../etc/app/fonts/KHTeka-Black.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'KHTekaMono';
	src: url('../etc/app/fonts/KHTekaMono-Regular.woff2') format('woff2'),
		 url('../etc/app/fonts/KHTekaMono-Regular.woff') format('woff'),
		 url('../etc/app/fonts/KHTekaMono-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

html, body {
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* IE 10+ */
	background-color:var(--color1);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
::-webkit-scrollbar {
	display: none;                /* Chrome, Safari, Edge */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a, a:visited, a:focus, a:active, a:hover {
	text-decoration: none;
	color:inherit;
}

.ba-notouch a:hover {
	cursor: pointer;
}

body {
	font-family: 'KHTeka', 'Arial', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:var(--body-font-size);
	line-height:var(--body-line-height);
	letter-spacing:var(--body-letter-spacing);
	/*overflow-x: hidden;*/
}

.ba-mono {
	font-family: 'KHTekaMono';
	font-weight:400;
	font-size:var(--small-font-size);
	line-height:var(--small-line-height);
	letter-spacing:var(--small-letter-spacing);
}

	.ba-mono.ba-section-footer-hint {
		line-height:calc(1.25 * var(--small-line-height));
	}

.ba-pre {
	white-space: pre;
}

.ba-text-small {
	font-size:var(--small-font-size);
	line-height:var(--small-line-height);
	letter-spacing:var(--small-letter-spacing);
}

.ba-text-medium {
	font-size:var(--medium-font-size);
	line-height:var(--medium-line-height);
	letter-spacing:var(--medium-letter-spacing);
}

.ba-text-larger {
	font-size:var(--larger-font-size);
	line-height:var(--larger-line-height);
	letter-spacing:var(--larger-letter-spacing);
}

h1 {
	font-family: 'KHTeka', 'Arial', sans-serif;
	font-weight:900;
	font-style: normal;
	font-size:var(--h1-font-size);
	line-height:var(--h1-line-height);
	letter-spacing:var(--h1-letter-spacing);
	text-transform: uppercase;
	margin-top: calc((var(--h1-font-size) - var(--h1-line-height)) / 8);
}

h2 {
	font-family: 'KHTeka', 'Arial', sans-serif;
	font-weight:900;
	font-style: normal;
	font-size:var(--h2-font-size);
	line-height:var(--h2-line-height);
	letter-spacing:var(--h2-letter-spacing);
	text-transform: uppercase;
	_margin-top: calc((var(--h2-font-size) - var(--h2-line-height)) / 2);
}

h3 {
	font-family: 'KHTeka', 'Arial', sans-serif;
	font-weight:900;
	font-style: normal;
	font-size:var(--h3-font-size);
	line-height:var(--h3-line-height);
	letter-spacing:var(--h3-letter-spacing);
	text-transform: uppercase;
	_margin-top: calc((var(--h3-font-size) - var(--h3-line-height)) / 8);
}

h4 {
	font-family: 'KHTeka', 'Arial', sans-serif;
	font-weight:900;
	font-style: normal;
	font-size:var(--h4-font-size);
	line-height:var(--h4-line-height);
	letter-spacing:var(--h4-letter-spacing);
	text-transform: uppercase;
	margin-top: calc((var(--h4-font-size) - var(--h4-line-height)) / 2);
}

b {
	font-weight:900;
}

.ba-no-transform {
	text-transform: none;
}

.ba-loop {
	overflow: visible;
	display:flex;
}

	.ba-loop-item {
		/*flex-shrink: 0;*/
		flex: 0 0 auto;
	}

		.ba-loop-item-inner {
			position: relative;
			cursor: pointer;
			width: 100%;
			height: 100%;
		}

ul {
	list-style-type: none;
}

.ba-link {
	transition:opacity var(--hover-link-animation-duration) var(--hover-link-opacity);
}

.ba-notouch .ba-link:hover {
	cursor:pointer;
	opacity:var(--hover-link-opacity);
}

.ba-link.ba-disabled {
	opacity:0.25;
	pointer-events: none;
}

#debug {
	position:fixed;
	top:0;
	left:0;
	border:1px solid #000000;
	background-color:#ffffff;
	width:300px;
	height:300px;
	max-height:300px;
	overflow-y: auto;
	z-index:10000000;
}

#center-cross {
	position:fixed;
	top:0%;
	left:0%;
	right:0;
	bottom:0;
	z-index:1000;
	pointer-events: none;
}

	#center-cross::before {
		content:'';
		position:absolute;
		top:50%;
		left:0px;
		right:0;
		height:1px;
		background-color:red;
	}

	#center-cross::after {
		content:'';
		position:absolute;
		top:0;
		bottom:0;
		left:50%;
		width:1px;
		background-color:red;
	}

		#center-cross .vbars {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			_height: 100dvh;
			display: flex;
			justify-content: space-between;
			padding: 0 var(--main-spacing);
			pointer-events: none;
			z-index: 1000;
		}

			#center-cross .vbars div {
				width: calc((100% - 7 * var(--main-spacing)) / 8);
				height: 100%;
				background-color: rgba( 0, 127, 255, 0.5);
			}
		
		#center-cross .hlines {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			_height: 100dvh;
			display: flex;
			justify-content: space-between;
			padding: 0 var(--main-spacing);
			pointer-events: none;
			z-index: 1000;
		}

			#center-cross .hlines div {
				position:absolute;
				left:0;
				right:0;
				height:1px;
				background-color: rgba( 255, 0, 0, 0.5);
			}

			#center-cross .hlines div:nth-child(1) {
				top:25vh;
			}
			#center-cross .hlines div:nth-child(2) {
				top:50vh;
			}
			#center-cross .hlines div:nth-child(3) {
				top:75vh;
			}

#ba-mobile-landscape-overlay {
	position:fixed;
	background-color:var(--color2);
	color:var(--color1);
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:100%;
	width:100%;
	z-index:10000000;
	display:none;
	justify-content: center;
	align-items: center;
}

#nav {
	position:fixed;
	height:var(--nav-height);
	background-color:var(--color2);
	color:var(--color1);
	top:0;
	width:100%;
	z-index:1000;
	transform: translateY(-100%);
	transition: transform 0.5s ease-in-out;
}

	#nav::after {
		content:'';
		position:absolute;
		left:var(--main-spacing);
		bottom:0;
		right:0;
		height:1px;
		background-color:var(--color1);
	}

	#nav.ba-show,
	html.ba-force-nav #nav {
		transform: translateY(0%);
	}

	#nav .ba-wap {
		position:absolute;
		right:0;
		top:0;
		bottom:0;
		width:90px;
		/*
		display:flex;
		justify-content: center;
		align-items: end;
		*/
		background-color:var(--color1);
		padding-bottom:7px;
	}

		#nav .ba-wap img {
			position:absolute;
			left:18px;
			bottom:13px;
			width:24px;
		}

	#nav .ba-language {
		position:absolute;
		right:90px;
		top:0;
		bottom:0;
		width:50px;
		padding-bottom:7px;
	}

		#nav .ba-language-wrap {
			position:absolute;
			left:0;
			bottom:8px;
			width:100%;
			height:30px;
			overflow:hidden;
		}

			#nav .ba-language a {
				transition:transform .2s ease-out;
				text-transform: uppercase;
				text-decoration: none;
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				_transform:translateY(-24px);
			}

				.ba-notouch #nav .ba-language:hover a {
					transform:translateY(-24px);
				}

			#nav .ba-language img {
				width:24px;
				height:24px;
			}

			#nav .ba-language .ba-mono {
				margin-top: 6px;
				line-height: 24px;
			}

			/*
	#nav .ba-language {
		width:30px;
		_height:24px;
		position:relative;
	}


		#nav .ba-language > div {
			position:absolute;
			top:0;
			left:0;
			width:30px;
			height:24px;
			overflow:hidden;
		}


			#nav .ba-language a > * {
				display:block;
				height:24px;
			}

		#nav .ba-language img {
			width:24px;
			height:24px;
			padding:5px;
		}
		*/

	#nav .ba-logo {
		width:30px;
		_height:24.53px;
	}

		#nav .ba-links {
			position:absolute;
			left:var(--main-spacing);
			right:var(--main-spacing);
			top:0;
			bottom:0;
			display:flex;
			list-style-type: none;
			align-items:end;
			padding-bottom:8px;
		}

		#nav .ba-links ul {
			align-items: baseline;
			overflow:visible;
		}

			#nav .ba-links ul li {
				line-height:24px;
			}

				#nav .ba-links .ba-narrow {
					display:none;
				}

				.ba-notouch #nav .ba-links > li:hover {
					cursor:pointer;
				}

			#nav .ba-links .ba-indicator {
				position:absolute;
				left:-15px;
				top:100%;
				width:6px;
				height:6px;
				border-radius: 3px;
				background-color:var(--color1);
				transform: translateY(-4px);
				opacity:0;
				transition:top 0.01s ease-in-out;
			}

#ba-menu {
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:#00ff00;
	transform: translateY(-200%);
	z-index:1000;
	_transition:transform 0.6s var(--brands-select-category-animation-easing);
	transition:all 0.6s var(--brands-select-category-animation-easing);
	opacity:0;
}

	#ba-menu.ba-open {
		transform: translateY(0);
		opacity:1;
	}

	.ba-close-button {
		position:absolute;
		top:var(--main-spacing);
		right:var(--main-spacing);
		width:var(--main-spacing);
		height:var(--main-spacing);
	}

		.ba-notouch .ba-close-button:hover {
			cursor: pointer;
		}

		.ba-close-button:before,
		.ba-close-button:after {
			content:'';
			position:absolute;
			width:100%;
			top:50%;
			left:0;
			right:0;
			height:1px;
			background-color:var(--color1);
			transform: rotate(0deg);
			transition:transform 0.35s ease-in-out;
		}

			.ba-close-button.ba-x:before {
				transform: rotate(45deg);
			}

			.ba-close-button.ba-x:after {
				transform: rotate(-45deg);
			}

	#ba-menu .ba-home {
		position: absolute;
		left:var(--main-spacing);
		top:var(--main-spacing);
	}

	#ba-menu .ba-links {
		position: absolute;
		left:var(--main-spacing);
		top:46%;
		transform:translateY(-50%);
		text-transform: uppercase;
		font-weight:900;
		font-size:44px;
		line-height:44px;
		color:var(--color1);
	}

	#ba-menu .ba-contact {
		position: absolute;
		left:var(--main-spacing);
		bottom:calc(2 * var(--main-spacing) + 34px);
		line-height:27px;
	}

	#ba-menu .ba-wap {
		position: absolute;
		left:calc(var(--main-spacing) + 30px);
		bottom:var(--main-spacing);
		width:34px;
		height:34px;
	}
		#ba-menu .ba-wap img {
			width:100%;
		}

section {
	position:relative;
	width:100%;
	z-index:0;
	padding:var(--main-spacing);
}

section.grid::before,
div.grid::before {
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background-image:url(../etc/app/images/grid-light.png);
	opacity:1;
}

section.grid.dark::before,
div.grid.dark::before {
	background-image:url(../etc/app/images/grid-dark.png);
}

.section-transition {
	position:absolute;
	top:0;
	left:50%;
	right:50%;
	height:0vh;
	_height:51dvh;
	transform: translateY(-99%);
	background-color: #00ff00;
	color: #ffffff;
	overflow:hidden;
	z-index:-1;
}

.ba-8-columns {
	width:100%;
	display: grid;
	align-items: start;
	grid-template-columns: repeat(8, calc((100% - 7 * var(--main-spacing)) / 8));
	column-gap:var(--main-spacing);
	overflow:hidden;
}

	.ba-8-columns > * {
		position:relative;
		display:block;
		padding:0 0px;
		/*overflow:hidden;*/
	}

section[data-section="opener"] {
	height: 100vh;
	_height: 100dvh;
	background-color: var(--color2);
	color: var(--color1);
	overflow:hidden;
}

	section[data-section="opener"] > .ba-bg {
		position:fixed;
		top:0;
		_right:0;
		_bottom:0;
		width:100vw;
		height:100vh;
		left:0;
		overflow: hidden;
		z-index:-1;
		/*
		background-image:url(../etc/app/images/opener-bg.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		*/
	}

		section[data-section="opener"] > .ba-bg video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	section[data-section="opener"] .ba-welcome {
		position:absolute;
		top:10%;
		left:var(--main-spacing);
		mix-blend-mode: difference;
		color:#ffffff;
		overflow:hidden;
		max-height:0;
		transition: max-height 0.8s var(--easing-1);
	}

		/*
		.ba-desktop section[data-section="opener"] .ba-welcome {
			overflow:auto;
			max-height: none;
		}
		*/

		section[data-section="opener"] .ba-welcome.ba-show {
			max-height:600px;
		}

	section[data-section="opener"] .ba-contact {
		position:absolute;
		bottom:30%;
		left:var(--main-spacing);
		_color:var(--color1);
		opacity:0;
		mix-blend-mode: difference;
		color: #ffffff;
	}

		.ba-desktop section[data-section="opener"] .ba-contact {
			opacity: 1;
		}

		section[data-section="opener"] .ba-contact .ba-sm {
			position:absolute;
			left:0;
			top:calc(100% + var(--main-spacing));
		}

	section[data-section="opener"] .ba-hint {
		position:absolute;
		bottom:var(--main-spacing);
		left:var(--main-spacing);
		mix-blend-mode: difference;
		color: #ffffff;
	}

section[data-section="about"] {
	background-color: var(--color1);
	color: var(--color2);
	padding:var(--main-spacing);
	padding-top:calc(3 * var(--main-spacing));
}

	section[data-section="about"] .ba-text {
		position:relative;
		width:100%;
	}

	section[data-section="about"] .ba-text > .ba-title {
		padding:30px 0 30px 0;
	}

	section[data-section="about"] .ba-text > .ba-appear {
		padding-bottom:var(--main-spacing);
		hyphens: auto;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

		section[data-section="about"] .ba-text > .ba-appear .ba-line-overflow {
			perspective: 1000px;
			perspective-origin: center center;
		}

			section[data-section="about"] .ba-text > .ba-appear .ba-line-overflow > div {
				transform: translate(0%, 90%);
			}

		section[data-section="about"] > .ba-8-columns {
			padding-bottom:50vh;
			_padding-bottom:50dvh;
		}

			section[data-section="about"] > .ba-8-columns > div:first-child {
				grid-column: span 5;
			}

			section[data-section="about"] > .ba-8-columns > div:nth-child(2) {
				grid-column: span 1;
			}

			section[data-section="about"] > .ba-8-columns > div:nth-child(3) {
				grid-column: span 2;
			}

			section[data-section="about"] > .ba-8-columns > div:nth-child(4) {
				display:none;
			}

			section[data-section="about"] > .ba-8-columns > div:nth-child(5) {
				padding-top:300px;
				grid-column: 5 / 8;
				z-index:-1;
			}

			section[data-section="about"] > .ba-8-columns .ba-about-hint-1 {
				grid-column: 1 / 2;
				align-self: end;
				padding-bottom: var(--main-spacing);
			}

			section[data-section="about"] > .ba-8-columns .ba-about-hint-2 {
				grid-column: 2 / 9;
				align-self: end;
				padding-bottom: var(--main-spacing);
			}

	img.ba-about-img-1 {
		position: absolute;
		_left:var(--main-spacing);
		left:0;
		width:100%;
	}

	.ba-about-facts-wrapper {
		position: relative;
		opacity:0;
	}

		.ba-about-facts-wrapper ul li {
		}

		.ba-about-facts-wrapper .ba-overlay {
			position:absolute;
			background-color: var(--color1);
			top:0;
			bottom:0;
			left:0;
			width:100%;
			/*box-shadow: 20px 0px 19px var(--color1);*/
		}

	img.ba-about-img-2 {
		padding-top:40px;
		width:100%;
		opacity:0;
	}

		.ba-about-img-2-wrapper {
			position: relative;
		}

		.ba-about-img-2-wrapper .ba-overlay {
			position:absolute;
			background-color: var(--color1);
			top:0;
			bottom:0;
			right:0;
			width:100%;
			/*box-shadow: -20px 0px 19px var(--color1);*/
		}

	img.ba-about-img-3 {
		width:100%;
	}

	section[data-section="about"] .xba-about-hint-1 {
		position: absolute;
		left:var(--main-spacing);
		bottom:calc(var(--main-spacing) + 50vh);
	}

	section[data-section="about"] .xba-about-hint-2 {
		position: absolute;
		left:calc(2 * var(--main-spacing) + var(--column-width));
		bottom:calc(var(--main-spacing) + 50vh);
	}

.ba-narrow-break {
	display: none;
}

@media (max-width: 479px) {
	.ba-narrow-break {
		display: inline;
	}
}

section[data-section="event"] {
	z-index:2;
	height: calc(100vh + 3px);
	_height: 100dvh;
	background-color: var(--color1);
	color: #00ff00;
	padding-top:calc(2 * var(--main-spacing));
}

	section[data-section="event"] .section-transition {
		display:none;
	}

	section[data-section="event"] .ba-overlay {
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:#ffff00;
	}

	section[data-section="event"] .ba-media {
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-position: center center;
		background-size: cover;
		z-index:-1;
	}

		section[data-section="event"] .ba-media .ba-image {
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			background-position: center center;
			background-size: cover;
			z-index:-1;
		}

		section[data-section="event"] .ba-media video {
			position:relative;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	section[data-section="event"] .ba-text {
		padding-top:var(--main-spacing);
		/*
		position:absolute;
		bottom:calc(50% + var(--main-spacing));
		*/
	}

	section[data-section="event"] .ba-hint {
		position: absolute;
		left:var(--main-spacing);
		bottom:var(--main-spacing);
	}

	section[data-section="event"] .ba-contact {
		position: absolute;
		left:calc(((100% - 9 * var(--main-spacing)) / 8) * 1 + 2 * var(--main-spacing));
		bottom:var(--main-spacing);
	}

section[data-section="news-spacer"] {
	display:none;
	height: 50vh;
	_height: 50dvh;
	background-color: var(--color2);
	color: var(--color1);
}

section[data-section="news"] {
	position:relative;
	_min-height: 50vh;
	_height: 50dvh;
	background-color: var(--color2);
	color: var(--color1);
	z-index:3;
	_overflow:hidden;
	transform:translateY(0px);
	_padding:0;
	padding:var(--main-spacing) calc(0.5 * var(--main-spacing));
}

	.ba-news-title {
		max-width:650px;
		padding-bottom:calc(2 * var(--main-spacing));
		padding-left:calc(0.5 * var(--main-spacing));
	}

	/*
	section[data-section="news"]::after {
		content:'';
		position:absolute;
		top:100%;
		height:1px;
		left:0;
		right:0;
		background-color:var(--color1);
	}
		*/

	section[data-section="news"] .ba-news-entries {
		/*
		position:relative;
		left:0;
		right:0;
		bottom:calc(6 * var(--main-spacing));
		*/
		width:100%;
		display: flex;
		overflow: hidden;
	}

		section[data-section="news"] .ba-news-entries ul {
			position:relative;
			/*
			left:calc(0.5 * var(--main-spacing));
			right:calc(0.5 * var(--main-spacing));
			bottom:0;
			*/
			/*height:100%;*/
		}

			section[data-section="news"] .ba-news-entries ul li {
				position:relative;
				overflow:hidden;
				width:calc((100vw - 2 * var(--main-spacing)) / 4);
				padding:0 calc(0.5 * var(--main-spacing));
			}

				section[data-section="news"] .ba-news-entries ul li .ba-loop-item-inner {
					height: calc(
						3 * var(--h2-line-height) +
						0.4 * var(--main-spacing) +
						3 * var(--medium-line-height) +
						0.8 * var(--main-spacing) +
						var(--medium-line-height)
					);
				}

				section[data-section="news"] .ba-news-entries ul li .ba-headline {
					margin: 0;
					height: calc(3 * var(--h2-line-height));
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				section[data-section="news"] .ba-news-entries ul li .ba-text {
					margin-top: calc(0.4 * var(--main-spacing));
					height: calc(3 * var(--medium-line-height));
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				section[data-section="news"] .ba-news-entries ul li .ba-links {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
				}

				section[data-section="news"] .ba-news-entries ul li.ba-separator {
					width:96px;
				}

				section[data-section="news"] .ba-news-entries ul li.ba-separator .ba-headline {
					width:100%;
					text-align: center;
				}

	section[data-section="news"] .ba-news-controls {
		position:relative;
		width:120px;
		height:44px;
		_bottom:calc(3 * var(--main-spacing));
		left:50%;
		margin-left:-60px;
		margin-top:20px;
	}

	section[data-section="news"] .ba-news-controls .ba-prev-wrapper,
	section[data-section="news"] .ba-news-controls .ba-next-wrapper {
		position:absolute;
		top:0;
		width:44px;
		height:44px;
		overflow:hidden;
	}

	section[data-section="news"] .ba-news-controls .ba-prev-wrapper {
		left:0;
	}

	section[data-section="news"] .ba-news-controls .ba-next-wrapper {
		right:0;
	}

	section[data-section="news"] .ba-news-controls .ba-buttons {
		display:flex;
		gap:10px;
	}

		section[data-section="news"] .ba-news-controls img {
			flex:0 0 auto;
			width:44px;
			padding:15px 0;
		}

			.ba-notouch section[data-section="news"] .ba-news-controls img:hover {
				cursor:pointer;
				opacity:0.75;
			}

	section[data-section="news"] .ba-news-controls .ba-prev-wrapper .ba-buttons {
		transition: transform 0.2s ease-out;
		transform:translateX(-54px);
	}

	section[data-section="news"] .ba-news-controls.ba-first .ba-prev-wrapper .ba-buttons {
		transform:translateX(0);
	}

	section[data-section="news"] .ba-news-controls .ba-next-wrapper .ba-buttons {
		transition: transform 0.2s ease-out;
		transform:translateX(0);
	}

	section[data-section="news"] .ba-news-controls.ba-last .ba-next-wrapper .ba-buttons {
		transform:translateX(-54px);
	}

	section[data-section="news"] .ba-hint {
		display:none;
		position: relative;
		padding-left:calc(0.5 * var(--main-spacing));
		_left:var(--main-spacing);
		_bottom:var(--main-spacing);
	}


section[data-section="brands-spacer"] {
	position:relative;
	height: 200vh;
	_opacity:0.1;
	_height: 100dvh;

	_background-color: red;
	color: var(--color1);
	padding-top:calc(3 * var(--main-spacing));
	overflow:hidden;
	pointer-events: none;;
	_transform:translateY(-100dvh);
}

	html.ba-mobile section[data-section="brands-spacer"],
	.ba-section-brands-mobile {
		display:none;
	}


section[data-section="brands"] {
	position:relative;
	height: 100vh;
	_height: 100dvh;
	background-color: var(--color2);
	color: var(--color1);
	padding-top:calc(3 * var(--main-spacing));
	overflow:hidden;
	_transform:translateY(-100dvh);
}

	section[data-section="brands"] > h1 {
		transform:translateX(-6px);
	}

	section[data-section="brands"] .ba-category-images {
		position: absolute;
		right:0;
		top:0;
		bottom:0;
		width:30%;
		transform: translateX(0);
		opacity:1;
		transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
	}

	section[data-section="brands"].ba-brand-selected .ba-category-images,
	.ba-mobile section[data-section="brands"].ba-category-selected .ba-category-images {
		opacity:0;
		transform: translateX(100%);
	}

	section[data-section="brands"] .ba-category-images .ba-category-images-translator {
		position:absolute;
		top:0;
		right:0;
		transform: translateY(-15vh);
		transition: transform var(--brands-select-category-images-animation-duration) cubic-bezier(0.45, 0, 0.55, 1);
		_left:0;
		_bottom:200%;
		line-height: 0;
		text-align: right;
	}

		section[data-section="brands"] .ba-category-images .ba-image {
			position:relative;
			display:inline-block;
			height: 40vh;
			width: 40vh;
			_width: calc(200% / 3);
			background-position: center center;
			background-size: cover;
			transition:all var(--brands-select-category-images-animation-duration) var(--brands-select-category-animation-easing);
		}

			section[data-section="brands"] .ba-category-images .ba-image.ba-active {
				height:60vh;
				width:60vh;
			}

		section[data-section="brands"] .ba-category-index-wrapper {
			position:absolute;
			_top:calc(3 * var(--main-spacing));
			_left:calc(50% + calc(0.5 * var(--main-spacing)));
			_top:calc(3 * var(--main-spacing) + 2 * var(--h1-line-height) - (var(--h1-font-size) - var(--h1-line-height)) / 4 + var(--main-spacing));
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height));
			left:calc(var(--main-spacing));
		}

			section[data-section="brands"] .ba-category-index-wrapper > div {
				position:absolute;
				top:0;
				left:0;
				transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
			}

			section[data-section="brands"] .ba-category-index-wrapper > .ba-selected-category-index-wrapper {
				display:none;
				transform:translateX(var(--column-width));
				opacity:0;
			}

				section[data-section="brands"].ba-category-selected .ba-category-index-wrapper > .ba-category-index {
					transform:translateX(0);
					opacity:1;
				}

				section[data-section="brands"].ba-category-selected .ba-category-index-wrapper > .ba-selected-category-index-wrapper {
					transform:translateX(0%);
					opacity:1;
				}

		section[data-section="brands"] .ba-select-a-category-wrapper {
			display:none;
			position:absolute;
			_top:calc(3 * var(--main-spacing) + 1 * var(--h1-line-height) - (var(--h1-font-size) - var(--h1-line-height)) / 3);
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height));
			right:calc(50% + calc(0.5 * var(--main-spacing)));
			transform:translateY(-100%);
		}

			section[data-section="brands"] .ba-select-a-category {
				display:inline-block;
				white-space: nowrap;
				opacity:1;
				transform:translateX(0%);
				transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
			}

			section[data-section="brands"] .ba-unselect-a-category {
				display:none;
				position:absolute;
				bottom:0;
				left:0;
				color:var(--color4);
				opacity:0;
				pointer-events: none;
				transform:translateX(var(--column-width));
				transition:opacity var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing), transform var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
			}

				section[data-section="brands"] .ba-unselect-a-category::after {
					content:'Categories';
					position:absolute;
					top:100%;
					left:0;
				}

				section[data-section="brands"].ba-category-selected .ba-select-a-category {
					transform:translateX(calc(-1 * var(--column-width)));
					opacity:0;
					pointer-events:none;
				}

				section[data-section="brands"].ba-category-selected .ba-unselect-a-category {
					transform:translateX(0%);
					opacity:1;
					pointer-events: all;
				}

				.ba-notouch section[data-section="brands"] .ba-unselect-a-category:hover {
					cursor:pointer;
					opacity:var(--hover-link-opacity);
					_transition:opacity var(--hover-link-animation-duration) ease-in-out, transform var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
				}

		section[data-section="brands"] .ba-selected-category-name {
			display:none;
			position:absolute;
			top:calc(3 * var(--main-spacing) + 1 * var(--h1-line-height) - (var(--h1-font-size) - var(--h1-line-height)) / 3);
			left:calc(50% + calc(0.5 * var(--main-spacing)));
			opacity:0;
			transform:translateY(-100%) translateX(var(--column-width));
			transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
		}

			section[data-section="brands"].ba-category-selected .ba-selected-category-name {
				transform:translateY(-100%) translateX(0);
				opacity:1;
			}

		section[data-section="brands"] .ba-selected-category-brand-index {
			display:none;
			position:absolute;
			top:calc(4 * var(--main-spacing) + 1 * var(--h1-line-height) - (var(--h1-font-size) - var(--h1-line-height)) / 3);
			left:calc(50% + calc(0.5 * var(--main-spacing)));
			opacity:0;
			transform:translateX(var(--column-width));
			transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
		}

			section[data-section="brands"].ba-category-selected .ba-selected-category-brand-index {
				transform:translateX(0);
				opacity:1;
			}

		section[data-section="brands"] .ba-categories {
			position:absolute;
			display:inline-block;
			user-select:none;
			-webkit-user-select:none;
			_top:calc(3 * var(--main-spacing) + 2 * var(--h1-line-height) - (var(--h1-font-size) - var(--h1-line-height)) / 4 + 100px);
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height) + 100px);
			_left:calc(50% + calc(0.5 * var(--main-spacing)));
			left:calc(var(--main-spacing));
			_transform:translateY(-100%);
			opacity:1;
			transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
		}

			section[data-section="brands"] .ba-select-category {
				display:block;
				color:var(--color4);
				opacity:0.75;
				transition: opacity var(--hover-link-animation-duration) ease-in-out, color var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
			}

				section[data-section="brands"] .ba-select-category.ba-active {
					color:var(--color1);
					opacity:1;
					pointer-events:none;
				}

				.ba-notouch section[data-section="brands"] .ba-select-category:hover {
					cursor:pointer;
					opacity:var(--hover-link-opacity);
				}

		section[data-section="brands"] .ba-select-a-brand-wrapper {
			position:absolute;
			_top:calc(3 * var(--main-spacing) + 2 * var(--h1-line-height) - (var(--h1-font-size) - var(--h1-line-height)) / 4 + var(--main-spacing));
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height));
			left:var(--brandsListOffsetX);
		}

			section[data-section="brands"] .ba-select-a-brand {
				display:inline-block;
				white-space: nowrap;
				opacity:1;
				transform:translateX(0%);
				transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
			}

			section[data-section="brands"] .ba-unselect-a-brand {
				position:absolute;
				top:0;
				left:0;
				color:var(--color4);
				opacity:0;
				pointer-events: none;
				transform:translateX(var(--column-width));
				transition:opacity var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing), transform var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
			}

				section[data-section="brands"].ba-brand-selected .ba-select-a-brand {
					transform:translateX(calc(-1 * var(--column-width)));
					opacity:0;
					pointer-events:none;
				}

				section[data-section="brands"].ba-brand-selected .ba-unselect-a-brand {
					transform:translateX(0%);
					opacity:1;
					pointer-events: all;
				}

				.ba-notouch section[data-section="brands"] .ba-unselect-a-brand:hover {
					cursor:pointer;
					opacity:var(--hover-link-opacity);
				}

		section[data-section="brands"] .ba-brands-list {
			position:absolute;
			user-select:none;
			-webkit-user-select:none;
			_top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height));
			_left:calc(50% + calc(0.5 * var(--main-spacing)));
			_top:calc(3 * var(--main-spacing) + 2 * var(--h1-line-height) - (var(--h1-font-size) - var(--h1-line-height)) / 4 + 100px);
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height) + 100px);
			left:var(--brandsListOffsetX);
		}

		section[data-section="brands"] .ba-brands-list .ba-category-brands-list {
			position:absolute;
			top:0;
			left:0;
			transform:translateX(var(--column-width));
			opacity:0;
			transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
		}

			section[data-section="brands"] .ba-brands-list .ba-category-brands-list.ba-selected {
				opacity:1;
				transform:translateX(0);
			}

				section[data-section="brands"].ba-brand-selected .ba-brands-list .ba-category-brands-list.ba-selected {
					opacity:0;
					transform:translateX(calc(-1 * var(--column-width)));
					pointer-events:none;
				}

				.ba-category-brands-list-entry {
					white-space: nowrap;
					color:var(--color4);
					transition: opacity var(--hover-link-animation-duration) ease-in-out;
				}

					.ba-category-brands-list-entry.ba-selected {
						color:var(--color1);
					}

					.ba-notouch .ba-category-brands-list-entry:hover {
						cursor:pointer;
						opacity: var(--hover-link-opacity);
					}

		/* desktop category highlight: a box in the active color over the category list, same
		   technique as the brand ticker below. Two JS-driven variables on the section
		   (see _syncCategoryHighlight in main.dev.js), no CSS transitions on the geometry:
		     --ba-cat-pos box position in lines (scroll-bound in category mode)
		     --ba-cat-out 0 = in place, 1 = brand mode: list and box are moved left out of the
		                  screen, by the same distance the brand list travels onto the ticker's place
		   The base list has the box cut out (evenodd hole), so the two colors never overlap. */
		.ba-desktop section[data-section="brands"] {
			--ba-cat-shift:calc(-1 * var(--ba-cat-out, 0) * var(--brandsListOffsetX));
		}

		.ba-desktop section[data-section="brands"] .ba-categories {
			transition:none;
			transform:translateX(var(--ba-cat-shift));
			clip-path:polygon(evenodd,
				0 0, 100% 0, 100% 100%, 0 100%, 0 0,
				0 calc(var(--ba-cat-pos, 0) * var(--larger-line-height)),
				100% calc(var(--ba-cat-pos, 0) * var(--larger-line-height)),
				100% calc((var(--ba-cat-pos, 0) + 1) * var(--larger-line-height)),
				0 calc((var(--ba-cat-pos, 0) + 1) * var(--larger-line-height)),
				0 calc(var(--ba-cat-pos, 0) * var(--larger-line-height)));
		}

			/* the base list is all inactive color — the active color comes from the box only */
			.ba-desktop section[data-section="brands"] .ba-select-category.ba-active {
				color:var(--color4);
				opacity:0.75;
			}

		section[data-section="brands"] .ba-category-highlight {
			display:none;
		}

		.ba-desktop section[data-section="brands"] .ba-category-highlight {
			display:block;
			position:absolute;
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height) + 100px);
			left:calc(var(--main-spacing));
			height:var(--larger-line-height);
			overflow:hidden;
			color:var(--color1);
			pointer-events:none;
			user-select:none;
			-webkit-user-select:none;
			transform:translate(var(--ba-cat-shift), calc(var(--ba-cat-pos, 0) * var(--larger-line-height)));
			transition:opacity var(--hover-link-animation-duration) ease-in-out;
		}

			section[data-section="brands"] .ba-category-highlight-layer {
				transform:translateY(calc(-1 * var(--ba-cat-pos, 0) * var(--larger-line-height)));
			}

			/* brand mode: the box links back to its category page (click handler in _initCategoryHighlight) */
			.ba-desktop section[data-section="brands"].ba-brand-selected .ba-category-highlight {
				pointer-events:all;
			}

			.ba-notouch.ba-desktop section[data-section="brands"].ba-brand-selected .ba-category-highlight:hover {
				cursor:pointer;
				opacity:var(--hover-link-opacity);
			}

			/* the regular brand list travels onto the ticker's place (left only) while fading out */
			.ba-desktop section[data-section="brands"].ba-brand-selected .ba-brands-list .ba-category-brands-list.ba-selected {
				transform:translateX(calc(var(--main-spacing) - var(--brandsListOffsetX)));
			}

		/* ticker: the brand list of the active category at the category list's place, with a
		   highlight box over the active brand. The lists stand still, only the box moves.
		   --ba-ticker-pos = box position in lines, set per scroll frame by main.dev.js (no CSS
		   transitions on it — jumps are animated in JS so they can't fight the scroll) */
		section[data-section="brands"] .ba-brand-ticker {
			display:none;
			user-select:none;
			-webkit-user-select:none;
			position:absolute;
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height) + 100px);
			left:var(--main-spacing);
			max-width:calc(var(--brandsListOffsetX) - 2 * var(--main-spacing));
			opacity:0;
			pointer-events:none;
			transform:translateX(calc(var(--brandsListOffsetX) - var(--main-spacing)));
			transition:opacity var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing), transform var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
		}

			.ba-desktop section[data-section="brands"] .ba-brand-ticker {
				display:block;
			}

			.ba-desktop section[data-section="brands"].ba-brand-selected .ba-brand-ticker {
				opacity:1;
				transform:translateX(0);
			}

			/* base layer (inactive color) — the highlight box is cut out of it (evenodd hole),
			   so the two colors never overlap */
			section[data-section="brands"] .ba-brand-ticker-base {
				position:relative;
				color:var(--color4);
				clip-path:polygon(evenodd,
					0 0, 100% 0, 100% 100%, 0 100%, 0 0,
					0 calc(var(--ba-ticker-pos, 0) * var(--larger-line-height)),
					100% calc(var(--ba-ticker-pos, 0) * var(--larger-line-height)),
					100% calc((var(--ba-ticker-pos, 0) + 1) * var(--larger-line-height)),
					0 calc((var(--ba-ticker-pos, 0) + 1) * var(--larger-line-height)),
					0 calc(var(--ba-ticker-pos, 0) * var(--larger-line-height)));
			}

			/* highlight box (active color): moves down by pos lines, its content moves up by the
			   same amount, so the text inside stays in place exactly over the base layer */
			section[data-section="brands"] .ba-brand-ticker-highlight {
				position:absolute;
				top:0;
				left:0;
				right:0;
				height:var(--larger-line-height);
				overflow:hidden;
				color:var(--color1);
				pointer-events:none;
				transform:translateY(calc(var(--ba-ticker-pos, 0) * var(--larger-line-height)));
			}

				section[data-section="brands"] .ba-brand-ticker-highlight > .ba-brand-ticker-layer {
					transform:translateY(calc(-1 * var(--ba-ticker-pos, 0) * var(--larger-line-height)));
				}

				/* all category lists share one grid cell, only the active category is visible */
				section[data-section="brands"] .ba-brand-ticker-layer {
					display:grid;
				}

					section[data-section="brands"] .ba-brand-ticker-list {
						grid-area:1 / 1;
						opacity:0;
						transition:opacity var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
					}

						section[data-section="brands"] .ba-brand-ticker-list.ba-current {
							opacity:1;
						}

					section[data-section="brands"] .ba-brand-ticker-entry {
						height:var(--larger-line-height);
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						pointer-events:none;
						transition:opacity var(--hover-link-animation-duration) ease-in-out;
					}

						/* the ticker box itself never takes clicks, only the visible entries in brand mode */
						.ba-desktop section[data-section="brands"].ba-brand-selected .ba-brand-ticker-base .ba-brand-ticker-list.ba-current .ba-brand-ticker-entry {
							pointer-events:all;
						}

						.ba-notouch section[data-section="brands"] .ba-brand-ticker-base .ba-brand-ticker-list.ba-current .ba-brand-ticker-entry:hover {
							cursor:pointer;
							opacity:var(--hover-link-opacity);
						}

				/* first appearance: put the box on the active brand without sliding there */
				section[data-section="brands"] .ba-brand-ticker.ba-snap .ba-brand-ticker-base,
				section[data-section="brands"] .ba-brand-ticker.ba-snap .ba-brand-ticker-highlight,
				section[data-section="brands"] .ba-brand-ticker.ba-snap .ba-brand-ticker-layer,
				section[data-section="brands"] .ba-brand-ticker.ba-snap .ba-brand-ticker-list {
					transition:none !important;
				}

			.ba-overlay-brands-list {
				display:none;
			}

			section[data-section="brands"] .ba-brand-images {
				position:absolute;
				top:0;
				bottom:0;
				right:0;
			}

				section[data-section="brands"] .ba-brand-images > .ba-brand-image {
					position:absolute;
					top:0;
					bottom:0;
					left:0;
					width:calc(((100vw - 9 * var(--main-spacing)) / 8) * 3 + 3 * var(--main-spacing));
					opacity:0;
					transform: translateX(0);
					transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
					background-position: center center;
					background-size: cover;
				}

					section[data-section="brands"] .ba-brand-images > .ba-brand-image.ba-selected {
						opacity:1;
						transform: translateX(-100%);
					}

		section[data-section="brands"] .ba-brand-facts-wrapper {
			position:absolute;
			_top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height) + 40px);
			top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height) + 100px);
			_left:calc(var(--main-spacing));
			left:var(--brandsListOffsetX);
			width:25%;
		}

			section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-facts {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				opacity:0;
				transform:translateX(var(--column-width));
				transition:all var(--brands-select-category-animation-duration) var(--brands-select-category-animation-easing);
				pointer-events: none;
			}

				section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-detail-logo {
					/*margin-bottom:var(--main-spacing);*/
				}

				section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-detail-logo img {
					/*max-width:100px;*/
					height:calc(2 * var(--h2-line-height));
				}

				section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-detail-story {
					color:var(--color4);
					margin-bottom:var(--main-spacing);
				}

				section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-facts.ba-selected {
					opacity:1;
					transform:translateX(0);
					pointer-events: all;
				}

				section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-facts a {
					color:var(--color4);
					transition: opacity var(--hover-link-animation-duration) ease-in-out;
				}

					.ba-notouch section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-facts a:hover {
						opacity: var(--hover-link-opacity);
					}

				/* collections / lines / markets as three columns below the instagram link */
				section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-detail-facts {
					display:flex;
					column-gap:var(--main-spacing);
					padding-top:var(--main-spacing);
				}

					/* lets a column shrink below its label width, so the label ellipsis can kick in */
					section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-detail-fact,
					.ba-mobile .ba-overlay-category-brands-list-entry .ba-brand-detail-fact {
						min-width:0;
					}

					/* same font as "Back to Brandlist" (.ba-text-small is set in the markup) */
					section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-detail-fact-label {
						color:var(--color4);
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						padding-bottom:calc(0.125 * var(--main-spacing));
					}

					section[data-section="brands"] .ba-brand-facts-wrapper .ba-brand-detail-fact-value {
						font-size:var(--larger-font-size);
						line-height:var(--larger-font-size);
						letter-spacing:var(--larger-letter-spacing);
						color:var(--color4);
					}

		section[data-section="brands"] .ba-hint,
		section[data-section="brands"] .ba-hint-2 {
			position: absolute;
			bottom:var(--main-spacing);
			left:var(--main-spacing);
			transform:translateY(0);
			transition: transform var(--brands-select-category-images-animation-duration) cubic-bezier(0.45, 0, 0.55, 1);
		}

		section[data-section="brands"] .ba-hint-2 {
			transform:translateY(calc(100% + var(--main-spacing)));
		}

		section[data-section="brands"].ba-last-category .ba-hint {
			transform:translateY(calc(-2.5 * var(--small-line-height)));
		}

		section[data-section="brands"].ba-last-category .ba-hint-2 {
			transform:translateY(0);
		}

section[data-section="showrooms-transition-spacer"] {
	height: 75vh;
	_height: 75dvh;
	color: var(--color2);
	pointer-events: none;
}

html.ba-mobile section[data-section="showrooms-transition-spacer"] {
	display:none;
}

section[data-section="showrooms"] {
	color: var(--color2);
	background-color: var(--color1);
	padding-bottom:20vh;
	padding-top:0;
	z-index:500;
}

	section[data-section="showrooms"] > .ba-stick {
		position:sticky;
		top:0;
		padding-top:calc(3 * var(--main-spacing));
		height:100vh;
		z-index:1;
		_overflow:visible;
	}

		.ba-showroom-facts {
			position:relative;
			padding-top:20px;
		}

			.ba-showroom-facts.ba-8-columns .ba-area {
				grid-column: 1 / 6;
				grid-row: 1 / 2;
			}

			.ba-showroom-facts.ba-8-columns .ba-subtitle {
				grid-column: 1 / 6;
				grid-row: 2 / 3;
				align-self: end;
			}

			.ba-showroom-facts.ba-8-columns .ba-title {
				grid-column: 6 / 9;
				grid-row: 1 / 3;
			}

			.ba-showroom-facts.ba-8-columns .ba-description {
				grid-column: 6 / 9;
				_padding:var(--main-spacing) 0;
				overflow:hidden;
			}

			.ba-showroom-facts.ba-8-columns .ba-select-location {
				grid-column: 5 / 9;
			}

				.ba-showroom-facts.ba-8-columns .ba-select-location .ba-arrow {
					display:none;
				}

			.ba-showroom-facts.ba-8-columns .ba-selected-location {
				grid-column: 5 / 6;
			}

				.ba-showroom-facts.ba-8-columns .ba-selected-location > div {
					transform:translateY(0);
					transition:transform 0.2s ease-in-out;
				}

			.ba-showroom-facts.ba-8-columns .ba-locations {
				grid-column: 6 / 7;
				color:var(--color3);
			}

				.ba-showroom-facts.ba-8-columns .ba-locations > div {
					transition:color 0.2s ease-in-out, opacity var(--hover-link-animation-duration) ease-in-out;
				}

				.ba-notouch .ba-showroom-facts.ba-8-columns .ba-locations > div:not(.ba-selected):hover {
					cursor:pointer;
					opacity:var(--hover-link-opacity);
				}

				.ba-showroom-facts.ba-8-columns .ba-locations .ba-selected {
					color:var(--color2);
				}

			.ba-showroom-facts.ba-8-columns .ba-addresses {
				grid-column: 7 / 9;
			}

				.ba-showroom-facts.ba-8-columns .ba-addresses > div {
					position:absolute;
					top:0;
					left:0;
					opacity:0;
					transition:all 0.2s ease-in-out;
					transform:translateX(100%);
				}

					.ba-showroom-facts.ba-8-columns .ba-addresses > div.ba-selected {
						opacity:1;
						transform:translateX(0%);
					}

			.ba-showroom-facts.ba-8-columns .ba-directions {
				grid-column: 6 / 7;
				align-self: end;
				padding-top:var(--main-spacing);
			}

				.ba-showroom-facts.ba-8-columns .ba-directions > a {
					display:none;
				}

					.ba-showroom-facts.ba-8-columns .ba-directions > a.ba-selected {
						display:block;
					}

			.ba-showroom-facts.ba-8-columns .ba-contact {
				grid-column: 7 / 9;
				padding-top:var(--main-spacing);
			}

	.ba-showrooms-media-wall {
		margin-top:-50vh;
		_padding-top:50dvh;
		row-gap: 0;
	}

		.ba-showrooms-media-wall > div {
			line-height:0;
		}

		.ba-showrooms-media-wall > div:nth-child(1) {
			grid-column: 2 / 4;
			grid-row: 1 / 2;
		}

		.ba-showrooms-media-wall > div:nth-child(2) {
			grid-column: 4 / 8;
			grid-row: 1 / 2;
			display: flex;
			flex-wrap: wrap;
		}

		.ba-showrooms-media-wall .ba-right-1-col {
			width:calc((100% - 3 * var(--main-spacing)) / 4);
		}

		.ba-showrooms-media-wall .ba-right-2-col {
			width:calc(((100% - 3 * var(--main-spacing)) / 4) * 2 + 1 * var(--main-spacing));
		}

		.ba-showrooms-media-wall .ba-right-2-col.ba-in-2nd-col {
			transform: translateX(calc( var(--main-spacing)));
		}

		.ba-showrooms-media-wall .ba-right-3-col {
			width:calc(((100% - 3 * var(--main-spacing)) / 4) * 3 + 2 * var(--main-spacing));
		}

		.ba-break {
			width: 100%;
			height: 0;
		}

		.ba-showrooms-media-wall img,
		.ba-showrooms-media-wall video {
			width:calc(100% + var(--main-spacing));
			transform: translateX(calc( var(--main-spacing) / -2));
		}

		.ba-showrooms-media-wall .ba-in-2nd-col img,
		.ba-showrooms-media-wall .ba-in-2nd-col video {
			_transform: none;
		}

		.ba-showrooms-media-wall .ba-inset-1 {
			padding:10% 0 17% 29%;
		}

section[data-section="newsletter-register"] {
	background-color: var(--color5);
	color: var(--color1);
	padding:0 var(--main-spacing);
	overflow:hidden;
	min-height:50vh;
}

	section[data-section="newsletter-register"] > div {
		position:relative;
		padding-top:calc(var(--nav-height) + var(--main-spacing));
	}

		section[data-section="newsletter-register"] > div > .ba-8-columns {
			gap:var(--main-spacing);
		}

		section[data-section="newsletter-register"] > div > .ba-8-columns > h2 {
			grid-column: 1 / 4;
			grid-row: 1 / 3;
		}

		section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-locations {
			grid-column: 4 / 5;
			grid-row: 1 / 3;
			padding-top:2px;
		}

		.ba-checkbox {
			display: flex;
			align-items: flex-start;
			cursor: pointer;
			margin-bottom: 0.5em;
			user-select: none;
		}

		.ba-checkbox input[type="checkbox"] {
			display: none;
		}

		.ba-checkbox-custom {
			flex-shrink: 0; /* Prevent checkbox from shrinking */
			width: var(--main-spacing);
			text-align: center;
			border-bottom: 1px solid var(--color1);
			margin-right: calc(0.5 * var(--main-spacing));
		}

		.ba-checkbox input[type="checkbox"]:not(:checked) + .ba-checkbox-custom {
			color: transparent;
		}

		.ba-checkbox-text {
			flex: 1;
		}

		input[type="text"].ba-input {
			background-color: transparent;
			font-family: 'KHTeka', 'Arial', sans-serif;
			font-size: inherit;
			line-height:inherit;
			letter-spacing: inherit;
			width:100%;
			outline:0;
			margin:0;
			border-radius:0;
			border:none;
			border-bottom: 1px solid var(--color1);
		}

			input[type="text"].ba-input::placeholder {
				color:var(--color1);
			}

		section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-mail-submit {
			grid-column: 5 / 9;
			grid-row: 1 / 2;
		}

			#ba-newsletter-feedback {
				grid-column: 5 / 9;
				position: relative;
				padding-left: calc(1.5 * var(--main-spacing));
				height:calc(2 * var(--small-line-height));
			}

				#ba-newsletter-feedback.ba-success:before,
				#ba-newsletter-feedback.ba-fail:before {
					content:'';
					position:absolute;
					left:0;
					top:calc((var(--small-line-height) - 10px) * 0.5);
					width:10px;
					height:10px;
					border-radius:5px;
					background-color:#00C328;
				}

					#ba-newsletter-feedback.ba-fail:before {
						background-color:#F50000;
					}

		section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-notes {
			grid-column: 5 / 7;
			grid-row: 2 / 3;
			align-self: end;
		}


		/*
		section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-privacy-policy {
			grid-column: 8 / 9;
			grid-row: 2 / 3;
			align-self: end;
		}
		*/

/* jobs */

section[data-section="jobs"] {
	position:relative;
	min-height: 100vh;
	background-color: var(--color2);
	color: var(--color1);
	padding:0 calc(var(--main-spacing));
}

section[data-section="jobs"] .ba-8-columns {
	min-height:100vh;
	overflow:visible;
}

section[data-section="jobs"] .ba-8-columns .ba-left-column {
	min-height:100vh;
	grid-column: 1 / 5;
}

section[data-section="jobs"] .ba-stick {
	position:sticky;

	top:calc(var(--nav-height));
	top:0;
	padding-top: calc(var(--main-spacing) + var(--nav-height));
	padding-bottom: calc(var(--main-spacing) + var(--nav-height));
}

section[data-section="jobs"] .ba-8-columns .ba-right-column {
	height:100%;
	padding-top: calc(var(--main-spacing) + var(--nav-height));
	grid-column: 5 / 9;
}

section[data-section="jobs"] .ba-8-columns .ba-right-column > * {
	max-width: 1024px;
}

	section[data-section="jobs"] .ba-8-columns .ba-left-column .ba-stick > h2,
	section[data-section="jobs"] .ba-8-columns .ba-right-column > h2 {
		margin-top:100px;
		margin-bottom:32px;
	}

	section[data-section="jobs"] .ba-8-columns .ba-left-column .ba-stick > .ba-text {
		margin-bottom:100px;
	}

section[data-section="jobs"] .ba-job-positions-label {
	margin-top:100px;
	margin-bottom:16px;
}

section[data-section="jobs"] .ba-job-item {
	width: 100%;
	border-bottom: 1px solid var(--color1);
	margin-bottom:calc(0.5 * var(--main-spacing));
	transition: border-bottom-width 0.4s ease;
}

section[data-section="jobs"] .ba-job-item.ba-open {
	margin-bottom: calc(1.5 * var(--main-spacing));
}

section[data-section="jobs"] .ba-job-title {
	cursor: pointer;
	padding-top: calc(0.5 * var(--main-spacing));
	padding-bottom:3px;
}

section[data-section="jobs"] .ba-job-body {
	height: 0;
	overflow: hidden;
}

section[data-section="jobs"] .ba-job-separator {
	height: 1px;
	background-color: var(--color1);
	margin-bottom:10px;
}

section[data-section="jobs"] .ba-job-text {
	max-width: 800px;
}

section[data-section="jobs"] .ba-job-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

section[data-section="jobs"] .ba-job-body li {
	padding-left: 1em;
	position: relative;
}

section[data-section="jobs"] .ba-job-body li::before {
	content: '–';
	position: absolute;
	left: 0;
}

section[data-section="jobs"] .ba-job-item b,
section[data-section="jobs"] .ba-job-item strong {
	text-transform: uppercase;
}

section[data-section="jobs"] .ba-jobs-images {
	display: flex;
	gap: var(--main-spacing);
	margin-top: calc(6 * var(--main-spacing));
	align-items: flex-start;
}

section[data-section="jobs"] .ba-jobs-images > div:first-child {
	flex: 0 0 45%;
}

section[data-section="jobs"] .ba-jobs-images > div:last-child {
	flex: 0 0 35%;
}

section[data-section="jobs"] .ba-jobs-images > div img {
	width: 100%;
	display: block;
}

/* jobs responsive */

@media (max-width: 1500px) {
	section[data-section="jobs"] .ba-8-columns .ba-left-column {
		grid-column: 1 / 6;
	}
	section[data-section="jobs"] .ba-8-columns .ba-right-column {
		grid-column: 6 / 9;
	}

	section[data-section="jobs"] .ba-jobs-images > div:first-child {
		flex: 0 0 50%;
	}

	section[data-section="jobs"] .ba-jobs-images > div:last-child {
		flex: 0 0 50%;
	}
}

/* brand facts: use all the space up to the brand image (its width + one spacing) instead of 25% */
@media (min-width: 1024px) and (max-width: 1800px) {
	section[data-section="brands"] .ba-brand-facts-wrapper {
		width:auto;
		right:calc(((100vw - 9 * var(--main-spacing)) / 8) * 3 + 3 * var(--main-spacing) + var(--main-spacing));
	}
}

/* low windows: drop the category index, the "back to brandlist" button takes its place in the
   left column, and the brand facts move up into the row the button used to occupy */
@media (min-width: 1024px) and (max-height: 799.98px) {
	section[data-section="brands"] .ba-category-index-wrapper > .ba-category-index {
		display:none;
	}

	section[data-section="brands"] .ba-unselect-a-brand {
		left:calc(var(--main-spacing) - var(--brandsListOffsetX));
	}

	section[data-section="brands"] .ba-brand-facts-wrapper {
		top:calc(4 * var(--main-spacing) + 2 * var(--h1-line-height));
	}
}

/* not enough height for the section footer hints */
@media (max-height: 1024px) {
	.ba-hint,
	.ba-hint-2,
	.ba-section-footer-hint {
		display:none;
	}

	/* the opener contact block stays */
	section[data-section="opener"] .ba-contact {
		display:block;
	}
}

@media ( max-width:1300px ) {
	:root {
		--brandsListOffsetX: 250px;
	}

	section[data-section="brands"] .ba-category-images .ba-image.ba-active {
		width: 55vw;
	}
}

@media ( max-width:1200px ) {
	:root {
		--brandsListOffsetX: 200px;
	}

	section[data-section="brands"] .ba-category-images .ba-image.ba-active {
		width: 55vw;
	}
}

@media (max-width: 1024px) {
	section[data-section="jobs"] .ba-stick {
		padding:0;
	}

	section[data-section="jobs"] {
		padding:calc(2 * var(--main-spacing)) var(--main-spacing);
	}
	section[data-section="jobs"],
	section[data-section="jobs"] .ba-8-columns,
	section[data-section="jobs"] .ba-8-columns .ba-left-column {
		min-height: unset;
	}
	section[data-section="jobs"] .ba-8-columns .ba-left-column,
	section[data-section="jobs"] .ba-8-columns .ba-right-column {
		grid-column: 1 / 9;
		padding:0;
	}

	section[data-section="jobs"] .ba-stick {
		position:relative;
		top:auto;
	}

	section[data-section="jobs"] .ba-8-columns .ba-right-column {
		margin-top:calc(3 * var(--main-spacing));
		margin-top:0;
	}

	section[data-section="jobs"] .ba-8-columns .ba-right-column > h3 {
		display:none;
	}
}

@media (max-width: 640px) {
	section[data-section="jobs"] .ba-8-columns .ba-right-column > h2 {
		margin-top:80px;
		margin-bottom:32px;
	}

	section[data-section="jobs"] .ba-jobs-images {
		margin-top: calc(3 * var(--main-spacing));
	}

	section[data-section="jobs"] .ba-jobs-images > div:last-child {
		_flex: 0 0 35%;
		_display:none;
	}
}

/* footer */

section[data-section="footer"] {
	background-color: var(--color1);
	color: var(--color2);
	padding:var(--main-spacing);
	padding-bottom:calc(2 * var(--main-spacing) + 17%);
	height:100vh;
	_height:100dvh;
	overflow:hidden;
}

	section[data-section="footer"] > .ba-bar {
		position: relative;
		height:var(--main-spacing);
		border-bottom: 1px solid transparent;
		margin-bottom:calc(1 * var(--main-spacing));
	}

	section[data-section="footer"] > .ba-8-columns {
		gap:var(--main-spacing);
	}

	section[data-section="footer"] > .ba-8-columns > h2 {
		grid-column: 1 / 6;
		grid-row: 1 / 2;
	}

	section[data-section="footer"] > .ba-8-columns > .ba-copy {
		grid-column: 7 / 8;
		grid-row: 1 / 2;
	}

		section[data-section="footer"] > .ba-8-columns > .ba-copy > .ba-copy-year-inline {
			display:none;
		}

	section[data-section="footer"] > .ba-8-columns > .ba-copy-year {
		grid-column: 8 / 9;
		grid-row: 1 / 2;
	}

	section[data-section="footer"] > .ba-8-columns > .ba-contact {
		height:100%;
		grid-column: 1 / 2;
		grid-row: 2 / 4;
	}

		section[data-section="footer"] > .ba-8-columns > .ba-contact > .ba-ig,
		section[data-section="footer"] > .ba-8-columns > .ba-contact > .ba-li {
			position:absolute;
			display:block;
			left:0;
			bottom:0;
		}

		section[data-section="footer"] > .ba-8-columns > .ba-contact > .ba-li {
			left:50px;
		}

		section[data-section="footer"] > .ba-8-columns > .ba-contact img {
			width:36px;
			margin-right:10px;
		}

	section[data-section="footer"] > .ba-8-columns > .ba-showrooms {
		grid-column: 2 / 3;
		grid-row: 2 / 4;
	}

	section[data-section="footer"] > .ba-8-columns > .ba-wap {
		grid-column: 7 / 8;
		grid-row: 2 / 4;
		align-content: end;
		align-self: end;
	}

	section[data-section="footer"] > .ba-8-columns > .ba-imprint {
		grid-column: 8 / 9;
		grid-row: 2 / 3;
	}

	section[data-section="footer"] > .ba-8-columns > .ba-scroll-top {
		grid-column: 8 / 9;
		grid-row: 3 / 4;
		align-self: end;
		_justify-self: end;
	}

#ba-footer-name-wrapper {
	position:absolute;
	left:var(--main-spacing);
	right:var(--main-spacing);
	bottom:var(--main-spacing);
	overflow:hidden;
}

#ba-footer-name {
	fill:var(--color2);
	display:block;
}

section[data-section="footer-name-spacer"] {
	display:none;
	padding:var(--main-spacing);
}

	section[data-section="footer-name-spacer"] > div {
		position:relative;
		width:100%;
		padding-top: 17.542561065877128053293856402665%;
	}

section[data-section="legal"] {
	display:none;
	opacity:0;
	position:fixed;
	top:var(--nav-height);
	left:0;
	right:0;
	bottom:0;
	background-color:var(--color2);
	overflow-y: auto;
	overscroll-behavior: none;
	z-index:30;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

	section[data-section="legal"] .ba-close-button {
		position:fixed;
		top:calc(var(--main-spacing) * 3);
		right:var(--main-spacing);
		font-size:20px;
		transition:all 0.2s ease-in-out;
	}

		.ba-notouch section[data-section="legal"] .ba-close-button:hover {
			cursor:pointer;
			opacity:0.5;
		}

	section[data-section="legal"] h3 {
		padding-bottom:calc(2 * var(--main-spacing));
	}

	section[data-section="legal"].ba-display {
		display:block;
	}

section[data-section="legal"]::-webkit-scrollbar {
	display: none;
}

@media ( max-width:2300px ) {
	section[data-section="footer"] > .ba-8-columns > .ba-contact {
		grid-column: 1 / 3;
		grid-row: 2 / 4;
	}

	section[data-section="footer"] > .ba-8-columns > .ba-showrooms {
		grid-column: 3 / 5;
		grid-row: 2 / 4;
	}
}

@media ( max-width:1800px ) {
	section[data-section="about"] > .ba-8-columns .ba-about-hint-1 {
		grid-column: 1 / 3;
	}

	section[data-section="about"] > .ba-8-columns .ba-about-hint-2 {
		grid-column: 3 / 9;
	}

	section[data-section="event"] .ba-contact {
		left:calc(((100% - 9 * var(--main-spacing)) / 8) * 2 + 3 * var(--main-spacing));
	}

	section[data-section="footer"] > .ba-8-columns > .ba-copy {
		grid-column: 6 / 8;
		grid-row: 1 / 2;
	}

	section[data-section="footer"] > .ba-8-columns > .ba-wap {
		grid-column: 6 / 8;
		grid-row: 2 / 4;
	}

	/*
	section[data-section="brands"] .ba-category-images .ba-image {
		width:30vh;
		_width:30dvh;
	}

	section[data-section="brands"] .ba-category-images .ba-image.ba-active {
		height:40vh;
		width:40vh;
		_height:40dvh;
		_width:40dvh;
	}
	*/

	section[data-section="news"] .ba-news-entries ul li {
		width:calc((100vw - 1 * var(--main-spacing)) / 4);
	}

}

@media ( max-width:1700px ) {

	#nav .ba-links {
		right:158px;
	}

	#nav .ba-links .ba-8-columns {
		display:flex;
		column-gap: normal;
		justify-content: space-between;
		grid-template-columns: none;
	}
}

@media ( max-width:1400px ) {

/*
	.ba-selected-category-index-wrapper,
	.ba-selected-category-brand-index,
	.ba-category-index {
		display:none;
	}
	section[data-section="brands"] .ba-select-a-category-wrapper {
		top:calc(3 * var(--main-spacing));
		left:45%;
		transform: translateY(0%);
	}

	section[data-section="brands"] .ba-unselect-a-category {
		bottom:auto;
		top:0;
	}

	section[data-section="brands"] .ba-selected-category-name {
		top:calc(3* var(--main-spacing) + 2* var(--h1-line-height) -(var(--h1-font-size) - var(--h1-line-height)) / 4);
		transform: translateY(-100%) translateX(var(--column-width));
		left:45%;
	}

		section[data-section="brands"].ba-category-selected .ba-selected-category-name {
			transform:translateY(-100%) translateX(0);
		}

	section[data-section="brands"] .ba-categories {
		left:45%;
	}

	section[data-section="brands"] .ba-brands-list {
		left:45%;
	}
*/

	section[data-section="news"] .ba-news-entries ul li {
		width:calc((100vw - 1 * var(--main-spacing)) / 2.5);
	}

	section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-locations {
		grid-column: 4 / 6;
	}
	section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-mail-submit,
	section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-notes,
	#ba-newsletter-feedback {
		grid-column: 6 / 9;
	}
}

@media ( max-width:1023.999999px ) {
	section[data-section="news"] .ba-news-entries ul li {
		_width:calc(100% / 2.5);
		width:calc((100vw - 1 * var(--main-spacing)) / 2.5);
	}
}

@media ( max-width:800px ) {
	section[data-section="event"] .ba-overlay,
	section[data-section="news-spacer"] {
		display:none;
	}

	section[data-section="news"] {
		position:relative;
		left:auto;
		right:auto;
		top:auto;
		/*
		height: 50vh;
		height: 50dvh;
		*/
	}
}

@media ( max-width:720px ) {
	:root {
		--main-spacing:20px;
		--nav-height:50px;
	}

	#nav .ba-links {
		right:var(--main-spacing);
		align-items:flex-end;
		padding-bottom:9px;
	}

	#nav .ba-links .ba-wide,
	#nav .ba-wap {
		display:none;
	}

	#nav::after {
		right:var(--main-spacing);
	}

	#nav .ba-links .ba-narrow {
		display:block;
	}

	#ba-menu {
		display:block;
	}

	section[data-section="news"] .ba-news-entries ul li {
		_width:calc(100% / 1.5);
		width:calc((100vw - 1 * var(--main-spacing)) / 1.5);
	}

}

@media ( max-width:640px ) {
	section[data-section="news"] .ba-news-entries ul li {
		_width:calc(100% / 1.5);
		width:calc((100vw - 1 * var(--main-spacing)) / 1.5);
	}
}

/*
 * mobile
 */

.ba-mobile .section-transition,
.ba-mobile section[data-section="showrooms-transition-spacer"] {
	display:none;
}

/* hero */
.ba-mobile section[data-section="opener"] {
	height:150vh;
}

.ba-mobile section[data-section="opener"] .ba-welcome {
	max-height:0;
	overflow: hidden;
}

	.ba-mobile section[data-section="opener"] .ba-welcome.ba-show {
		max-height:400px;
	}

.ba-mobile section[data-section="opener"] .ba-contact {
	bottom:auto;
	top:calc(100dvh - 100px);
	transform:translateY(-100%);
	opacity:0;
	transition: opacity 0.8s var(--easing-1), top 0.5s ease-in-out;
}

	.ba-mobile section[data-section="opener"] .ba-contact.ba-show {
		opacity: 1;
	}

.ba-mobile section[data-section="opener"] .ba-contact .ba-sm {
	display:none;
}

.ba-mobile section[data-section="opener"] .ba-hint {
	bottom:auto;
	top:calc(100dvh - var(--main-spacing));
	transform:translateY(-100%);
	transition: top 0.5s ease-in-out;
}

/* about */

.ba-mobile section[data-section="about"] > .ba-8-columns {
	padding-bottom:0;
}

.ba-mobile section[data-section="about"] > .ba-8-columns > div:first-child {
	grid-column: 1 / 9;
}

.ba-mobile section[data-section="about"] > .ba-8-columns > div:nth-child(2) {
	grid-column: 1 / 4;
}

.ba-mobile section[data-section="about"] > .ba-8-columns > div:nth-child(3) {
	grid-column: 4 / 9;
}

.ba-mobile section[data-section="about"] > .ba-8-columns > div:nth-child(4) {
	display:block;
	grid-column: 1 / 9;
}

.ba-mobile section[data-section="about"] > .ba-8-columns > div:nth-child(5) {
	padding-top:calc(2 * var(--main-spacing));
	padding-bottom:var(--main-spacing);
	grid-column: 1 / 9;
}

.ba-mobile img.ba-about-img-1 {
	position:relative;
	left:0;
	padding-top:80px;
	padding-bottom:50px;
	width:calc(100% + var(--main-spacing));
}

.ba-mobile .ba-about-facts-wrapper {
	display:none;
}

.ba-mobile .ba-about-img-2-wrapper .ba-overlay {
	display:none;
}

.ba-mobile img.ba-about-img-2 {
	opacity:1;
}

.ba-mobile section[data-section="about"] > .ba-8-columns .ba-about-hint-1,
.ba-mobile section[data-section="about"] > .ba-8-columns .ba-about-hint-2 {
	display:none;
}

/* event */

.ba-mobile section[data-section="event"] .ba-hint {
	display:none;
}

.ba-mobile section[data-section="event"] .ba-contact {
	position: absolute;
	left:var(--main-spacing);
	bottom:var(--main-spacing);
}

/* news */

.ba-mobile section[data-section="news"] {
	transform: none;
	_height:100vh;
	_padding-top:calc(3 * var(--main-spacing));
}

.ba-mobile section[data-section="news"] > h2 br {
	display:none;
}

.ba-mobile section[data-section="news"] .ba-news-entries ul li {
	xwidth:calc(100% / 1.5);
}

.ba-mobile section[data-section="news"] .ba-hint {
	display:none;
}

.ba-mobile section[data-section="news"] .ba-news-entries {
	_bottom:calc(6 * var(--main-spacing));
}

.ba-mobile section[data-section="news"] .ba-news-controls {
	_bottom:calc(2 * var(--main-spacing));
}

/* brands */

#ba-section-brands-mobile-wrapper {
	display:none;
	position:relative;
	background-color: var(--color2);
	color: var(--color1);
	--brands-category-stagger: 30px;
	--brands-category-image-gap: var(--main-spacing);
	--brands-category-name-height: calc(5px + var(--h2-line-height) + 0.5 * var(--main-spacing));
	/* the title is its own section now and scrolls away — the categories stick right below the nav */
	--brands-top-offset: var(--nav-height);
}

.ba-mobile #ba-section-brands-mobile-wrapper {
	display:block;
}

#ba-section-showrooms-wrapper {
	position:relative;
	background-color: var(--color2);
	color: var(--color1);
}

	.ba-mobile .ba-section-brands-mobile {
		display:block;
	}

	.ba-section-brands-mobile.ba-static {
		position:relative;
		padding:calc(3 * var(--main-spacing)) var(--main-spacing) var(--main-spacing) var(--main-spacing);
		background-color:var(--color2);
		color:var(--color1);
	}

		.ba-section-brands-mobile.ba-static > h1.ba-title {
			transform:translateX(-4px);
		}

	.ba-section-brands-mobile.ba-static .ba-text {
		padding-top:var(--main-spacing);
		padding-bottom:var(--main-spacing);		
	}

		.ba-section-brands-mobile.ba-static .ba-text .ba-brighter {
			color:var(--color4);
		}

	.ba-section-brands-mobile.ba-category {
		position:sticky;
		top:calc(var(--brands-top-offset) + var(--i, 0) * var(--brands-category-stagger));
		padding:0 0 var(--main-spacing) 0;
		background-color:var(--color2);
		cursor:pointer;
	}

		.ba-section-brands-mobile.ba-category .ba-category-name {
			background-color:var(--color2);
			color: var(--color1);
			padding-top:5px;
			padding-bottom:calc(0.5 * var(--main-spacing));
			padding-left:var(--main-spacing);
			padding-right:var(--main-spacing);
			position:relative;
		}

		/* beige band above the name, matching the space below it (name padding-bottom + image gap).
		   it can't be layered under the previous card's name (each sticky card is its own stacking
		   context), so instead the band is itself sticky: its top never goes above the bottom of the
		   previous card's name — it stops there and slides down behind this card's own name.
		   natural box sits at the card top (margin-bottom cancels its height), translateY moves it above. */
		.ba-section-brands-mobile.ba-category .ba-category-band {
			--band-height: calc(0.5 * var(--main-spacing) + var(--brands-category-image-gap) - 5px);
			--band-min-top: calc(var(--brands-top-offset) + (var(--i, 0) - 1) * var(--brands-category-stagger) + 5px + var(--h2-line-height));
			position:sticky;
			top:calc(var(--band-min-top) + var(--band-height));
			height:var(--band-height);
			margin-bottom:calc(-1 * var(--band-height));
			transform:translateY(-100%);
			background-color:var(--color2);
			pointer-events:none;
		}

			/* first card: no previous name to slide under, the band never gets clipped */
			.ba-section-brands-mobile.ba-category:first-child .ba-category-band {
				--band-min-top: 0px;
			}

	.ba-section-brands-mobile.ba-category .ba-image {
		width:100%;
		height:calc(
			100vh
			- var(--brands-top-offset)
			- var(--i, 0) * var(--brands-category-stagger)
			- 1 * var(--main-spacing)
			- var(--brands-category-name-height)
			- 2 * var(--brands-category-image-gap)
		);
		margin-top:var(--brands-category-image-gap);
		margin-bottom:var(--brands-category-image-gap);
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		position:relative;
		overflow:hidden;
	}

		/* last card: no bottom padding / image gap, so the image meets the event section.
		   the removed space goes into the image height, so the card still fills the viewport */
		.ba-section-brands-mobile.ba-category:last-child {
			padding-bottom:0;
		}

			.ba-section-brands-mobile.ba-category:last-child .ba-image {
				margin-bottom:0;
				height:calc(
					100vh
					- var(--brands-top-offset)
					- var(--i, 0) * var(--brands-category-stagger)
					- var(--brands-category-name-height)
					- var(--brands-category-image-gap)
				);
			}

		.ba-section-brands-mobile.ba-category .ba-image .ba-brand-names {
			position:absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			padding:var(--main-spacing);
			overflow:hidden;
			mix-blend-mode: difference;
			color: #ffffff;
			font-family: 'KHTeka', 'Arial', sans-serif;
			font-weight:900;
			text-transform: uppercase;
			line-height:calc(1.1 * var(--larger-font-size));
		}

			.ba-section-brands-mobile.ba-category .ba-image .ba-brand-names ul {
				list-style:none;
				margin:0;
				padding:0;
			}

			.ba-section-brands-mobile.ba-category .ba-image .ba-brand-names li {
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}


.ba-mobile section[data-section="brands"] {
	display:none;
}

.ba-mobile section[data-section="brands"] {
	z-index:5;
	padding-top:calc(2 * var(--main-spacing));
}

.ba-mobile section[data-section="brands"] .ba-select-a-category-wrapper {
	position:absolute;
	top:auto;
	bottom:calc(45% + var(--main-spacing) + 4 * var(--larger-line-height));
	left:auto;
	right:auto;
	padding-top:var(--main-spacing);
}

.ba-mobile section[data-section="brands"].ba-category-selected .ba-select-a-category {
	transform: none;
	opacity: 1;
	pointer-events: all;
}

.ba-mobile section[data-section="brands"] .ba-categories,
.ba-mobile section[data-section="brands"].ba-category-selected .ba-categories {
	position:absolute;;
	top:auto;
	bottom:calc(45% + var(--main-spacing));
	left:150px;
	transform: none;
	opacity:1;
}

.ba-mobile section[data-section="brands"] .ba-select-a-brand-wrapper,
.ba-mobile section[data-section="brands"] .ba-brand-facts-wrapper,
.ba-mobile section[data-section="brands"] .ba-brands-list,
.ba-mobile section[data-section="brands"].ba-category-selected .ba-selected-category-name,
.ba-mobile section[data-section="brands"] .ba-unselect-a-category,
.ba-mobile section[data-section="brands"] .ba-brand-images,
.ba-mobile section[data-section="brands"] .ba-hint,
.ba-mobile section[data-section="brands"] .ba-selected-category-brand-index,
.ba-mobile section[data-section="brands"] .ba-category-index-wrapper {
	display:none;
}

.ba-mobile section[data-section="brands"] .ba-category-images {
	top:auto;
	left:0;
	right:0;
	bottom:0;
	width:auto;
	height:0;
	transform:translateY(0);
	opacity:1;
}

	.ba-mobile section[data-section="brands"] .ba-category-images .ba-category-images-translator {
		top:auto;
		right:auto;
		left:0;
		bottom:0;
		width:500vw;
		transform:translateY(0);
		text-align: left;
		transition:none;
	}

		.ba-mobile section[data-section="brands"] .ba-category-images .ba-image {
			width:50vw;
			height:40vh;
			_padding-top:min(10%, 200px);
		}

		.ba-mobile section[data-section="brands"] .ba-category-images .ba-image.ba-clone {
			display:none;
		}

		.ba-mobile section[data-section="brands"] .ba-category-images .ba-image.ba-active {
			width:50vw;
			height:40vh;
		}

.ba-mobile .ba-overlay-brands-list {
	display:block;
	position:fixed;
	top:0;
	bottom:0;
	left:100vw;
	width:100vw;
	_height:100vh;
	z-index:999;
}

	.ba-mobile .ba-overlay-brands-list .ba-category-brands-list {
		display:block;
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		width:100vw;
		_height:100vh;
		transform: translateX(100%);
		opacity:1;
		transition: all 0.5s ease-in-out;
		overscroll-behavior: none;
		background-color: var(--color2);
		padding:var(--nav-height) var(--main-spacing) calc(2 * var(--main-spacing)) var(--main-spacing);
	}

		.ba-mobile .ba-overlay-brands-list .ba-category-brands-list.ba-selected {
			transform:translateX(0);
			opacity:1;
		}

		.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-scroll {
			position:absolute;
			top:calc(var(--nav-height));
			right:var(--main-spacing);
			left:var(--main-spacing);
			bottom:calc(4 * var(--main-spacing));
			overflow-y:auto;
			overscroll-behavior: none;
			scrollbar-width: none;        /* Firefox */
			-ms-overflow-style: none;     /* IE 10+ */
		}

			.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-scroll .ba-category-name {
				padding-top:var(--main-spacing);
				padding-bottom:calc(2 * var(--main-spacing));
			}

			.ba-mobile .ba-overlay-category-brands-list-entry {
				padding-bottom:calc(2 * var(--main-spacing));
			}

				.ba-mobile .ba-overlay-category-brands-list-entry > h2 {
					font-size:calc(0.75 * var(--h2-font-size));
					line-height:calc(0.75 * var(--h2-line-height));
				}

				.ba-mobile .ba-overlay-category-brands-list-entry .ba-image {
					position:relative;
					background-size: cover;
					background-position: center top;
					padding-top:100%;
					width:100%;
					height:0;
					margin-bottom:calc(1 * var(--main-spacing));
				}

				.ba-mobile .ba-overlay-category-brands-list-entry .ba-brand-detail-story {
					color:var(--color4);
				}

				.ba-mobile .ba-overlay-category-brands-list-entry a {
					display:inline-block;
					color: var(--color4);
					transition: opacity var(--hover-link-animation-duration) ease-in-out;
					padding-top:calc(0.5 * var(--main-spacing));
					/*font-size: 75%;
					line-height: 75%;*/
					max-width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

					.ba-mobile.ba-notouch .ba-overlay-category-brands-list-entry a:hover {
						opacity: var(--hover-link-opacity);
					}

				/* instagram sits directly under the website link */
				.ba-mobile .ba-overlay-category-brands-list-entry .ba-brand-detail-sm a {
					padding-top:0;
				}

				/* markets / lines in one row, collections below across the full width */
				.ba-mobile .ba-overlay-category-brands-list-entry .ba-brand-detail-facts {
					display:grid;
					grid-template-columns:calc(3 * (100% - var(--main-spacing)) / 8) 1fr;
					column-gap:var(--main-spacing);
					row-gap:var(--main-spacing);
					padding-top:var(--main-spacing);
				}

					.ba-mobile .ba-overlay-category-brands-list-entry .ba-brand-detail-facts .ba-brand-detail-collections {
						grid-column:1 / -1;
					}

					/* same font as the category nav texts in the overlay buttons */
					.ba-mobile .ba-overlay-category-brands-list-entry .ba-brand-detail-fact-label {
						color:var(--color4);
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
					}

					/* same font as the brand description */
					.ba-mobile .ba-overlay-category-brands-list-entry .ba-brand-detail-fact-value {
						font-size:calc(0.75 * var(--h2-font-size));
						line-height:calc(0.75 * var(--h2-line-height));
						color:var(--color4);
					}

		.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-buttons {
			position:absolute;
			bottom:0;
			height:calc(4 * var(--main-spacing));
			left:var(--main-spacing);
			right:var(--main-spacing);
			display:flex;
			align-items:flex-end;
			justify-content:space-between;
			padding-bottom:calc(0.5 * var(--main-spacing));
			border-top: 1px solid var(--color1);
		}

		.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-buttons > .ba-link {
			color: var(--color4);
		}

		.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-overlay-categories-nav {
			display:grid;
			grid-template-columns:1fr 1fr;
			grid-template-rows:auto auto;
		}

			.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-overlay-categories-nav .ba-nav-row1-spacer {
				grid-column:1 / 3;
				grid-row:1 / 2;
				pointer-events:none;
			}

			.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-overlay-categories-nav .ba-nav-prev {
				grid-column:1;
				grid-row:1 / 3;
				display:flex;
				align-items:flex-start;
				justify-content:flex-start;
				cursor:pointer;
			}

			.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-overlay-categories-nav .ba-nav-next {
				grid-column:2;
				grid-row:1 / 3;
				display:flex;
				align-items:flex-start;
				justify-content:flex-end;
				cursor:pointer;
			}

			.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-overlay-categories-nav .ba-nav-label {
				grid-column:1 / 3;
				grid-row:2;
				pointer-events:none;
				text-align:right;
			}

			.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-overlay-categories-nav .ba-nav-prev.ba-disabled,
			.ba-mobile .ba-overlay-brands-list .ba-category-brands-list .ba-overlay-categories-nav .ba-nav-next.ba-disabled {
				/*opacity:0.25;*/
				opacity:1;
				color:var(--color6);
				cursor:default;
				pointer-events:none;
			}

/* showroom */

.ba-mobile section[data-section="showrooms"] > .ba-stick {
	position: relative;
	height:auto;
	top:auto;
	padding:var(--main-spacing) 0;
}

.ba-mobile .ba-showroom-facts.ba-8-columns > * {
	grid-column: 1 / 9;
	grid-row:initial;
}

.ba-mobile .ba-showroom-facts.ba-8-columns .ba-area {
	order:1;
}
.ba-mobile .ba-showroom-facts.ba-8-columns .ba-subtitle {
	order:3;
	padding:var(--main-spacing) 0;
}
.ba-mobile .ba-showroom-facts.ba-8-columns .ba-title {
	order:2;
}
.ba-mobile .ba-showroom-facts.ba-8-columns .ba-description {
	order:4;
	padding:var(--main-spacing) 0;
}

	.ba-mobile .ba-showroom-facts.ba-8-columns .ba-description br {
		display:none;
	}

.ba-mobile .ba-showroom-facts.ba-8-columns .ba-select-location {
	order:5;
	padding:calc(1.5 * var(--main-spacing)) 0 calc(1 * var(--main-spacing));
	/* shares one row with the location list */
	grid-column:1 / 4;
}

	.ba-mobile .ba-showroom-facts.ba-8-columns .ba-select-location .ba-arrow {
		display:inline;
	}

.ba-mobile .ba-showroom-facts.ba-8-columns .ba-locations {
	order:6;
	padding-bottom:calc(1.5 * var(--main-spacing));
	/* next to "pick your spot", tops aligned */
	grid-column:4 / 9;
	padding-top:calc(1.5 * var(--main-spacing));
}

.ba-mobile .ba-showroom-facts.ba-8-columns .ba-selected-location {
	display:none;
}
.ba-mobile .ba-showroom-facts.ba-8-columns .ba-addresses {
	order:7;
	height:calc(3 * var(--larger-line-height));
}
.ba-mobile .ba-showroom-facts.ba-8-columns .ba-contact {
	order:8;
}
.ba-mobile .ba-showroom-facts.ba-8-columns .ba-directions {
	order:9;
	height:calc(3 * var(--larger-line-height));
	padding-top:calc(2 * var(--main-spacing));
}

.ba-mobile .ba-showrooms-media-wall {
	margin-top:calc(3 * var(--main-spacing));
}

.ba-mobile .ba-showrooms-media-wall > div:nth-child(1) {
	grid-column: 1 / 5;
}

.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) {
	grid-column: 5 / 9;
}

	.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) > div.ba-break {
		display:none;
	}

	.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) > div:nth-child(1) {
		order:1;
		width:100%;
	}

	.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) > div:nth-child(3) {
		order:2;
		width:40%;
	}

	.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) > div:nth-child(5) {
		order:4;
		width:100%;
	}

	.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) > div:nth-child(6) {
		order:5;
		width:100%;
	}

	.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) > div:nth-child(7) {
		order:3;
		width:75%;
		display:none;
	}

	.ba-mobile .ba-showrooms-media-wall > div:nth-child(2) > div:nth-child(9) {
		order:6;
		width:75%;
	}

	/* newsletter */

	.ba-mobile section[data-section="newsletter-register"] h2 {
		font-size:calc(0.75 * var(--h2-font-size));
		line-height:calc(0.75 * var(--h2-line-height));
	}

		.ba-mobile section[data-section="newsletter-register"] h2 br {
			display:none;
		}

	.ba-mobile section[data-section="newsletter-register"] > div {
		padding-top:calc(3 * var(--main-spacing));
	}

	.ba-mobile section[data-section="newsletter-register"] > div > .ba-8-columns {
		row-gap: calc(2 * var(--main-spacing));
	}

	.ba-mobile section[data-section="newsletter-register"] > div > .ba-8-columns > *,
	.ba-mobile section[data-section="newsletter-register"] > div > .ba-8-columns > #ba-newsletter-feedback {
		grid-column: 1 / 9;
		grid-row: auto;
	}

	.ba-mobile section[data-section="newsletter-register"] > div > .ba-8-columns > .ba-mail-submit {
	}

	/* footer */

	.ba-mobile section[data-section="footer"] {
		height:auto;
		min-height:100vh;
	}

	.ba-mobile section[data-section="footer"] h2 {
		font-size:calc(0.75 * var(--h3-font-size));
		line-height:calc(0.75 * var(--h3-line-height));
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > * {
		grid-column: 1/9;
		grid-row:auto;
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-copy > .ba-copy-year-inline {
		display:inline;
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-copy-year {
		display:none;
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-copy {
		order:10;
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-imprint {
		grid-column: 1 / 8;
		order:11;
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-scroll-top {
		grid-column: 8 / 9;
		order:12;
		align-self: end;
		justify-self: end;
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-wap {
		display:none;
	}

	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-contact > .ba-ig,
	.ba-mobile section[data-section="footer"] > .ba-8-columns > .ba-contact > .ba-li {
			position:relative;
			display:inline-block;
			left:auto;
			bottom:auto;
		}

@media (orientation:landscape) and (max-height:512px) {
	.ba-mobile #ba-mobile-landscape-overlay {
		display:flex;
	}
}
/*
 * tablet
 */

.ba-tablet .section-transition,
.ba-tablet section[data-section="showrooms-transition-spacer"] {
	 display:none;
}

/* hero */
.ba-tablet section[data-section="opener"] {
	height:100vh;
}

.ba-tablet section[data-section="opener"] .ba-welcome {
	max-height:0;
	overflow: hidden;
}

	.ba-tablet section[data-section="opener"] .ba-welcome.ba-show {
		max-height:400px;
	}

.ba-tablet section[data-section="opener"] .ba-contact {
	bottom:auto;
	top:calc(100dvh - 100px);
	transform:translateY(-100%);
	opacity:0;
	transition: opacity 0.8s var(--easing-1), top 0.5s ease-in-out;
}

	.ba-tablet section[data-section="opener"] .ba-contact.ba-show {
		opacity: 1;
	}

.ba-tablet section[data-section="opener"] .ba-contact .ba-sm {
	display:none;
}

.ba-tablet section[data-section="opener"] .ba-hint {
	bottom:auto;
	top:calc(100dvh - var(--main-spacing));
	transform:translateY(-100%);
	transition: top 0.5s ease-in-out;
}

/* about */

.ba-tablet section[data-section="about"] > .ba-8-columns {
	padding-bottom:0;
}

.ba-tablet section[data-section="about"] > .ba-8-columns > div:first-child {
	grid-column: 1 / 9;
}

.ba-tablet section[data-section="about"] > .ba-8-columns > div:nth-child(2) {
	grid-column: 1 / 4;
}

.ba-tablet section[data-section="about"] > .ba-8-columns > div:nth-child(3) {
	grid-column: 4 / 9;
}

.ba-tablet section[data-section="about"] > .ba-8-columns > div:nth-child(4) {
	display:block;
	grid-column: 1 / 9;
}

.ba-tablet section[data-section="about"] > .ba-8-columns > div:nth-child(5) {
	padding-top:calc(2 * var(--main-spacing));
	padding-bottom:var(--main-spacing);
	grid-column: 1 / 9;
}

.ba-tablet img.ba-about-img-1 {
	position:relative;
	left:0;
	padding-top:80px;
	padding-bottom:50px;
	width:calc(100% + var(--main-spacing));
}

.ba-tablet .ba-about-facts-wrapper {
	display:none;
}

.ba-tablet .ba-about-img-2-wrapper .ba-overlay {
	display:none;
}

.ba-tablet img.ba-about-img-2 {
	opacity:1;
}

.ba-tablet section[data-section="about"] > .ba-8-columns .ba-about-hint-1,
.ba-tablet section[data-section="about"] > .ba-8-columns .ba-about-hint-2 {
	display:none;
}

/* event */

.ba-tablet section[data-section="event"] .ba-hint {
	display:none;
}

.ba-tablet section[data-section="event"] .ba-contact {
	position: absolute;
	left:var(--main-spacing);
	bottom:var(--main-spacing);
}

/* brands */

.ba-tablet section[data-section="brands-spacer"] {
	display:none;
}

/* news */

.ba-tablet section[data-section="news"] {
	transform: none;
}

.ba-tablet section[data-section="news"] .ba-news-entries ul li {
	xwidth:calc(100% / 1.5);
}

.ba-tablet section[data-section="news"] .ba-hint {
	display:none;
}

.ba-tablet section[data-section="news"] .ba-news-entries {
	_bottom:var(--main-spacing);
}

/* showroom */

.ba-tablet section[data-section="showrooms"] > .ba-stick {
	position: relative;
	height:auto;
	top:auto;
	padding:var(--main-spacing) 0;
}

.ba-tablet .ba-showroom-facts.ba-8-columns .ba-select-location,
.ba-tablet .ba-showroom-facts.ba-8-columns .ba-selected-location {
	display:none;
}

.ba-tablet .ba-showroom-facts.ba-8-columns .ba-title {
	grid-column: 5 / 9;
}

.ba-tablet .ba-showroom-facts.ba-8-columns .ba-description {
	grid-column: 5 / 9;
	padding:var(--main-spacing) 0;
}

	.ba-tablet .ba-showroom-facts.ba-8-columns .ba-description br {
		display:none;
	}

.ba-tablet .ba-showroom-facts.ba-8-columns .ba-locations,
.ba-tablet .ba-showroom-facts.ba-8-columns .ba-directions {
	grid-column: 5 / 7;
}

.ba-tablet .ba-showrooms-media-wall {
	margin-top:-200px;
}

/* footer */
.ba-tablet section[data-section="footer"] > .ba-8-columns > .ba-copy {
	grid-column: 5 / 9;
}

/*
.ba-tablet section[data-section="footer"] > .ba-8-columns > .ba-copy > .ba-copy-year-inline {
	display:inline;
}

.ba-tablet section[data-section="footer"] > .ba-8-columns > .ba-copy-year {
	display:none;
}
	*/

.ba-tablet section[data-section="footer"] > .ba-8-columns > .ba-wap {
	grid-column: 5 / 7;
}

.ba-tablet section[data-section="footer"] > .ba-8-columns > .ba-imprint {
	grid-column: 7 / 9;
}
/* cookie / tracking consent banner (shared by main site and register-sample-sale) */

#ba-tracking-banner {
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:20;
	display:flex;
	align-items:center;
	gap:var(--main-spacing);
	padding:var(--main-spacing);
	background-color:var(--color2);
	color:var(--color1);
	transform:translateY(0);
	transition:transform 0.6s var(--easing-2);
}

	#ba-tracking-banner.ba-out {
		transform:translateY(110%);
	}

	#ba-tracking-banner .ba-tracking-title {
		flex-shrink:0;
	}

	#ba-tracking-banner .ba-tracking-text {
		flex:1;
		max-width:60ch;
	}

	#ba-tracking-banner .ba-buttons {
		flex-shrink:0;
		display:flex;
		gap:calc(0.5 * var(--main-spacing));
		margin-left:auto;
	}

		#ba-tracking-banner .ba-buttons .ba-button {
			text-align:center;
			white-space:nowrap;
			padding:calc(0.5 * var(--main-spacing)) calc(1.5 * var(--main-spacing));
			font-size:var(--small-font-size);
			line-height:var(--small-line-height);
			border:1px solid var(--color1);
			background-color:var(--color1);
			color:var(--color2);
		}

		#ba-tracking-banner .ba-buttons .ba-button.ba-alt {
			background-color:transparent;
			color:var(--color1);
		}

@media (max-width:1024px) {
	#ba-tracking-banner {
		flex-direction:column;
		align-items:stretch;
		gap:calc(0.75 * var(--main-spacing));
	}

		#ba-tracking-banner .ba-buttons {
			width:100%;
		}

			#ba-tracking-banner .ba-buttons .ba-button {
				flex:1;
			}
}

.ba-hide {
	display:none !important;
}


/* Content */

.hide {
	display:none !important;
}