span.badge.bg-danger.featured-article-badge {
    display: none;
}

.burger-icon > span {
    background-color: #000;
}

/* Introbild Startbild */
.slider-div {
  width: 100%;
  display: inline-flex;
  overflow-x: hidden;
  position: relative;
}

.slider-item {
  margin-right: 30px;
  min-width: 300px;
  max-width: 300px;
  position: absolute !important;
  transform: scale(0.9);
  overflow: hidden;
  transition: all 0.5s;
}

#slider-active {
  }

#arrow-left {
  min-width: 50px;
  height: 50px;
  border: solid;
  background-size: cover; 
  background-image: url('img/left.png');
  position: sticky;
  top: 45%;
  left: 10px;
  z-index: 101;
}

#arrow-right {
  min-width: 50px;
  height: 50px;
  border: solid;
  background-size: cover; 
  background-image: url('img/right.png');
  position: sticky;
  top: 45%;
  left: calc(100% - 60px);
  z-index: 101;
}

.float-start {
margin: 0px 0px 0px 0px!important;
padding-right: 15px;
}

.article, .article-details {
overflow: hidden;
padding: 15px 20% 15px 20%;
background-color: #fff;
box-shadow: 5px 5px 15px 0px #666;
}

.category-desc {
    overflow: hidden;
	margin-bottom: 20px;
    padding: 15px 15px 15px 15px;
	background-color: #fff;
	box-shadow: 5px 5px 15px 0px #666;
	}

.article {
opacity: 0;
height: 400px; 
}

.kachel_1 {
height: 95% !important;
padding: 0px !important;
margin: 0px !important;
}

.kachel_2 {
	width: 150px;
	margin: 15px;
	height: 180px;
  	animation: einblenden 1s forwards;
	}

.kachel_2 .bild {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	padding: 0px !important;
	margin: 0px !important;
	overflow: hidden;
    box-shadow: 5px 5px 15px 0px #666;
    opacity: 0.8;
  	transition: all 0.4s;
	}

.kachel_2 .bild:hover {
    transform: scale(1.1) !important;
    opacity !important: 1;
}

.kachel_2 .text {
  	left: 10px;
	background: rgb(0,0,0,0.4);  
	color: #FFF;
	width: calc(100% - 20px);
	position: absolute;
	padding: 5px;
	margin: 5px;
	font-size: 13px;
	}

.kachel_2 .bild_logo {
	width: 105%;
  	height:105%;
  	object-fit: cover;
	}

.kachel_3 {
	width: 45px;
	margin: 2px;
	height: 45px;
	}

.kachel_3 .bild {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	padding: 0px !important;
	margin: 0px !important;
	overflow: hidden;
    box-shadow: 3px 3px 5px 0px #666;
	}

.dj-image {
	animation: dj_einblenden 4s forwards;
	}

.dj-image-visible {
  animation: dj_einblenden 4s forwards;
}

.dj-image-invisible  {
  animation: dj_ausblenden 3s forwards;
}


.bottom2 img {
  max-width: 150px;
  padding: 2px 10px 2px 10px;
  } 

@media (max-width: 767px) {
  .article {
  height: 300px;
  }
  
  .article-details, .category-desc {
  padding: 10px 10px 10px 10px;  
  }
  
  .bottom2 img {
  max-width: 75px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .article {
  height: 300px;
  }
  
  .article-details, .category-desc {
  padding: 10px 10px 10px 10px;  
  }
  
  .bottom2 img {
  max-width: 100px;
  } 
}

@media (min-width: 992px) {
  #offcanvas-toggler {display: none !important;}
}

.visible {
  opacity: 1;
  animation: einblenden 1s forwards;
}

.invisible  {
  opacity: 0;
  animation: ausblenden 1s forwards;
}

.readmore {
position: absolute;
bottom: 5px;
right: 5px;  
}

.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}

.iframeYoutube {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video-container-text {
background-image: url("/image/backgound_youtube.png");
position: absolute;
top: 0;
left: 0;
background-size: 100%;
height: 100%;
width: 100%;
}

img.pull-left {
float: left;
padding: 0px 10px 10px 0px;
}

.intro {
  position: relative;
  }

.article-intro-image img {
min-width: 100%; 
height: 200px; 
object-fit: cover;
}

.article .article-header {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px;
  width: calc(100% - 20px);
  background: rgb(0,0,0,0.4);
  }

.article .article-header h2 {
  margin: 0px 0px 0px 0px !important;
  }

.article .article-header a {
  color: #FFF !important;
  }

.article .article-info {
  position: absolute;
  right: 10px;
  top: 180px;
  padding: 5px;
  max-width: calc(100% - 20px);
  background: rgb(0,0,0,0.4);
  }

.article .article-info span {
  color: #FFF;
  }

.accordion .accordion_button {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  margin-bottom: 10px;
  transition: 0.4s;
}

.accordion_button:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  color: #777;
  float: right;
  margin-left: 5px;
}

.accordion .accordion_button:hover, .accordion .accordion_button.active {
  background-color: #ccc;
}

.accordion_button.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.accordion .accordion_bereich {
  background-color: white;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.accordion .accordion_bereich.start {
  position: absolute;
  visibility: hidden;
}

.accordion .accordion_bereich.active {
  display: block;
}

.link_red {
  color: #ff0000 !important;
  animation: blinken 1s alternate infinite;
}

@keyframes einblenden {
  0% {
    transform: scale(0.9);
    opacity: 0.0;
  }  
  100% {
    transform: scale(1);
    opacity: 1;	
  }
}

@keyframes ausblenden {
  0% { 
    transform: scale(1);
  }
  100% { 
    transform: scale(0);
  }
}

@keyframes dj_einblenden {
  0% {
    transform: scale(0.9);
  }  
  100% {
    transform: scale(1);
  }
}

@keyframes dj_ausblenden {
  0% { 
    transform: scale(1);
  }
  100% { 
    transform: scale(0);
  }
}

@keyframes einschweben {
  0% {
    left: -500px;
    transform: scale(0.9);
    opacity: 0;
  }  
  100% {
    left: 0px;
    transform: scale(1);
    opacity: 1;	
  }
}

@keyframes ausschweben {
  0% {
    left: 0px;
    transform: scale(1);
    opacity: 1;
  }  
  100% {
    left: +500px;
    transform: scale(0.9);
    opacity: 0;	
  }
}

@keyframes scrollen {
  0% {
    top: 0px;
  }  
  100% {
    top: -600px;
  }
}

@keyframes rotieren {
  0% { 
    transform: rotate(70deg);
  }
  100% { 
    transform: rotate(0deg); 
  }
}

@keyframes blinken {
  0% { 
    opacity: 1.0;
  }
  100% { 
    opacity: 0.5; 
  }
}