@charset "utf-8";
/* CSS Document */


/* -------------------------------------------------------------------*/
/*                Blau Glühender Button mit effekt					  */
/* -------------------------------------------------------------------*/

.btn-blueglow {
	font-family: 		'montserrat', sans-serif;
	font-weight:        200;
	position: relative;
	padding: 5px 10px;
	width: 80%;
	border-radius: 8px;
	border: 0px solid #87C7E7;
	box-shadow: 0 0 10px 1px rgba(124, 203, 255, 0.815);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: #87C7E7;
	color: #fff;
	overflow: hidden;
	transition: all 0.2s ease-in;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.btn-blueglow:hover {
	color: #fff;
	background: #87C7E7;
	box-shadow: 0 0 30px 10px rgba(124, 203, 255, 0.815);
	transition: all 0.2s ease-out;
}

.btn-blueglow:hover::before {
	animation: animation_96 0.5s 0s linear;
}

.btn-blueglow::before {
	content: '';
	display: block;
	width: 10px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0%;
	opacity: 0;
	background: #fff;
	box-shadow: 0 0 50px 30px #fff;
	transform: skewX(-20deg);
}

@keyframes animation_96 {
	0% {
		opacity: 0;
		left: 0%;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		left: 100%;
	}
}

.btn-blueglow:active {
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 0.2s ease-in;
}

/*** disabled style ***/
.btn-blueglow:disabled {
	pointer-events: none;
	opacity: .65;
	color: #7e7e7e;
	background: #dcdcdc;
	box-shadow: none;
}


/*******************************************************************************


                      und boxen
					  
/*******************************************************************************/					  
					  


.info-box {
  position: relative; /* Wichtig: Dient als Anker für das Icon */
  background-color: #e7f3fe;
  border-left: 6px solid #5aa1e3;
  border: 2px solid #2196F3;
  border-left: 6px solid #2196F3;
  /* Mehr Padding links, damit der Text nicht unter das Icon rutscht */
  padding: 15px 15px 15px 50px; 
  margin: 20px 0;
  border-radius: 4px;
  color: #0c5460;
}

/* Das Icon innerhalb der Box */
.info-box::before {
  content: "i";
  position: absolute;
  left: 15px;         /* Abstand zum linken Box-Rand */
  top: 50%;           /* Mittig von oben... */
  transform: translateY(-50%); /* ...perfekt vertikal zentriert */
  
  /* Styling des Kreises */
  font-family: sans-serif;
  font-weight: bold;
  font-style: italic; /* Macht das "i" typischer für Info-Symbole */
  color: white;
  background-color: #5aa1e3;
  width: 22px;
  height: 22px;
  line-height: 22px;  /* Zentriert das "i" vertikal im Kreis */
  text-align: center; /* Zentriert das "i" horizontal im Kreis */
  border-radius: 50%;
}

/* -------------------------------------------------------------------*/

/*******************************************************************************


                      und spezielles
					  
/*******************************************************************************/					  



.schlagzeile{
	letter-spacing: 6px;
	font-size: 85px;
	color: #fff;
	font-weight: 200;
	line-height: 90px;
}


@media (max-width: 768px) {

.schlagzeile{
	font-size: 26px;
	line-height: 35px;
}

@media (max-width: 1024px) {

.schlagzeile{
	font-size: 36px;
	line-height: 40px;

}


@media (max-width: 1250px) {

.schlagzeile{
letter-spacing: 3px;
	font-size: 45px;
	line-height: 55px;
}

/*--------------------    Zitate Slider CSS ---------------------*/

.cb-textshow ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
  
  list-style-image: none; 
  margin-left: 0px;
  margin-bottom: 0px;
}

.cb-textshow-content, .cb-textshow-content::after {
  position: relative;
  width: 100%;
  height: 120px;
  top: 0px;
  left: 0px;
  z-index: 1;
}