:root {
	--font: 'Yrsa', sans-serif;
	--headline: 'Stick';
	--black: #2E2E2E;
	--white: #FFF;
	
	--brown01: #E18701;
	--brown02: #A85A0B;
	--brown03: #38200B;
	--brown04: #241500;
	
	--green01: #C2BB91;
	--green02: #91B869;
	--green03: #648148;
	
	--lightyellow: #FDF6ED;
	--lightyellow2: #FDEED9;
	
	--lightorange: #FBF7F6;

	--lightblue: #EDEFF1;
	
	--blacktransparent: rgba(46,46,46,0.9);
}

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

/*
html {
	scroll-padding-top: 0;
	scroll-behavior: smooth;
}
*/

/*
@keyframes flyInBounce2 {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  60% {
    transform: translateY(20px);
    opacity: 1;
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes flyInBounce {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  60% {
    transform: translateY(30px);
    opacity: 1;
  }
  75% {
    transform: translateY(-15px);
  }
  85% {
    transform: translateY(15px);
  }
  92% {
    transform: translateY(-10px);
  }
  97% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

#page-wrapper {
  animation: flyInBounce 1.2s ease-out;
}
*/

body {
	font-family: var(--font);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	color: var(--black);
	background: var(--white);
	overflow-x: hidden;
}

main {
	overflow-x: hidden;
}

.container {
	width: 100%;
	max-width: 1530px;
	padding: 0 1.562rem;
	margin: 0 auto;
	position: relative;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

img {
	width: 100%;
	height: auto;
}

.obj_cover {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/*** Headlines ***/

h1, h2, h3, h4, h5 {
	display: block;
	margin: 0;
}

h1 {
	font-size: 1.875rem;
	font-family: var(--headline);
	color: var(--brown01);
	line-height: 1.3;
	margin: 0 0 3.125rem 0;
}

h1.stick {
	font-family: var(--headline);
	font-size: 128px;
	font-weight: 400;
	margin: 0;
}

h2 {
	font-family: var(--font);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	margin: 0 0 1.5625rem 0;
	position: relative;
}

h3.stick {
	font-family: var(--headline);
	font-size: 40px;
	font-weight: 400;
	margin: 0;
}

h2.section-header {
	font-family: var(--font);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	margin: 0 0 1.5625rem 0;
	position: relative;
}

.section-header.line-small_01::after {
	content: '';
	width: 46.875rem;
	height: 3.25rem;
	display: block;
	background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/line-small_01.svg') no-repeat left center/auto 100%;
}
.section-header.line-small_02::after {
	content: '';
	width: 100%;
	height: 3.25rem;
	display: block;
	background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/line-small_02.svg') no-repeat left center/auto 100%;
}
.section-header.line-small_03::after {
	content: '';
	width: 55rem;
	height: 1.875rem;
	display: block;
	background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/line-small_03.svg') no-repeat left center/auto 100%;
}
.section-header.line-small_04::after {
	content: '';
	width: 37.5rem;
	height: 1.3125rem;
	display: block;
	background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/line-small_04.svg') no-repeat left center/auto 100%;
}
.section-header.line-small_05::after {
	content: '';
	width: 28.125rem;
	height: 1.9375rem;
	display: block;
	background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/line-small_05.svg') no-repeat left center/auto 100%;
}

.section-header.line-large_01::after {
	content: '';
	width: 92.5rem;
	height: 3.25rem;
	display: block;
	background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/line-large_01.svg') no-repeat left center/auto 100%;
}

.section-header.line-arrow_01::after {
	content: '';
	width: 47.1875rem;
	height: 3.25rem;
	display: block;
	background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/line-arrow_01.svg') no-repeat left center/auto 100%;
}

p {
	margin: 0;
	padding: 0 0 0.9375rem 0;
}

p:last-child {
	padding: 0;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

/*** Links ***/

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

.ce-bodytext {
	a {
		color: inherit;
		text-decoration: underline;
		font-weight: 700;
		&:hover {
			text-decoration: none;
		}
	}
}

a.pfeil {
	text-transform: uppercase;
	letter-spacing: 0.08rem;
}

/*** Listen ***/

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

/*** Flex ***/

.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.jc_space-between {
	justify-content: space-between;
}

.jc_center {
	justify-content: center;
}

.ai_center {
	align-items: center;
}

.ai_end {
	align-items: flex-end;
}

/*** Abstand ***/

.frame-space-after-extra-small {
	margin-bottom: 15px;
}
.frame-space-before-extra-small {
	margin-top: 15px;
}

.frame-space-after-small {
	margin-bottom: 25px;
}
.frame-space-before-small {
	margin-top: 25px;
}

.frame-space-after-medium {
	margin-bottom: 50px;
}
.frame-space-before-medium {
	margin-top: 50px;
}

.frame-space-after-large {
	margin-bottom: 100px;
}
.frame-space-before-large {
	margin-top: 100px;
}


/*** Multicol ***/

.multicol.mc2 {
	> .col {
		position: relative;
		width: 100%;
		margin: 0 0 1.5625rem 0;
		&:last-child {
			margin: 0;
		}
	}
}

.multicol.mc3 {
	> .col {
		position: relative;
		width: 100%;
		margin: 0 0 1.5625rem 0;
		&:last-child {
			margin: 0;
		}
	}
}

/*** Layouts ***/

/** Max. Breite 750px **/

.frame-layout-5 {
	max-width: 730px;
	margin: 0 auto;
}

/** Abstand Innen **/

/*
.frame-inner-space {
	padding-left: 6.25rem;
	padding-right: 6.25rem;
}
.frame-inner-space-right {
	padding-right: 6.25rem;
}
.frame-inner-space-left {
	padding-left: 6.25rem;
}
*/

/* HEADER
__________________________________________________________________________________________ */

.header {
	position: fixed;
	width: 100%;
	height: 5.625rem;
	background: var(--white);
	z-index: 10000;
	padding: 0.9375rem 0;
}

.header.background {

}

.header .logo {
	padding: 0 2.5rem 0 0;
	display: block;
	width: 100%;
	max-width: 13.75rem;
	img {
		width: 100%;
		height: auto;
		display: block;
	}
}

.header .container {
	height: 100%;
}

/*** Mobile Nav ***/

#mob-btn {
	cursor: pointer;
	width: 2.5rem;
	height: 2.5rem;
	text-align: center;
	line-height: 1;
	
	span {
		display: block;
	}
	
	.icon {
		width: 2.1875rem;
		margin: 0 auto;
		.line {
			height: 0.125rem;
			background: var(--black);
			margin: 0.25rem 0;
		}
	}
	
	.txt {
		text-transform: uppercase;
		font-size: 0.75rem;
		letter-spacing: 0.08rem;
		text-align: center;
		margin: 0.5rem 0 0 0;
	}
}

#mob-menu {
	position: fixed;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	max-width: 440px;
	background: var(--white);
	z-index: 11000;
	padding: 3.125rem 1.875rem 2.5rem 1.875rem;
	overflow-y: auto;
	transition: left 0.5s;
	
	&.open {
		left: 0;
	}
	
	#close-menu {
		background: var(--lightyellow);
		cursor: pointer;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 0.875rem;
		letter-spacing: 0.08rem;
		height: 3.125rem;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-transform: uppercase;
		line-height: 1;
	}

	.logo {
		display: flex;
		justify-content: center;
		margin: 1.25rem 0;
		line-height: 1;
		img {
			max-width: 13.75rem;
		}
	}
	
	.mobile-nav {
		margin: 0 0 2.5rem 0;
		ul {
			li {
				position: relative;
				a, .trigger {
					text-transform: uppercase;
					letter-spacing: 0.08rem;
					font-size: 1.25rem;
					padding: 15px 0 15px 15px;
					display: block;
					cursor: pointer;
					position: relative;
				}
				
				.trigger::after {
					content: '+';
					position: absolute;
					right: 15px;
					font-size: 40px;
					line-height: 1;
					font-weight: 100;
					top: 10px;
					transition: transform 0.3s;
				}
				.trigger.active::after {
					transform: rotate(45deg);
				} 
				
				ul {
					padding: 0 0 10px 0;
					display: none;
					li {
						border: none;
						&::after {
							content: none !important;
						}
						&::before {
							content: '';
							width: 0.3125rem;
							height: 0.3125rem;
							border-radius: 100%;
							background: #E18701;
							position: absolute;
							top: 1rem;
							left: 0.9375rem;
						}
						a {
							text-transform: none;
							font-size: 17px;
							padding: 10px 0 10px 1.875rem;
							line-height: 1.2;
						}
					}
				}
				&::after {
					content: '';
					width: 100%;
					height: 1.25rem;
					display: block;
				}
				&:nth-child(1)::after {
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/mm-linie_01.svg') no-repeat center left/23.75rem auto;
				}
				&:nth-child(2)::after {
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/mm-linie_02.svg') no-repeat center left/23.75rem auto;
				}
				&:nth-child(3)::after {
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/mm-linie_03.svg') no-repeat center left/23.75rem auto;
				}
				&:nth-child(4)::after {
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/mm-linie_04.svg') no-repeat center left/23.75rem auto;
				}
				&:nth-child(5)::after {
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/mm-linie_05.svg') no-repeat center left/23.75rem auto;
				}
			}
		}
	}

	.social-media-nav {
		width: 7.5rem;
		margin: 0 auto;
		ul {
			display: flex;
			li {
				width: 3.75rem;
				height: 3.75rem;
				position: relative;
				a {
					position: relative;
					width: 100%;
					height: 100%;
					display: block;
					padding: 0.625rem 0 0 1.562rem;
					.icon {
						position: relative;
						z-index: 2;
					}
					.circle {
						position: absolute;
						z-index: 1;
						top: 0;
						left: 0.25rem;
						transition: transform 0.3s;
						
						.facebook & {
							top: 0.1875rem;
							left: 0.3125rem;
						}
					}
					&:hover {
						.circle {
							transform: scale(1.2) rotate(45deg);
						}
					}
				}
			}
		}
	}

	.footer {
		margin: 1.875rem 0 0 0;
		position: relative;
		left: -0.9375rem;
		ul {
			li {
				margin: 0.625rem 0.3125rem 0.625rem 0;
				display: block;
				width: 100%;
				a {
					letter-spacing: 0.18rem;
					font-size: 1.0625rem;
					text-transform: uppercase;
					position: relative;
					padding: 0.25rem 0 0 4.6875rem;
					height: 1.875rem;
					display: block;
					text-align: left;
					transition: all 0.5s;
					.icon {
						position: absolute;
						left: 0.9375rem;
						top: -0.3125rem;
					}
				}
				&:nth-child(1) {
					svg {
						path {
							fill: var(--black);
						}
					}
				}
				&:nth-child(2) {
					svg {
						path {
							fill: var(--black);
						}
					}
				}
				&:nth-child(3) {
					svg {
						rect, line, path {
							stroke: var(--black);
						}
					}
				}
			}
		}
	}
}

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--blacktransparent);
	z-index: 10500;
}

/*** Desktop Nav ***/

.header .main-nav {
	font-family: 'Yrsa';
	display: none;
	ul {
		li {
			display: inline-block;
			position: relative;
			a {
				font-size: 1.0625rem;
				display: inline-block;
				text-align: center;
				letter-spacing: 0.08rem;
				text-transform: uppercase;

				transition: letter-spacing 0.3s ease;
				&:hover {
					letter-spacing: 0.2rem;
				}
			}
			
			&:nth-child(1) > a {
				width: 189px;
			}
			&:nth-child(2) > a {
				width: 140px;
			}
			&:nth-child(3) > a {
				width: 214px;
			}
			&:nth-child(4) > a {
				width: 117px;
			}
			&:nth-child(5) > a {
				width: 115px;
			}
			
			.sub {
				position: absolute;
				width: 400px;
				left: 50%;
				transform: translate(-50%,0) rotate(-3deg);
				padding: 30px 0 0 0;
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
				li {
					display: block;
					margin: 0 0 15px 0;
					a {
						background: rgba(20, 20, 20, 0.8);
						letter-spacing: 0.18rem;
						color: var(--white);
						line-height: 1;
						width: 100%;
						text-transform: none;
						min-height: 45px;
						padding: 0.625rem 1.25rem;
						position: relative;
						z-index: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.5s ease;
						
						span {
							position: relative;
							z-index: 2;
						}
						
						&::before {
							content: '';
							width: 1.25rem;
							height: 1.25rem;
							background: #704300;
							border-radius: 100%;
							position: absolute;
							bottom: 0;
							left: 0;
							opacity: 0;
							animation: moveCircleLeft 0.8s ease forwards;
							transition: all 0.5s ease;
						}
						
						&:hover::before {
							opacity: 1;
							animation: moveCircleRight 0.8s ease forwards;
						}
						
						&:hover {
							background: #9A8753;
							justify-content: flex-end;
							letter-spacing: 0.08rem;
							transform: rotate(9deg);
							z-index: 2;
							span {
								text-align: right;
							}
						}
					}
					
					&:nth-child(2) {
						left: 10px;
					}
					&:nth-child(3) {
						left: 20px;
					}
					&:nth-child(3) {
						left: 30px;
					}
					&:nth-child(4) {
						left: 40px;
					}
					&:nth-child(5) {
						left: 50px;
					}
					
				}
			}
		}
	}
}

.main-nav ul li:hover .sub {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.main-nav ul li:hover a {
	letter-spacing: 0.18rem;
}

@keyframes moveCircleRight {
  0% {
    left: 0;
  }
  60% {
    left: calc(100% - 1.25rem);
  }
  75% {
    left: calc(100% - 1.25rem + 0px);
  }
  100% {
    left: calc(100% - 15px - 1.25rem);
  }
}

@keyframes moveCircleLeft {
  0% {
    left: calc(100% - 15px - 1.25rem);
  }
  100% {
    left: 0;
  }
}

/*** Social Media Menü ***/

.header .social-media-nav {
	display: none;
	width: 7.5rem;
	ul {
		display: flex;
		li {
			width: 3.75rem;
			height: 3.75rem;
			position: relative;
			a {
				position: relative;
				width: 100%;
				height: 100%;
				display: block;
				padding: 0.625rem 0 0 1.562rem;
				.icon {
					position: relative;
					z-index: 2;
				}
				.circle {
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0.25rem;
					transition: transform 0.3s;
					
					.facebook & {
						top: 0.1875rem;
						left: 0.3125rem;
					}
				}
				&:hover {
					.circle {
						transform: scale(1.2) rotate(45deg);
					}
				}
			}
		}
	}
}

/* LAYOUT
__________________________________________________________________________________________ */

/*
section.header__block {
	position: fixed;
	width: 100%;
	height: 1080px;
	z-index: 0;
}

section.content__block {
	position: relative;
	width: 100%;
	z-index: 1;
	padding-top: 1080px;
}
*/

section.header__block {
	
	> .container {
		z-index: 10;
		pointer-events: none;
	}
	
	.scroll-down {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		pointer-events: none;
		padding: 0 0 6.25rem 0;
		svg {
			cursor: pointer;
			pointer-events: auto;
			width: 2.5rem;
			transition: transform 0.3s;
			&:hover {
				transform: scale(1.3);
			}
		}
		@media screen and (min-width: 640px) {
			svg {
				width: 3.75rem;
			}
		}
		@media screen and (min-width: 1280px) {
			padding: 0 0 3.125rem 0;
		}

		&.black {
			svg {
				path {
					stroke: var(--black);
				}
			}
		}
	}

	@media (orientation: landscape) {
		> .container {
			.headline {
				.mq-port {
					display: none;
				}
			}
		}
	}
	@media (orientation: portrait) {
		> .container {
			.headline {
				.mq-port {
					max-width: 80vw;
				}
				.mq-land {
					display: none;
				}
			}
		}
	}

}

/*** Backgrounds ***/

.section {
	padding: 50px 0;
	min-height: 300px;
	position: relative;
}

.bg-white {
	background: var(--white);
	&.border-top {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Weiss_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-top-2 {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Weiss_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-top-3 {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Weiss_03.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-bottom {
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Weiss_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: -6.25rem;
		}
	}
}

.bg-lightyellow {
	background: var(--lightyellow);
	z-index: 1;
	&.border-top {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Gelb1_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-top-2 {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Gelb1_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-bottom {
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Gelb1_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: -6.25rem;
		}
	}
	&.border-bottom-2 {
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Gelb1_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: -6.25rem;
		}
	}
}

.bg-lightyellow2 {
	background: var(--lightyellow2);
	z-index: 1;
	&.border-top {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Gelb2_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-top-2 {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Gelb2_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-bottom {
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Gelb2_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: -6.25rem;
		}
	}
	&.border-bottom-2 {
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Gelb2_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: -6.25rem;
		}
	}
}

.bg-black-transparent {
	background: var(--blacktransparent);
	color: var(--white);
	&.border-top {
		padding-top: 150px;
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Transparent_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: 0;
		}
		&.border-bottom {
			padding-bottom: 150px;
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Transparent_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}
	}
}

.bg-lightorange {
	background: var(--lightorange);
	z-index: 1;
	&.border-top {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Orange_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-top-2 {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Orange_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
}

.bg-brown {
	background: var(--brown02);
	color: var(--white);
	&.border-top {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Brown_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-top-2 {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Brown_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
	&.border-bottom {
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Brown_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: -6.25rem;
		}
	}
	&.border-bottom-2 {
		&::after {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Bottom-Brown_02.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			bottom: -6.25rem;
		}
	}
}

.bg-lightblue {
	background: var(--lightblue);
	z-index: 1;
	&.border-top {
		&::before {
			content: '';
			width: 100%;
			height: 6.25rem;
			background: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Hellblau_01.svg) no-repeat center/2560px auto;
			position: absolute;
			left: 0;
			top: -6.25rem;
		}
	}
}



/* FOOTER
__________________________________________________________________________________________ */

footer {
	position: relative;
	width: 100%;
	height: auto;
	padding: 3.125rem 1.562rem 2.5rem 1.562rem;
	background: #fff;

	.flex {
		height: 100%;
	}
	
	.copyright {
		width: 100%;
		padding: 0;
		margin: 0 0 3.125rem 0;
	}

}

.footer-nav {
	ul {
		li {
			margin: 0.625rem 0.3125rem 0.625rem 0;
			a {
				background: var(--brown04);
				color: var(--white);
				letter-spacing: 0.18rem;
				font-size: 1.0625rem;
				text-transform: uppercase;
				position: relative;
				padding: 0.25rem 0 0 1.875rem;
				height: 1.875rem;
				display: block;
				text-align: center;
				transition: all 0.5s;
				.icon {
					position: absolute;
					left: 0.9375rem;
					top: -0.3125rem;
				}
				&:hover {
					letter-spacing: 0.3rem;
				}
			}
			&:nth-child(1) {
				width: 230px;
			}
			&:nth-child(2) {
				width: 260px;
			}
			&:nth-child(3) {
				width: 220px;
			}
		}
	}
}

.sticky-contact {
	display: none;
	position: fixed;
	right: 0;
	bottom: 20px;
	z-index: 9999;
	color: var(--white);
	letter-spacing: 0.18rem;
	font-size: 1.0625rem;
	text-transform: uppercase;
	padding: 0.25rem 0 0 1.875rem;
	height: 1.875rem;
	text-align: center;
	width: 13.75rem;
	background: #141414;
	transition: all 0.5s;
	.icon {
		position: absolute;
		left: 0.9375rem;
		top: -0.125rem;
	}
	&:hover {
		letter-spacing: 0.3rem;
	}
}