@charset "utf-8";

/* =========================================
    			CSS Reset
======================================== */
*{ margin:0; padding:0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, main, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	float:none;
}
article, aside, details, figcaption, figure, 
footer, header, main, hgroup, menu, nav, section {
	display:block;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
/*--------------------------- Ende CSS Reset ---------------------------*/

@font-face { font-family: 'Ropa Sans';
             src: url('../fonts/RopaSans-Regular.woff2') format('truetype'); }

/*======================================== 
				Farben 
========================================*/
:root {	
	--color-blue: #01487c;
	--color-blue-op03:rgba(1,72,124,0.3);
	--color-blue-op09:rgba(1,72,124,0.9);
	--color-blue-dark: #013052;
	--color-blue-light: #0394FC;
	
	--color-black: #000000;
	--color-black-op01: rgba(0,0,0,0.1);
	--color-black-op03: rgba(0,0,0,0.3);
	--color-black-op05: rgba(0,0,0,0.5);
	--color-black-op07: rgba(0,0,0,0.7);
	--color-black-op09: rgba(0,0,0,0.9);
	
	--color-gray-light: #f7f7f7;
	
	--color-orange: #D9942C;
	
	--color-red: #7D0301;
	
	--color-white: #ffffff;
	--color-white-op01: rgba(255,255,255,0.1);
	--color-white-op03: rgba(255,255,255,0.3);
	--color-white-op05: rgba(255,255,255,0.5);
	--color-white-op07: rgba(255,255,255,0.7);
	--color-white-op09: rgba(255,255,255,0.9);
}
/*--------------------------- Ende Farben ---------------------------*/


/* =========================================
    			Grid
======================================== */
.wrapper {
	width:100%;
	height:100%;
}
.row {
	display: block;
	width:100%;
	max-width:75rem;
	margin:auto;	
	float:none;	
	overflow-y: hidden;
}
.row-full-screen {
	display: block;
	width:100%;
	margin:auto;	
	float:none;	
	overflow-y: hidden;
}
.col {
	float:left;
	padding:1rem;
	width: 100%
}
.row .col:last-of-type {margin-right:0.04%}
.col_1 {width:8.33%;}
.col_2 {width:16.66%;}
.col_2_5 {width:20.82%;}
.col_3 {width:24.99%;}
.col_4 {width:33.32%;}
.col_5 {width:41.65%;}
.col_6 {width:49.98%;}
.col_7 {
	flex: 0 0 58.31%;
	width:58.31%;
}
.col_8 {width:66.64%;}
.col_9 {width:74.97%;}
.col_10 {width:83.3%;}
.col_11 {width:91.63%;}
.col_12 {width:99.96%;}
img, video, object, embed {
	height:auto;
}
@media screen and (max-width:37.5rem) /*600px*/{	
	.col {
		float:none;		
	}	
	.row .col:last-of-type {margin-right:0}
	.col_1, .col_2, .col_2_5, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
		width:100%;
		margin:0;
	}
}
/*--------------------------- Ende Grid ---------------------------*/


/* =========================================
    			Style
======================================== */
html {
	scroll-behavior: smooth;
	background-image: url("/images/1920px/ice_background.jpg");
	background-attachment: fixed;
	background-size: cover;
}
body {
	width:100%;
	min-width:20rem;		
	background-color:var(--color-white-op07);
	color:var(--color-blue-dark);	
	font-family: 'Roboto', 'Arial', sans-serif;
	font-variation-settings: 'wght'  400;	
	font-size:1rem;	
	text-align: left;	
}
img {
	display:block;
	width:100%;
	margin:auto;
}
.filter_shadow {
    filter: drop-shadow(0 0 10px #000000);
}
ul {
	margin-bottom: 1.5rem;	
}
ul li {	
	margin: 0.5rem 0;
	list-style: none; 
}
ul.features li {
	font-variation-settings: 'wght'  600;
}
.list li {
	margin-left: 2rem;
	list-style: disc;
}
section {
	padding: 5rem 0;
}
.logo-header {
	width:25%;
	float:left;
	margin-top:0.3rem;
}
.round-img {
	border-radius:50%;
}
/* Ende Top Cover*/
/* Section - Parallax */
.parallax-section {
	position: relative; 
	width: 100%; 	
	background-attachment: fixed; 
	background-size: cover; 
	-moz-background-size: cover; 
	-webkit-background-size: cover; 
	background-repeat: no-repeat; 
	background-position: top center;
	color:var(--color-gray-light);
}
.parallax-section:before {	
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-black-op05);	 	
}
.parallax-index-one { background-image: url("/images/1920px/360_stylish (9).jpg"); }
.parallax-index-two { 
	background-image: url("/images/1920px/MTF-Samsung_mono_htr290.jpg"); 
	background-size: 100%; 
	-moz-background-size: 100%; 
	-webkit-background-size: 100%; 
	color: var(--color-blue-dark);
}
.parallax-index-two:before {	
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-white-op07);	
}
.parallax-index-three { background-color: var(--color-blue); }
.parallax-index-three:before {
	background: transparent;
}
/* Ende Section - Parallax */
/*----- helpers -----*/
.padding-div {
	padding:1.5rem;
}
.padding-div-lr {
	padding: 0 1.5rem;
}
.position-minus-5rem {
	position: relative;
	top:-6rem;
}
.align-vertical span {
	vertical-align: middle;
}
.margin-t-2rem {
	margin-top: 2rem;
}
/*----- Ende helpers -----*/
.box-shadow {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    margin-bottom: 2rem;
}
.bg_light-grey {
	background-color: var(--light-grey);
}
.bg-leaf {
	background-image: url("/images/1920px/weiss_1920-1080.png"), url("/images/1920px/clover-1225988_sw_1920.jpg");
	background-position: center;
}
@media screen and (max-width:30rem) /*480px*/ {
	section {
		padding:2rem 0;
	}
	.parallax-section {
		padding: 4rem 0;
	}
}
/*--------------------------- Ende Style ---------------------------*/


/* =========================================
    			Carousel Slider Head
======================================== */
.carousel-item {
	height: 80vh;
	max-height: 1080px;
	color:var(--color-white);
	text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
	background-position: top center;	
	background-size: cover;
}
.carousel-item-1 {
	background-image: url("/images/1920px/Wohnzimmer_Wind-Free-Wandgerät_schwarz_Klimaanlage_Samsung.jpg");
}
.carousel-item-2 {
	background-image: url("/images/1920px/Esszimmer_Wind-Free-Wandgerät_weiss_Klimaanlage_Samsung.jpg");
}
.carousel-item-3 {
	background-image: url("/images/1920px/luxury-hotel-suite-modern-elegance-illuminated-naturally-generated-by-ai_1920px.jpg");
}
.carousel-item-4 {
	background-image: url("/images/1920px/LG-Wärmepumpe_Frau in Küche.jpg");
}
.carousel-caption {
    position: absolute;
	display: flex;
	flex-direction: row;
	align-items: center;   
	bottom: 25%;
    z-index: 10;
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: var(--color-white);
    text-align: left;
}
.carousel-item-block {
	padding: 1.5rem;
}
.carousel-item-block .carousel-logo {
	width: 30%;
	margin-left: 0;
}
.carousel-item-block:first-of-type {
	width: 30%;
}
.carousel-item-block:nth-child(2) {
	width: 70%;
}
.carousel-caption p {	
	font-size:1.5rem; 
	font-variation-settings: 'wght' 600;  	
	text-align: left;
	margin-top: 1rem;
}
.carousel-caption p span {
	font-size: 3.5rem;
	font-variation-settings: 'wght' 600; 
}
#carouselExampleIndicators .carousel-control-next-icon, .carousel-control-prev-icon {    
    width: 2rem;
    height: 2rem;   
}
@media screen and (max-width:75rem) /*120px*/ {	
	.carousel-caption {
		flex-direction: column;
		bottom: 5%;
	}
	.carousel-item-block:first-of-type {
		width: 80%;
	}
	.carousel-item-block:nth-child(2) {
		width: 100%;
	}
	.carousel-caption p span {
		font-size: 2rem;
	}
}
@media screen and (max-width:60rem) /*960px*/ {	
	.carousel-caption {
		right: 10%;
		left: 10%;
	}
}
@media screen and (max-width:30rem) /*480px*/ {
	.carousel-caption p {	
		font-size:1rem;		
	}
	.carousel-caption p span {
		font-size: 2rem;
	}
}
/*--------------------------- Ende Carousel Slider Head ---------------------------*/


/* =========================================
    			Background Head
======================================== */
.carousel-item.bg-60vh {
	height: 60vh;
}
.carousel-item.bg-50vh {
	height: 50vh;
}
.carousel-item.bg-60vh .carousel-caption {
	display:flex;
	flex-wrap: wrap;
	bottom:5%;
}
.carousel-item.bg-60vh .carousel-caption .col_4, .carousel-item.bg-60vh .carousel-caption .col_8 {
	margin: auto;
}
.bg-Load-Page {background-image: url("/images/1920px/webgarten_titel_schloss-hagenau-wasserrad_1920-560_kopfkino.jpg");}
@media screen and (max-width: 60rem) /*960px*/ {
	.carousel-item.bg-60vh {
		height: 40vh;
	}
	.carousel-item.bg-50vh {
		height: 30vh;
	}
}
@media screen and (max-width:30rem) /*480px*/ {
	.carousel-item.bg-60vh .carousel-caption {
		bottom: 0;
	}
}
/*--------------------------- Ende Background Head ---------------------------*/


/* =========================================
    			Navigation
======================================== */
.nav {
	position: fixed;
	z-index: 5;
	height: 100px;
	width: 100%;
	transition: 300ms ease;
	background: var(--color-blue-op03);
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.brand {	
	float: left;
	line-height: 60px;	
	font-variation-settings: 'wght'  500;
	padding-left:4rem;
	margin:2px 0;
}
.brand img {
	vertical-align: middle;
	height: calc(60px - 1rem);
	margin-right: 0.5rem;
}
.brand {
	background:url("/images/logo/Nextlevelklima_Logo_weiss_900px.png");
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
	width:300px;
	height: 58px;
	margin:4px 0 0 4px;
}
.top-menu {
	display: none;
	position: relative;
	float: right;
	transition: 200ms ease;
	font-variation-settings: 'wght'  300;
	height: 60px;
}
.top-menu li {
	display: block;
	float: left;
	height: 60px;
}
.top-menu li a {
	display: block;
	height: 60px;
	line-height: 60px;
	text-decoration: none;
	color:var(--color-white);
	padding: 0 1em;
	font-variation-settings: 'wght'  700;
	text-transform: uppercase;
}
.top-menu li a:hover {
	transition: 0.5s;
	color: var(--color-blue-light);
	border-bottom: solid 2px var(--color-blue-light);
}
.mobile-open {
  	display: block;
	background:var(--color-gray-light);
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    margin-bottom: 2rem;
}
.mobile-open li {
	display: list-item;
	float: none;
	font-size: 1.2rem;
}
.mobile-open li a {	
	color:var(--color-blue-dark);
}
.top-menu.mobile-open {
	width:100%;
	height:auto;
	border: 1px solid var(--color-blue-dark);
}
.hamburger-btn {
	float: right;
	display: block;
	border: none;
	background: transparent;
	color: var(--color-blue-dark);
	height: calc(60px - 1rem);
	width: calc(60px - 1rem);
	margin: 0.5rem 0.5rem 0 0;
	padding: 0;
	position: relative;
}
.hamburger-btn:hover {
 	background: transparent;
}
.hamburger-btn .hamburger-line {
	height: 2px;
	width: calc(60px - 2rem);
	background: var(--color-white);
	display: block;
	position: absolute;
	left: calc(0.5rem - 1px);
	transition: transform 150ms ease-in, top 150ms ease-out 150ms, bottom 150ms ease-out 150ms, opacity 150ms ease 75ms;
}
.hamburger-btn .hamburger-line:first-child {
 	top: 0.75rem;
}
.hamburger-btn .hamburger-line:nth-child(2) {
 	top: calc(50% - 1px);
}
.hamburger-btn .hamburger-line:last-child {
 	bottom: 0.75rem;
}
.hamburger-cross .hamburger-line {
 	transition: transform 150ms ease-out 150ms, top 150ms ease-in, bottom 150ms ease-in, opacity 150ms ease 75ms;
}
.hamburger-cross .hamburger-line:first-child {
	transform: rotate(45deg);
  	top: calc(50% - 1px);
}
.hamburger-cross .hamburger-line:nth-child(2) {
  	top: calc(50% - 1px);
  	opacity: 0;
}
.hamburger-cross .hamburger-line:last-child {
  	transform: rotate(-45deg);
 	bottom: calc(50% - 1px);
}
.scroll {
	background: var(--color-blue-op09);
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);	
}
.scroll .brand {
	background:url("/images/logo/Nextlevelklima_Logo_weiss_900px.png");
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
	width:300px;
	height: 58px;
	margin-top:4px;
}
.scroll .hamburger-line {
 	background: var(--color-blue-dark);
}
@media screen and (min-width: 60rem) /*960px*/ {
	.top-menu {
		display: block;
	}
	.hamburger-btn {
		display: none;
	}
}
@media screen and (max-width:37.5rem) /*600px*/ {
	.scroll {
		height:100px;
	}
	.scroll .top-menu li a {
		
	}
	.brand {		
		background-size: contain;
		background-repeat: no-repeat;
		float: left;
		width:200px;
		height: 58px;
		margin-top:10px;
	}
	.scroll .brand {		
		background-size: contain;
		background-repeat: no-repeat;
		float: left;
		width:200px;
		height: 58px;
		margin-top:10px;
	}
	.scroll .top-menu li a, .scroll .brand {
		
	}
}
/*--------------------------- Ende Navigation ---------------------------*/


/* =========================================
    			Button
======================================== */
.button-design {
	background-color: var(--color-white);
	border: 1px solid var(--color-blue-dark);
	border-radius: .75rem;
	box-sizing: border-box;
	color: var(--color-blue-dark);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	padding: .75rem 1.2rem;
	text-align: center;
	text-decoration: none var(--color-blue-light) solid;
	text-decoration-thickness: auto;
	transition-duration: .2s;
	transition-property: background-color,border-color,color,fill,stroke;
	transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	width: 300px;
	margin: 0 auto 0.5rem auto;
}
.button-design:hover {
	background-color: var(--color-white-op07);
	border: 1px solid var(--color-blue-light);
}
.button-design:focus {
	box-shadow: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
}
@media (min-width: 768px) {
	.button-design {
		padding: .75rem 1.5rem;
	}
}
/*--------------------------- Ende Button ---------------------------*/


/* =========================================
    		Textformatierung
======================================== */
h1, h2, h3, h4, h5, h6, .brand span, .carousel-caption p {
	font-family: "Ropa Sans", sans-serif;
	text-align: left;
}
h1 {
	font-size:3rem; 
	font-weight: 600; 
	margin-bottom: 2rem;
}
h1 span {	
	font-size:5rem; 
	font-weight: 800;  
}
h2 {
	font-size:2.5rem; 
	font-weight: 600;
	margin-bottom: 2rem;
}
h3 {
	font-size:2rem; 
	font-weight: 500; 
	margin-bottom: 1rem;
}
h4 {
	font-size:1.5rem; 
	font-weight: 400; 
	margin-top: 1rem;
}
p {
	font-size:1rem; 
	font-weight: 400;  
	margin-bottom: 0.5rem;
}
i {
	width:1.2em;
	margin-right: 1rem;
	padding-top: 0.1rem;
	color:var(--color-blue);
	text-align: center;
}
.big-icon {
	font-size: 3rem;
	margin: 1rem auto;
}
a {
	color:var(--color-blue);
}
a:hover {	
	text-decoration: none;
	color:var(--color-blue-light);
}
a:hover i {
	color: var(--color-blue-light);
}
.text-align-center {
	text-align: center;
}
strong, b {
	font-weight: 600;
}
@media screen and (max-width:60rem) /*960px*/ {	
	h1 {	
		font-size:2rem; 
	}
	h1 span {	
		font-size:2.5rem; 
		font-variation-settings: 'wght' 800; 
	}
	h2 {
		font-size:1.8rem; 
		font-variation-settings: 'wght' 500;
		margin-bottom: 2rem;
	}
}
/*--------------------------- Ende Textformatierung ---------------------------*/


/* =========================================
    			Card
======================================== */
.card {
	padding: 1.5rem;
	margin: 4rem 0 2rem 0;
}
.border-card {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 6px;
	border: 1px solid var(--color-blue);
	opacity: 0.5;
	left: -6px;
	top: -6px;
	border-radius: .25rem;
}
.card h3 {
	position: relative;
	padding: 320px 0 0 0;
	width: 90%;
}
.card > img {
	width: 90%;
	position: absolute;
	top: -6%;
	left: -6%;
}
.card-color {
	background-color: var(--color-blue-op03);
}
@media screen and (max-width:48rem) /*960px*/ {	
	.card h3 {
		position: relative;
		padding: 160px 0 0 0;
		width: 90%;
	}
}
/*--------------------------- Ende Card ---------------------------*/


/* =========================================
    			Anfrage
======================================== */
.anfrage-form {
	width: 100%;
	color: var(--color-gray-light);
}
.anfrage-form .padding-div {
	padding: 1rem;
}
.anfrage-form div.flex-menu-link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
	margin: 0 1rem 1rem auto;
	border: 1px solid var(--color-white-op03);
	border-radius: 0.5rem;	
	min-width:300px;
	padding:1rem;
}
.anfrage-form div.flex-item-menu-link:nth-child(1) i {
	font-size: 2rem;
}
.anfrage-form div.flex-item-menu-link:nth-child(2) {
	height: auto;
	min-height: 70px;
	text-align: left;
	padding:1rem;
}
.anfrage-form ul {
	list-style: none;
}
.anfrage-form ul li {
    padding: 0.5rem 0;
    text-align: left;
    text-indent: -1.2rem;
    margin-left: 2.5rem;
}
.anfrage-form ul li i {
    margin-right: 1.5rem;
	color: var(--color-gray-light);
}
.anfrage-form .form-group {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.anfrage-form .form-group .col {
	padding: 0.5rem 1rem;
}
.anfrage-form .form-group a {
	color: var(--color-blue-light);
}
.anfrage-form hr {
	border-color: var(--color-white-op03);
}
/* inout img */
input.radio {
    display: none;
    width: auto;
    background-color: transparent;
    outline: none;
}
input[type=radio] + label>img {
	opacity: 0.5;
	border-radius: 1.5rem;
}
input[type=radio]:checked + label>img {
    border: var(--color-blue) solid 2px;
	border-radius: 1.5rem;
    box-shadow: var(--color-black-op03) 0px 2px 8px 0px;	
	opacity: 1;
}
/* input radio-button-list */
.radio-button {
	display: block;
	position: relative;
	margin: auto;
	height: auto;
	width: 100%;
}
.radio-button ul{
	list-style: none;
	margin: 0 auto 1rem auto;
	padding: 0;
	overflow: auto;
}
.radio-button ul li{
	display: block;
	position: relative;
	float: left;
	width: 100%;
	margin: auto;
}
.radio-button ul li:last-of-type {
	border-bottom: none;
}
.radio-button ul li input[type=radio]{
	position: absolute;
	visibility: hidden;
}
.radio-button ul li label{
	display: block;
	position: relative;
	padding: 1.5rem 1.5rem 1.5rem 5rem;
	height: 30px;
	z-index: 9;
	cursor: pointer;
	transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
}
.radio-button ul li:hover label{
	color: var(--color-gray-light);
	font-weight: bold;
	transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
}
.radio-button ul li .check{
	display: block;
	position: absolute;
	border: 2px solid var(--color-gray-light);
	border-radius: 100%;
	height: 25px;
	width: 25px;
	top: 30px;
	left: 20px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}
.radio-button ul li:hover .check {
	border: 2px solid var(--color-white);
}
.radio-button ul li .check::before {
	display: block;
	position: absolute;
	content: '';
	border-radius: 100%;
	height: 15px;
	width: 15px;	
	top: 4px;
	left: 3px;
	margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}
.radio-button input[type=radio]:checked ~ .check {
	border: 2px solid var(--color-gray-light);
}
.radio-button input[type=radio]:checked ~ .check::before{
	background: var(--color-gray-light);
}
.radio-button input[type=radio]:checked ~ label{
	/*color: var(--color-blue);*/
}
.radio-button .input-service {
    height: 34px;
    padding: 6px 0 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-colorease-in-out .15s, -webkit-box-shadowease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-colorease-in-out .15s, box-shadowease-in-out .15s;
}
.radio-button .input-number {
	width: 70px;
    text-align: center;    
    border: 1px solid var(--color-gray-op01);
	display: inline-flex;
}
/* Progressbar */
.progressbar {
	position: relative;
	display: flex;
	justify-content: space-between;
	counter-reset: step;
	margin: 2rem 12rem;
}
.progressbar::before,
.progress {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	width: 100%;
	background-color: var(--color-white-op03);
	/*z-index: -1*/
}
.progress {
	background-color: var(--color-white-op05);
	width: 0%;
	transition: 0.3s;
}
.progress-step {
	position: relative;
	width: 2.1875rem;
	height: 2.1875rem;
	background-color: var(--color-blue);
	border: 1px solid var(--color-white-op03);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.progress-step::before {
	counter-increment: step;
	content: counter(step);
}
.progress-step::after {
	content: attr(data-title);
	position: absolute;
	top: calc(100% + 0.5rem);
	font-size: 0.85rem;
	color: #666;
}
.progress-step-active {
	background-color: var(--color-gray-light);
	color: var(--color-blue-dark);
}
/* Form */
.anfrage-form .form {
	width: clamp(1000px, 30%, 430px);
	margin: 0 auto;
	border: 1px solid #ccc;
	border-radius: 0.35rem;
	padding: 1.5rem;
}
.form-step {
	display: none;
	transform-origin: top;
	/*animation: animate 0.5s;*/
}
.form-step-active {
	display: block;
}
.imgText {
	margin-top: 1rem;
	text-align: center;
}
.alert-info {
	color: var(--color-blue-light);
	border-color: transparent;
	background-color: transparent;
}
.form-control {
	color: var(--color-blue);
	background-color: var(--color-white-op07);
}
.form-control:focus {
	color: var(--color-blue-dark);
	background-color: var(--color-white-op09);
}
@keyframes animate {
	from {
		transform: scale(1, 0);
		opacity: 0;
	}
	to {
		transform: scale(1, 1);
		opacity: 1;
	}
}
@media screen and (max-width:37.5rem) /* 600px */ {
	.progressbar {
		margin: 2rem;
	}
}
/*--- btn Detail & btn file---*/
.btn-detail {
	background-color: var(--color-white-op03);
    color: var(--color-blue-dark);
    padding: 0.5rem 1rem;
    text-align: center;
    display: inline-block;
    border-radius: 0.5rem;
	font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s;
}
.btn-detail:hover {
	background-color: var(--color-gray-light);
}
.btn-detail input[type=submit]{
	background-color: transparent;
}
.btn-detail i {
	margin: 0;
}
/*--- btn Basket ---*/
.btn-basket {	
	color:var(--color-white);
	background-color: var(--color-blue-dark);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-size: 1rem;
	bottom: 0!important;
	transition: background-color 0.3s;
}
.btn-basket input {background-color: var(--color-blue-dark);}
.btn-basket:hover, .btn-basket:focus {	
	background-color: var(--color-white-op03);
	color:var(--color-white);
	text-decoration: none;
}
.btn-basket:hover input {background-color: var(--color-white-op03);}
/*--- form label ---*/
.form-horizontal .control-label {
	text-align: left;
	
}
/*--------------------------- Ende Anfrage ---------------------------*/


/* =========================================
    			Maps
======================================== */
#map {
	width: 100%;
	height:30rem;
	border:1px solid var(--color-blue-dark);
}
form {
	margin-bottom: 2rem;
}
@media screen and (max-width:60rem) /* 960px */ {
	#map {
		height:20rem;
	}
}
/*--------------------------- Ende Maps ---------------------------*/


/* =========================================
    			Animation
======================================== */
.background-animation {
	position: fixed;
	width: 100%; 
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-black-op09);
	z-index: 99999;
}
.animation-position {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 50px;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}
.animation-position img {
	position: relative;
	width: 50%;
	margin: auto;
}
/* Loader - HTML: <div class="loader"></div> */
.loader {
	width: 20%;
	margin: 0 auto 2rem auto;
	aspect-ratio: 1;
	border: 30px solid var(--color-white-op05);
	border-radius: 50%;
	position: relative;
	transform: rotate(45deg);
}
.loader::before {
	content: "";
	position: absolute;
	inset: -30px;
	border-radius: 50%;
	border: 30px solid var(--color-blue);
	animation: l18 2s infinite linear;
}
@keyframes l18 {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}
/*--------------------------- Ende Animation ---------------------------*/


/* =========================================
    			To Top Button
======================================== */
.to-top-button {
	display: inline-block;
	background-color: var(--color-white);
	width: 4rem;
	height: 4rem;
	text-align: center;
	border-radius: 50%;
	border:1px solid var(--color-blue-dark);
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}
#to-top.to-top-button {	
	bottom: 6.5rem;
}
.to-top-button i {  
	font-size: 2rem;
	line-height: 3.7rem;
	color: var(--color-blue-dark);
	margin:auto;
}
.to-top-button:hover {
	cursor: pointer;
	border:1px solid var(--color-blue);	
}
.to-top-button:hover, .to-top-button:hover i {	
	transition: 0.5s;
}
.to-top-button:active {
	background-color: var(--color-blue);
}
.to-top-button.show {
	opacity: 1;
	visibility: visible;
}
@media screen and (max-width:37.5rem) /* 600px */ {
	.to-top-button {
		bottom: 1rem;
		right: 1rem;		
	}
	#to-top.to-top-button {	
		bottom: 5.5rem;
	}
}
/*--------------------------- Ende To Top Button ---------------------------*/


/* =========================================
    			Footer
======================================== */
footer {
	background-color: var(--color-blue-dark);
	color:var(--color-gray-light);
}
footer h4 {
	margin: 0 auto 1rem auto;
}
footer a {
	color:var(--color-gray-light);
}
footer a:hover {
	color:var(--color-blue-light);
}
footer li {
	text-indent: -1.2rem;
 	margin-left: 2rem;
}
footer li i {
	margin-right: 0.5rem;
}
#logo_footer {
	width:50%;
	margin: auto auto 1rem 0;
}
.footer-last {
	background-color: var(--color-black);
	padding:1rem 0 0.5rem 0;
}
#copyright {
	padding-left: 1.5rem;
}
.footer-last ul {
	margin-bottom: 0;
	float: right;
	padding-right: 1.5rem;
}
.footer-last ul li {	
	display: inline;
	padding-bottom: 0.5rem;
	text-indent: 0;
 	margin-left: 0;
}
.footer-last ul li:after {
	content:"|";
	margin: auto 1rem;
}
.footer-last ul li:last-child:after {
	content:"";
	margin: auto 1rem;
}
.fb-share-button {
	display:none;
}
@media screen and (max-width:30rem) /*480px*/ {
	.footer-last {
		font-size: 0.8rem;
	}	
	.footer-last ul {
		padding: 0.5rem 0;
	}
	.footer-last ul li:after {
		margin: auto 0.5rem;
	}
}
/*--------------------------- Ende Footer ---------------------------*/