/*############# Sayco Aquaflush CSS ############*/


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {  
--aquaflush:  linear-gradient(to right, #EC6818 0%, #F3AE24 100%);
--aquaflush-bg:#f6f0ed;
}


html {
	scroll-behavior: smooth;
}


body {
font-family: 'Roboto', sans-serif;
font-size: clamp(1rem, 0.8875rem + 0.3125vw, 1.2rem);
line-height: 1.6rem;
color: #727574;
background-color:var(--aquaflush-bg);  
min-height: 100vh;
display: flex;
flex-direction: column;
}


/*############# Baustellenseite ############*/

.construction {
	flex: 1 0 auto;
}

.construction-logo {
	max-width: 220px;
	width: 55%;
	height: auto;
}

.construction h1 {
	font-weight: 300;
	color: #4a4c4b;
	line-height: 1.25;
}

.construction h1 strong {
	font-weight: 600;
	background: var(--aquaflush);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.construction-bar {
	height: 4px;
	width: 120px;
	border-radius: 2px;
	background: var(--aquaflush);
}

.construction-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--aquaflush);
	color: #fff;
	font-weight: 500;
	font-size: .9rem;
	padding: .35rem 1rem;
	border-radius: 2rem;
}

.construction-image {
	border-radius: 1rem;
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .08);
}

.construction-note {
	background-color: #fff;
	border-left: 4px solid #EC6818;
	border-radius: .5rem;
}

.construction-note .bi {
	color: #EC6818;
}


/*############# Buttons ############*/

.btn-aquaflush {
	background: var(--aquaflush);
	border: 0;
	color: #fff;
	font-weight: 500;
	padding: .6rem 1.6rem;
	border-radius: 2rem;
}

.btn-aquaflush:hover,
.btn-aquaflush:focus {
	color: #fff;
	filter: brightness(1.05);
	box-shadow: 0 .4rem 1rem rgba(236, 104, 24, .25);
}

.btn-outline-aquaflush {
	border: 2px solid #EC6818;
	color: #EC6818;
	font-weight: 500;
	padding: calc(.6rem - 2px) 1.6rem;
	border-radius: 2rem;
}

.btn-outline-aquaflush:hover,
.btn-outline-aquaflush:focus {
	background-color: #EC6818;
	color: #fff;
}


/*############# Footer ############*/

.site-footer {
	flex-shrink: 0;
	background-color: #fff;
	border-top: 4px solid transparent;
	border-image: var(--aquaflush) 1;
	font-size: .95rem;
	line-height: 1.5;
}

.site-footer h2 {
	font-size: 1rem;
	font-weight: 600;
	color: #4a4c4b;
	margin-bottom: .75rem;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	color: #EC6818;
}

.footer-logo {
	max-width: 180px;
	height: auto;
}

.footer-social a {
	font-size: 1.3rem;
}