/* comfortaa-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/comfortaa-v45-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/comfortaa-v45-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
body, h1, h2, h3, h4, h5, h6, p, li {
  font-family: 'Comfortaa';
}
h1 {font-size:1.75rem; font-weight: bold;}
h2 {font-size:1.5rem; font-weight: bold;}
h3 {font-size:1rem; font-weight: bold;}

/* Farbdefinitionen BBI Palette */
/* CSS HEX */
root {
--celestial-blue: #4d9de0;
--white-smoke: #f2f4f3;
--indian-red: #c1666b;
--black-olive: #1f271b;
--midnight-blue: #072072;
--yinmn-blue: #445794;
--vista-blue: #8f9dcc;
}

/* Verringern des Abstands vom Header bei der Artikelanzeige */
/* Kein Bottom Margin */
#sp-main-body { padding-top: 10px;
padding-bottom: 10px;
}
#sp-main-body p{
	margin-bottom: 0 
}
.container {
  padding-left: 0px;
  padding-right: 0px;
}
/* Farben für Links */
a {color: #4d9de0;}
a:hover {color: #c1666b;}

/* Festlegung Farben für Offcanvas menü */
.offcanvas-menu .offcanvas-inner ul.menu li.active a  {
  color: #4d9de0; 
} 
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover  {
  color: #c1666b;
}
/* Hintergrund opacity setzen und Textfarbe auf whitesmoke */
.hintergrund {
	padding:10px;
	background-color: #445794;
	color: #f2f4f3;
}
.hintergrundhell {
	padding:10px;
	background-color: #8f9dcc;
	color: #f2f4f3;
}
.hintergrunddunkel {
	padding:10px;
	background-color: #445794;
	color: #f2f4f3;
}

/* Layout Kontaktformular */
.com-contact .contact{
	background-color: #8f9dcc;
	padding: 10px;
}

.contact-form .contact {
	padding:10px;
	background-color: #445794;;
	color: #f2f4f3;
}
.contact-form a:hover {
	color: #c1666b;
}
.contact-form .form-control {
	background-color: #f2f4f3;
}
.contact-form .btn-primary {
	color: #f2f4f3;
	border-color: #4d9de0;
    background-color: #4d9de0;
}
.contact-form .btn-primary:hover {
	color: #c1666b;
	background-color: #4d9de0;
}
.contact-form .invalid {
  color: #c1666b;
  border-color: #c1666b;
}

/* Timeline */

body {
/*  background: var(--background-color); */
/*  font-family: var(--font); */
  display: flex;
  justify-content: center;
}

/* Timeline Container */
.timeline {
  background: #8f9dcc;
  margin: 0;
  padding: 20px;
}

/* Outer Layer with the timeline border */
.outer {
  border-left: 2px solid #1f271b;
}

/* Card container */
.card {
  position: relative;
  margin: 0 0 20px 20px;
  padding: 10px;
  background: rgba(7, 32, 114, 0.5);
  color: #f2f4f3;
  border-radius: 8px;
  /* max-width: 400px; */
}

/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Title of the card */
.title {
  color: #f2f4f3;
  position: relative;
}

/* Timeline dot  */
.title::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f2f4f3;
  border-radius: 999px;
  left: -42px;
  border: 5px solid #c1666b;
}
/* Title of the card */
.bottomtitle {
  color: #f2f4f3;
  position: relative;
}
.bottomcard {
  position: relative;
  margin: 0 0 20px 0;
  padding: 10px;
  background: rgba(7, 32, 114, 0.5);
  color: #f2f4f3;
  border-radius: 8px;
  /* max-width: 400px; */
}	
.bottomouter {
  border-left: 2px solid #1f271b;
  margin: 0 0 20px 0;
}