/* =======================
   Basis
======================= */

html {
	box-sizing: border-box;
	scroll-behavior: auto;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0px;
	font-family: Arial, sans-serif;
}

a {
	text-decoration: none;
}

.container {
	width: 1200px;
	max-width: 100%;
	margin: 0px auto;
	padding-left: 0px;
	padding-right: 0px;
}

.page-content {
	padding-top: 143px;
}

@media only screen and (max-width: 1023px) {
	.page-content {
		padding-top: 132px;
	}
}



/* =======================
   Anker
======================= */

#anker, 
#service, 
#filialen,
#standorte,
#ankauf, 
#vorteile, 
#bewertungen, 
#faq, 
#kontakt, 
#news,
#versandablauf {
	scroll-margin-top: 143px;
}

@media only screen and (max-width: 1023px) {
	#anker, 
	#service, 
	#filialen,
	#standorte,
	#ankauf, 
	#vorteile, 
	#bewertungen, 
	#faq, 
	#kontakt, 
	#news,
	#versandablauf {
		scroll-margin-top: 132px;
	}
}



/* =======================
   Scroll to top
======================= */

.scroll-top-button {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	border: 0px;
	padding-top: 5px;
	background-color: #E3B344;
	cursor: pointer;
	z-index: 999;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.scroll-top-button.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.scroll-top-button::before {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #FFFFFF;
	transform: rotate(-45deg);
}



/* Mobile */
@media only screen and (max-width: 1023px) {
	.scroll-top-button {
		right: 16px;
		bottom: 16px;
		width: 38px;
		height: 38px;
	}
}

@media only screen and (max-width: 560px) {
	.scroll-top-button {
		right: 14px;
		bottom: 14px;
		width: 36px;
		height: 36px;
	}
}