@media only all and (max-width: 700px) {
    /* for 700px or less */
body {
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.frame-outer {
	margin: 0;
	width: 100%;
	border: none;
	box-shadow: none;
}
	
	h1 {
	
}

h1 span {
	
}

h2 {
	
}

h3 {

}

h4 {
	
}
	
	
	#logo {
  padding: 1.5rem 4% 1rem 4%;
  background-color: #093566;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
  top: 0rem;
  position: relative;
  z-index: 3;
  left: 0rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-left: 0.5rem solid #fff;
  border-right: 0.5rem solid #fff;
		border-bottom: 0.5rem solid #fff;}
	
	.abstand_logo_2, .bild, .bild_2{
		display: none;
	}
    
	
	#logo_footer{
		display: none;
	}
	
.box-left {
	width: 100%;
	margin-bottom: 1rem;
	float: none;
}
    
.box-right,   {
	width: 100%;
	float: none;
}
	
.flex {
	display: block;
}
	
	.siegel{
		width: 100%;
	}	
	
	.flex_siegel {
	display: flex;
}
	
.left, .right, .text  {
	width: 100%;
}

.left {
	margin-bottom: 1rem;
}

.hide {
	display: block;
}

.hide_m {
	display: none;
}  
}





/* CSS für Responsive-Carousel-Slider */

$anzahl-slides: 10;                       // Anzahl Slides insgesamt
$ani-duration: 20;                        // Dauer der Animation in Sekunden

$slide-width: 300;                        // px
$slide-mr: 10;                            // px margin-right vom Slide

$dauer: 5;                                // wie lange ein Slide angezeigt wird (100 entspricht der ani-duration)
$dauer-proz: $dauer * 1%;                 // Prozent
$spanne-slides: 100 - (2 * $dauer);       // Prozent

$min-width-lg: 1300px;                    // Breakpoint Desktop (lg)
$min-width-md: 992px;                     // Breakpoint Desktop (md)
$min-width-sm: 768px;                     // Breakpoint Tablet

$slides-lg: 4;                            // Anzahl Slides auf Desktop (lg)
$slides-md: 3;                            // Anzahl Slides auf Desktop (md)
$slides-sm: 2;                            // Anzahl Slides auf Tablet
$slides-xs: 1;                            // Anzahl Slides auf Smartphone

$shifts-lg: $anzahl-slides - $slides-lg;
$shifts-md: $anzahl-slides - $slides-md;
$shifts-sm: $anzahl-slides - $slides-sm;
$shifts-xs: $anzahl-slides - $slides-xs;


/* keyframes */

@keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-xs {
     $proz-start: $spanne-slides / $shifts-xs * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

     100% {transform: translateX(0px)}
}
@media (min-width: $min-width-sm) {
   @keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-sm {
     $proz-start: $spanne-slides / $shifts-sm * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

        100% {transform: translateX(0px)}
   }
}
@media (min-width: $min-width-md){
   @keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-md {
     $proz-start: $spanne-slides / $shifts-md * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

        100% {transform: translateX(0px)}
   }
}
@media (min-width: $min-width-lg){
   @keyframes autoplay {
     0% { transform: translateX(0px) }
     #{$dauer-proz} { transform: translateX(0px) }

@for $i from 1 through $shifts-lg {
     $proz-start: $spanne-slides / $shifts-lg * $i * 1%;
     $proz-ende: $proz-start + $dauer;
     #{$proz-start} { transform: translateX( -1px * $i * $slide-width ) }
     #{$proz-ende} { transform: translateX( -1px * $i * $slide-width ) }
}

     100% {transform: translateX(0px)}
   }
}

.bt_carousel{
  width: $slide-width * $slides-xs * 1px;
  display: flex;
  overflow: hidden;
  margin: 0.1rem auto;
  box-sizing: border-box;
	width: 430px;
}
@media (min-width: $min-width-sm){
   .bt_carousel{
     width: $slide-width * $slides-sm * 1px;
   }
}
@media (min-width: $min-width-md){
   .bt_carousel{
     width: $slide-width * $slides-md * 1px;
   }
}
@media (min-width: $min-width-lg){
   .bt_carousel{
     width: $slide-width * $slides-lg * 1px;
   }
}
.bt_carousel-items{
  display: flex;
  animation: $ani-duration * 1s autoplay infinite ease-in-out;
  animation-delay: 0s;
}
.bt_carousel-items:hover {
    animation-play-state: paused;
}
.bt_carousel-item {
  flex: 0 0 auto;
  margin-right: $slide-mr + 0px;
  width: 10rem;;
  height: auto;
  box-sizing: border-box;
  background: #fafafb;
  padding: 0.3rem;

}





.refnr {}

.apply {}
