@font-face {
	font-family: Roboto-regular;
	src:url('../fonts/Roboto-Regular.woff') format('woff');			

}
@font-face {
	font-family: Robot-bold;
	src:url('../fonts/Roboto-Bold.woff') format('woff');			
	font-weight: 700;

}

@font-face {
	font-family: Robot-black-font;
	src:url('../fonts/Roboto-Black.woff') format('woff');			
	font-weight:900;
}
@font-face {
	font-family: Robot-medium;
	src:url('../fonts/Roboto-Medium.woff') format('woff');			

}

.navbar-nav .nav-link:active{
	color:red;
}


:root {
	--color-red:#E7000E;
	--color-dunkelgrau: #6F7170;
	--color-hellgrau: #EEEEEE;
	--color-mittelhellgrau: #E4E4E4;
	--hero-height:600px;
	/* --bs-body-font-family:"Roboto", sans-serif;*/
}

body {
	font-family: Roboto; 
	line-height: 2rem;
}
.sticky-top{
	position: sticky;
  top: 0;
  z-index: 1020;
  background: white;
}
.progress-bar {
  width: 250px;
  height: 6px;
  background: rgb(220, 53, 69);
  border-radius: 15px;
  position: relative;
}
.cloud {
  position: absolute;
  background: #ECEFF1;
  border-radius: 50%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}
.cloud2{
  width: 140px;
  height: 80px;
  top: 40px;
  left: 120px;
  opacity: 0.5;

}

/*###### Hamburger-Icon ######*/
.hamburger {
	box-shadow: none;
	display: flex;
	/*! transition: opacity .15s linear, filter .15s linear; */
}
.no-js .hamburger {
	display: none;
}
.hamburger .hamburger-box {
	height: 1.5rem;
	width: 2.5rem;
}
.hamburger .hamburger-inner, .hamburger .hamburger-inner::before, .hamburger .hamburger-inner::after {
	background-color:rgb(220, 53, 69) ;
	border-radius: .25rem;
	height: .25rem;
	position: absolute;
	transition: transform .15s ease;
	width: 2.5rem;
}
.hamburger .hamburger-inner::before, .hamburger .hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger .hamburger-inner {
	margin-top: -.125rem;
	top: 50%;
	transition-duration: .22s;
	transition-timing-function: cubic-bezier(.55, .055, .675, .19);
}
.hamburger.active .hamburger-inner {
	transform: rotate(225deg);
	transition-delay: .12s;
	transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}
.hamburger .hamburger-inner::before {
	top: -.625rem;
	transition: top .1s .25s ease-in, opacity .1s ease-in;
}
.hamburger.active .hamburger-inner::before {
	opacity: 0;
	top: 0;
	transition: top .1s ease-out, opacity .1s .12s ease-out;
}
.hamburger .hamburger-inner::after {
	bottom: -.625rem;
	transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19);
}
.hamburger.active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1);
}
/*###### Hamburger-Icon ende ######*/

#versprechen{
	background: linear-gradient(to bottom, var(--color-mittelhellgrau) 80%, #fff 20%);
}
.mt-6{
	margin-top:6rem;
}

.bg-lightgrey {
	background-color: var(--color-mittelhellgrau);
}
.bg-darkgrey {
	background-color: var(--color-dunkelgrau);
}
.pill{
	border: 6px solid  var(--color-red);
	border-top-right-radius: 50em;
	border-bottom-right-radius: 50em;
}

.text-lightgrey {
	color: var(--color-mittelhellgrau) !important;
}

.text-darkgrey{
	color: var(--color-dunkelgrau) !important;
}
.bg-shape{
	border-top-left-radius: 30px !important;
	border-bottom-right-radius: 30px !important;

}
.text-content{
	position: absolute;
	z-index: 1;
	justify-items: right;
	display: grid;
	bottom: 13%;
	right:7%;
	font-family: Robot-medium; 
	color: var(--color-dunkelgrau) !important;
}
.font-black{
	font-family: Robot-black-font;

}
.h1{
	font-size: clamp(2rem, calc(1.75rem + 1.5vw), 3.75rem);
}
.h2{
	font-size: clamp(2rem, calc(1.75rem + 1.5vw), 2.25rem);;
}
.no-decoration{
	list-style:none;
}
p{

	color:var(--color-dunkelgrau);
	font-size:20px;
	word-spacing:2px;
	line-height:2rem;
}
.p-gross{
	font-family: Robot-medium;
	font-size:30px;
	line-height:2rem;
}
h1,h2,h3,h4{

  word-spacing:2px;
}

.button-text{
	color:white;
	font-family:Robot-bold;
	font-size:35px;
}

.text-white{
	color:white;
}
.font-regular{
	font-family:Roboto-regular;

}
.font-bold{
	font-family:Robot-bold;

}
#footer p{
	font-size:16px;
}
#footer a{
	font-size:16px;
	text-decoration:none;
}

#footer-heading{

	font-size: calc(8.1vw );
	color:var(--color-dunkelgrau);
	margin-bottom:-0.3em;
}
.mt-6{
	margin-top:4rem;
}
.card-header{
	border-bottom: 0px;
}
.splide__track{
	padding-bottom:10px;
}

/** Navigation **/

.navbar-nav .nav-link.active{
	color:rgb(220, 53, 69);
}



span.highlight{
	background-color:var(--color-dunkelgrau);
	position: relative;
	border-bottom-right-radius: 30px;

}

.seit-title{
	margin-top: -8%;
}

.accordion-button{
	background-color: var(--color-dunkelgrau);

}
section {
	background-size: cover;
	background-position: center;
}
/* elements of subseite*/
/*
.accordion-item:first-child,
.accordion-item:last-child {
all: unset;  Resets all styles 
} */
/*
.accordion-item:first-of-type > .accordion-header .accordion-button,.accordion-item:last-of-type > .accordion-header .accordion-button{ /*
all: unset;  Resets all styles 
} */

/* Accordian css */
.accordion{
	--bs-accordion-border-color:var(--color-dunkelgrau) !important; ;
	--bs-accordion-border-radius: 2px solid;
	--bs-accordion-border-width:5px;
}
.accordion-item:first-of-type > .accordion-header .accordion-button,.accordion-item:last-of-type > .accordion-header .accordion-button{
	background-color: var(--color-dunkelgrau);
}
.accordion-item{
	margin-bottom: 10px;
	border-top-left-radius: 37px !important;
	border-bottom-right-radius: 37px !important;

}
.accordion-button:not(.collapsed){
	background-color: var(--color-dunkelgrau) !important;
}
.accordion-button:focus {
	z-index: 3;
	outline: 0;
	box-shadow: none !important ;
}
.accordion-button{
	font-size:20px;
	font-family:Robot-medium;
	color:#fff !important;
}
.accordion-item:first-of-type > .accordion-header .accordion-button {
	border-top-right-radius:0px !important;
}
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
	border-bottom-left-radius: 0px !important; 
}

.accordion-button::after{
	background-image:url('../images/white3.png');
}

.accordion-button:not(.collapsed)::after {
	background-image:url('../images/white3.png');
}
.p-xs{
	padding:.15rem;
}

.mb-6{
  margin-bottom:5rem;
}


@media (min-width: 992px) { 
	.pb-lg-6{
		padding-bottom:6rem;
	}

}
.h0{
	font-size: calc(1.375rem + 0.9vw);
	letter-spacing: 3px;
}

.h0gross{
	font-size: calc(2rem + 1.79vw);
}
.h2gross{
	font-size:calc(1.07rem + 0.2vw);
}

.navbar-nav > li {
	display:flex;
}
.navbar-nav > li > span{
  background-color:rgb(220, 53, 69);
  border-radius: .25rem;
  height: .25rem;
  width: 2.5rem;
	display:flex;
	margin-right: 10px;
  align: center;
  margin-top: auto;
  margin-bottom: auto;
}
.seit-title{
		margin-top:-4%;
}

@media only screen and (max-width: 600px) {
  /* CSS rules for extra small devices */
	
	.accordion-button{
   	padding: 8px 26px 8px 27px;
  }
	
	.card-header {
    padding: 0px 0px 1px 1px;
    font-size: 20px;
 }
}



@media (min-width:768px){
	.h0{
		font-size: 3rem;
	}
	.h0gross {
		font-size: calc(1.375rem + 3.6vw);
	}
	.h2gross{
		font-size: 2.1rem;
	}
	.seit-title{
		margin-top:-2%;
	}

	.column-count-2, .column-count-3, .column-count-4, .column-count-6, .column-count-12 {
		column-count: 2;
	}
	
	body.sub #heroImage{
	height:400px;
	min-height: 100px
  }
	
	.accordion-button{
	font-size:25px;
		
  }

}
@media (min-width: 992px) { /* lg */
	.column-count-3, .column-count-4 {
		column-count: 3;
	}
	.column-count-6, .column-count-12 {
		column-count: 4
	}
	.elements > :first-child {
		/* Styles for the first child */
		margin-left:3rem;
	}
	.font-regular{
		font-family:Roboto-regular;
		font-size:24px;
	}
	.navbar{
	font-family: Roboto-regular;
	font-size:17px;
  }
	
 .navbar-nav .nav-item span{
	 display:none;
	}
.navbar-nav .nav-link {
	z-index: 1;
	position: relative;
	height: 0px;
	
}
.navbar-nav .nav-link:after {
	content:"HEID";
	justify-content: left;
	display:flex;
	z-index:-1;
	padding-top:42px;
	background-color:var(--color-dunkelgrau);
	top: -181px;
	height: 200px;
	width:120%;
	left:-10px;
	position: relative;
	border-bottom-right-radius: 30px;
	font-family:Robot-bold;
	font-size:25px;
	color:white;
	opacity:0;
	transition: opacity .3s ease-in-out;
}
.accordion-button{
	font-size:30px;
}

.navbar-nav .nav-link:before{
	content: attr(new-content);
	font-family: Robot-bold;
	font-size:25px;
	position: absolute;
	top: -98px;
	margin-right: 101% !important;
	color: rgb(220, 53, 69);
	padding-right:0px;
	display: flex;
	right:0px;
	opacity:0;
	transition: opacity .3s ease-in-out;
}

.navbar-nav .nav-link.new:after,
.navbar-nav .nav-link.new:before {
	opacity: 1;

}
.navbar-nav .nav-link:hover{
	color:white;
}

.changecss{
	margin-top:-23%
}
body.sub #heroImage{
	height: var(--hero-height);
	min-height: 100px
}	

}
@media (min-width: 1200px) {
	.h1, h1 {
		font-size: 3.75rem;
	}
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 1.87rem;
	}
	.h0{
		font-size: 4.38rem;
	}
	.h2gross{
		font-size: 3rem;
	}
	.h0gross{
		font-size:5rem;
	}
	.seit-title{
		margin-top:-2%;
	}

	.column-count-4 {
		column-count: 4;
	}
	.column-count-6 {
		column-count: 6;
	}
	.column-count-12 {
		column-count: 6;
	}

 

}
@media(min-width:1400px){

	.navbar{
	font-family: Roboto-regular;
	font-size:24px;
  }
	
	.navbar-nav .nav-link:after {
	padding-top:34px;
  font-size:35px;
	color:white;
	opacity:0;
	transition: opacity .3s ease-in-out;
  }

.navbar-nav .nav-link:before{
  font-size: 35px;
  }
 	.navbar-nav .nav-link:after {
			top: -172px;
	}
}