/********** default CSS **********/

.display-none, .hidden { display:none !important; }

.padding-none { padding: 0px 0px; }
.padding-small { padding: 5px 5px; }
.padding-default { padding: 10px 10px; }
.padding-normal { padding: 10px 10px; }
.padding-medium { padding: 20px 20px; }
.padding-large { padding: 40px 40px; }
.padding-xlarge { padding: 80px 80px; }

.margin-none { margin: 0 0px; }
.margin-mini-minus, .-margin-mini { margin: -1px -1px; }
.margin-mini { margin: 1px 1px; }
.margin-small { margin: 5px 5px; }
.margin-small-minus, .-margin-small { margin: -5px -5px; }
.margin-default { margin:10px 10px; }
.margin-default-minus, .-margin-default { margin:-10px -10px; }
.margin-normal { margin:10px 10px; }
.margin-medium { margin: 20px 20px; }
.margin-medium-minus, .-margin-medium { margin: -20px -20px; }
.margin-large { margin: 40px 40px; }
.margin-large-minus, .-margin-large { margin: -40px -40px; }
.margin-xlarge { margin: 80px 80px; }
.margin-xlarge-minus, .-margin-xlarge { margin: -80px -80px; }


@media only screen and (max-width: 992px) { 
  .padding-large { padding: 20px; } .margin-large { margin: 20px; } 
  .padding-xlarge { padding: 40px; } .margin-xlarge { margin: 40px; } 
}
@media only screen and (max-width: 768px) { 
  .padding-large { padding: 20px; } .margin-large { margin: 20px; } 
  .padding-xlarge { padding: 20px; } .margin-xlarge { margin: 20px; } 
}
@media only screen and (max-width: 576px) { 
  .padding-default { padding: 10px 10px; } .margin-default { margin: 10px 10px; } 
  .padding-medium { padding: 10px 10px; } .margin-medium { margin: 10px 10px; } 
  .padding-large { padding: 20px 20px; } .margin-large { margin: 20px 20px; } 
  .padding-xlarge { padding: 20px 20px; } .margin-xlarge { margin: 20px 20px; } 
}


/********** indole Bootstrap Container resets **********/
.container-small { padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; width: auto; max-width: 800px; }
.container { padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; width: auto; max-width: 1200px; }
.container-medium { padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; width: auto; max-width: 1400px; }
.container-large { padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; width: auto; max-width: 1600px; }
.container-xlarge { padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; width: auto; max-width: 1800px; }
.container-fluid { padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; }


/* old row */
.row { width: 100%; padding-left: 0px; padding-right: 0px; margin-right: 0px; margin-left: 0px; }
.row > * { flex-shrink: 0; max-width: ; padding-right: 0; padding-left: 0; margin-top: 0; } 

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
  position: relative;  
}

.col-xs-0, .col-sm-0, .col-md-0, .col-lg-0, .col-xl-0 { display: none !important; }

@media only screen and (max-width: 576px) { 
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; width: 100%; }
}

.mediabox.col-xs-0, .mediabox.col-sm-0, .mediabox.col-md-0, .mediabox.col-lg-0, .mediabox.col-xl-0 { display: none !important; }
.captionbox.col-xs-0, .captionbox.col-sm-0, .captionbox.col-md-0, .captionbox.col-lg-0, .captionbox.col-xl-0 { display: none !important; }

/* Floats */
.pull-left { float: left !important; }
.pull-center { float: none; margin-left: auto; margin-right: auto; }
.pull-right { float: right !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }

/* spaltigkeit Rasterbox */
.raster-1 { width: 100%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-1-5 { width: 75%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-2 { width: 50%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-2-5 { width: 40%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-3 { width: 33.3333%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-3-5 { width: 30%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-4 { width: 25%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-4-5 { width: 22%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-5 { width: 20%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-5-5 { width: 18%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-6 { width: 16.6666%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-8 { width: 12.5%; padding-left: 0 !important; padding-right: 0 !important; }
.raster-auto { width: auto; padding-left: 0 !important; padding-right: 0 !important; }

.raster-hover-100:hover { width: 100%; }
.raster-hover-75:hover { width: 75%; }
.raster-hover-50:hover { width: 50%; }
.raster-hover-40:hover { width: 33.3333%; }

.raster-1-hover:hover { width: 100%; }
.raster-0-75-hover:hover { width: 75%; }
.raster-0-5-hover:hover { width: 50%; }
.raster-0-33-hover:hover { width: 33.3333%; }

@media screen and (max-width: 992px) { 
  .raster-4-5, .raster-5-5 { width:30%; float:left; clear:none; } 
	.raster-5, .raster-6, .raster-7, .raster-8, .raster-9 { width:25%; float:left; clear:none; } 

  .raster-0-75-hover:hover, .raster-hover-75:hover { width: 75%; }
  .raster-0-5-hover:hover, .raster-hover-50:hover { width: 75%; }
  .raster-0-33-hover:hover { width: 75%; }
}
@media screen and (max-width: 768px) { 
  .raster-3-5, .raster-4-5, .raster-5-5 { width:40%; float:left; clear:none; } 
	.raster-3, .raster-4, .raster-5, .raster-6, .raster-7, .raster-8, .raster-9 { width:50%; float:left; clear:none; } 
}
@media screen and (max-width: 576px) { 
  .raster-2-5, .raster-3-5, .raster-4-5, .raster-5-5 { width:75%; float:left; clear:none; } 
	.raster-2, .raster-3, .raster-4, .raster-5, .raster-6, .raster-7, .raster-8, .raster-9 { width:100%; float:left; clear:none; } 
}

/* spaltigkeit aus TINY Modul */
.text-column-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
.text-column-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
.text-column-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }

@media only screen and (max-width: 992px) { 
	.text-column-3 { -webkit-column-count: 2 !important; -moz-column-count: 2 !important; column-count: 2 !important; } 
	.text-column-4 { -webkit-column-count: 2 !important; -moz-column-count: 2 !important; column-count: 2 !important; } 
}
@media screen and (max-width: 768px) { 
	.text-column-4 { -webkit-column-count: 1 !important; -moz-column-count: 1 !important; column-count: 1 !important; } 
	.text-column-3 { -webkit-column-count: 1 !important; -moz-column-count: 1 !important; column-count: 1 !important; } 
	.text-column-2 { -webkit-column-count: 1 !important; -moz-column-count: 1 !important; column-count: 1 !important; } 
}


/********** indole FX mit Color Variablen **********/

.scrollbar-h-hidden {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.offcanvas { z-index: 10000; }

.offcanvas-backdrop { position: fixed; background-color: transparent; }
.offcanvas-start, .offcanvas-end { width: auto; }


/* Allgemeines */

.min-height-25vh { min-height: 25vh !important; }
.min-height-30vh { min-height: 30vh !important; }
.min-height-40vh { min-height: 40vh !important; }
.min-height-50vh { min-height: 50vh !important; }
.min-height-60vh { min-height: 60vh !important; }
.min-height-70vh { min-height: 70vh !important; }
.min-height-80vh { min-height: 80vh !important; }
.min-height-90vh { min-height: 90vh !important; }
.min-height-100vh { min-height: 100vh !important; }

.text-shadow { text-shadow: 0px 0px 20px rgba(100, 100, 100, 0.5); }
.text-shadow-hell { text-shadow: 2px 3px 1px rgba(200, 200, 200, 1); }
.text-shadow-dark { text-shadow: 2px 3px 1px rgba(0, 0, 0, 1); }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.margin-top-10 { margin-top: -10px; }
.margin-right-10 { margin-right: -10px; }
.margin-bottom-10 { margin-bottom: -10px; }
.margin-left-10 { margin-left: -10px; }

.margin-top-20 { margin-top: -20px; }
.margin-right-20 { margin-right: -20px; }
.margin-bottom-20 { margin-bottom: -20px; }
.margin-left-20 { margin-left: -20px; }

.overflow { overflow: visible !important; }
.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }

.border-radius-5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
.border-radius-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
.border-radius-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
.border-radius-40 { -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; }
.border-radius-50pro { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }

.border-none { border-width: 0 !important; border-style: solid; border-color:inherit; }
.border, .border-1 { border-width: 1px; border-style: solid; border-color:inherit; }
.border-5 { border-width: 5px; border-style: solid; border-color:inherit; }
.border-10 { border-width: 10px; border-style: solid; border-color:inherit; }
.border-20 { border-width: 20px; border-style: solid; border-color:inherit; }

.border-hover-off:hover { border-width: inherit; border-style: solid; border-color: transparent; }

.border-top { border-top-width: 1px; border-top-style: solid; border-top-color: inherit !important; }
.border-bottom { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: inherit !important; }
.border-left { border-left-width: 1px; border-left-style: solid; border-left-color: inherit !important; }
.border-right { border-right-width: 1px; border-right-style: solid; border-right-color: inherit !important; }
.overline, .overline:hover { border-top-width: 3px; border-top-style: solid; border-top-color: rgba(var(--color-3), 1) !important; }
.underline, .underline:hover { border-bottom-width: 3px;border-bottom-style: solid;border-bottom-color: rgba(var(--color-3), 1) !important; }
.leftline, .leftline:hover { border-left-width: 3px; border-left-style: solid; border-left-color: rgba(var(--color-3), 1) !important; }
.rightline, .rightline:hover { border-right-width: 3px;border-right-style: solid;border-right-color: rgba(var(--color-3), 1) !important; }

/*** rounded **********/
.rounded-fx, .image.rounded-fx { -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -ms-border-radius: 10px 10px 10px 10px; -o-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; }
.mega-rounded, .image.mega-rounded { -webkit-border-radius: 40px 40px; -moz-border-radius: 40px 40px; -ms-border-radius: 40px 40px; -o-border-radius: 40px 40px; border-radius: 40px 40px; }

/*** shadow **********/
.shadow-normal { -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.85); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); }
.shadow-inset {	-moz-box-shadow: inset 0 0px 50px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0 0px 50px rgba(0, 0, 0, 0.25); box-shadow: inset 0 0px 50px rgba(0, 0, 0, 0.25); }
.shadow-object { -webkit-box-shadow: 0 20px 10px -11px rgba(0, 0, 0, 0.5);	-moz-box-shadow: 0 20px 10px -11px rgba(0, 0, 0, 0.25);	box-shadow: 0 20px 10px -11px rgba(0, 0, 0, 0.25); }
.shadow-hover-off:hover { -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.0); }

.circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; }
.circle-hover:hover { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; }
.circle-hover-off:hover { -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; overflow: hidden; }

/*** rotate **********/
.rotate3 { -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); transform:rotate(3deg); }
.rotate-3 {	-moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); transform:rotate(-3deg); }
.rotate5 { -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg);	transform:rotate(5deg); }
.rotate-5 {	-moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); transform:rotate(-5deg); }

.rotate-hover-off:hover, .image-rotate-hover-off:hover { -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); rotate: 0deg !important; }

/*** scale **********/
.scale-off:hover { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.scale-plus:hover { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.scale-minus:hover { -moz-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

.scale-0-5 { -moz-transform: scale(0.5); -webkit-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); }
.scale-0-8 { -moz-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
.scale-0-9 { -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.scale-1-1 { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.scale-1-2 { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.scale-1-3 { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
.scale-1-5 { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }
.scale-0-8-hover:hover { z-index: 1; -moz-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
.scale-0-9-hover:hover { z-index: 1; -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.scale-1-1-hover:hover { z-index: 1; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.scale-1-2-hover:hover { z-index: 1; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.scale-1-3-hover:hover { z-index: 1; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
.scale-1-5-hover:hover { z-index: 1; -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }
.scale-hover-normalize:hover { 
	-moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
	-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}


/*** Lines [verti] + Scala **********/
.lines-verti-color-1 { background-image: linear-gradient(to right, rgba(var(--color-1), 1) 1px, transparent 1px); }
.lines-verti-color-2 { background-image: linear-gradient(to right, rgba(var(--color-2), 1) 1px, transparent 1px); }
.lines-verti-color-3 { background-image: linear-gradient(to right, rgba(var(--color-3), 1) 1px, transparent 1px); }
.lines-verti-white { background-image: linear-gradient(to right, rgba(var(--white-color), 1) 1px, transparent 1px); }
.lines-verti-grau { background-image: linear-gradient(to right, rgba(var(--grau-color), 1) 1px, transparent 1px); }
.lines-verti-black { background-image: linear-gradient(to right, rgba(var(--black-color), 1) 1px, transparent 1px); }
.lines-verti-red { background-image: linear-gradient(to right, rgba(var(--red-color), 1) 1px, transparent 1px); }

.scala-verti-5 { background-size: 5px 100%; background-repeat: repeat-x; }
.scala-verti-10 { background-size: 10px 100%; background-repeat: repeat-x; }
.scala-verti-20 { background-size: 20px 100%; background-repeat: repeat-x; }
.scala-verti-30 { background-size: 30px 100%; background-repeat: repeat-x; }
.scala-verti-40 { background-size: 40px 100%; background-repeat: repeat-x; }
.scala-verti-50 { background-size: 50px 100%; background-repeat: repeat-x; }
.scala-verti-100 { background-size: 100px 100%; background-repeat: repeat-x; }


/*** Lines [hori] + Scala **********/
.lines-hori-color-1 { background-image: linear-gradient(to bottom, rgba(var(--color-1), 1) 1px, transparent 1px); }
.lines-hori-color-2 { background-image: linear-gradient(to bottom, rgba(var(--color-2), 1) 1px, transparent 1px); }
.lines-hori-color-3 { background-image: linear-gradient(to bottom, rgba(var(--color-3), 1) 1px, transparent 1px); }
.lines-hori-white { background-image: linear-gradient(to bottom, rgba(var(--white-color), 1) 1px, transparent 1px); }
.lines-hori-grau { background-image: linear-gradient(to bottom, rgba(var(--grau-color), 1) 1px, transparent 1px); }
.lines-hori-black { background-image: linear-gradient(to bottom, rgba(var(--black-color), 1) 1px, transparent 1px); }
.lines-hori-red { background-image: linear-gradient(to bottom, rgba(var(--red-color), 1) 1px, transparent 1px); }

.scala-hori-5 { background-size: 100% 5px; background-repeat: repeat-y; }
.scala-hori-10 { background-size: 100% 10px; background-repeat: repeat-y; }
.scala-hori-20 { background-size: 100% 20px; background-repeat: repeat-y; }
.scala-hori-30 { background-size: 100% 30px; background-repeat: repeat-y; }
.scala-hori-40 { background-size: 100% 40px; background-repeat: repeat-y; }
.scala-hori-50 { background-size: 100% 50px; background-repeat: repeat-y; }
.scala-hori-100 { background-size: 100% 100px; background-repeat: repeat-y; }


/*** Perspektiven **********/
.perspektive-L { position: relative;
  /* Transformation für Perspektive und Rotation */
  transform: perspective(200vh) rotateY(25deg);
  -webkit-transform: perspective(200vh) rotateY(25deg); /* Für ältere Webkit-Browser */
  -moz-transform: perspective(200vh) rotateY(25deg);    /* Für ältere Firefox-Versionen */
}
.perspektive-R { position: relative;
  /* Transformation für Perspektive und Rotation */
  transform: perspective(200vh) rotateY(-25deg);
  -webkit-transform: perspective(200vh) rotateY(-25deg); /* Für ältere Webkit-Browser */
  -moz-transform: perspective(200vh) rotateY(-25deg);    /* Für ältere Firefox-Versionen */
}
.perspektive-hover-reset:hover, .image-perspektive-hover-reset:hover { position: relative; z-index:1 !important;
	-moz-transform: rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
	-webkit-transform: rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
	transform: rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);  
}

.perspektive-hover:hover { position: relative; z-index:1 !important;
  /* Transformation für Perspektive und Rotation */
  transform: perspective(200vh) rotateY(0deg);
  -webkit-transform: perspective(200vh) rotateY(0deg); /* Für ältere Webkit-Browser */
  -moz-transform: perspective(200vh) rotateY(0deg);    /* Für ältere Firefox-Versionen */
}

.perspektive-hover-off:hover, .image-perspektive-hover-off:hover { position: relative; z-index:1 !important;
	-moz-transform: rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
	-webkit-transform: rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
	transform: rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);  
}

.looper-high { animation: perspect 25s infinite linear }
.looper { animation: perspect 50s infinite linear }
.looper-low { animation: perspect 75s infinite linear }
@keyframes perspect {
   0% {transform:perspective(300px) rotateY(0deg)}
   25% {transform:perspective(300px) rotateY(90deg)}
   50% {transform:perspective(300px) rotateY(180deg)}
   75% {transform:perspective(300px) rotateY(270deg)}
   100% {transform:perspective(300px) rotateY(360deg)}
}
.looper:hover, .looper-high:hover, .looper-low:hover { animation-play-state: paused; }



.swinger-high { animation: swing 25s infinite linear; }
.swinger { animation: swing 50s infinite linear; }
.swinger-low { animation: swing 75s infinite linear; }

@keyframes swing {
    0% { transform: perspective(1000px) rotateY(0deg); }
    25% { transform: perspective(1000px) rotateY(-25deg); }
    50% { transform: perspective(1000px) rotateY(0deg); }
    75% { transform: perspective(1000px) rotateY(25deg); }
    100% { transform: perspective(1000px) rotateY(0deg); }
}

.swinger:hover, .swinger-high:hover, .swinger-low:hover { animation-play-state: paused; }



.wipper {
  -webkit-animation: rotation 10s infinite linear; -moz-animation: rotation 10s infinite linear; -o-animation: rotation 10s infinite linear; -ms-animation: rotation 10s infinite linear; animation: rotation 10s infinite linear;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);  -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);  -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg);
  }
  50% {
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);  -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);  -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);  -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);
  }
}
.wipper:hover { animation-play-state: paused; }

.anime { animation: turner 6s infinite linear } 
@keyframes turner{
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
}
.anime:hover { animation-play-state: paused; }


/********** Turner **********/ 
.turn-hori { animation: turnerhori 12s infinite linear } 
.turn-hori:hover { animation-play-state: paused; }
  @keyframes turnerhori{
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
  }

.turn-verti { animation: turnerverti 12s infinite linear } 
.turn-verti:hover { animation-play-state: paused; }
  @keyframes turnerverti{
    from{  transform: rotateX(0deg)   }
    to  {  transform: rotateX(360deg) }
  }

.turn-left { animation: turnerleft 50s infinite linear } 
.turn-left:hover { animation-play-state: paused; }
  @keyframes turnerleft{
    from{  transform: rotate(360deg)   }
    to  {  transform: rotate(0deg) }
  }

.turn-right { animation: turnerright 50s infinite linear } 
.turn-right:hover { animation-play-state: paused; }
  @keyframes turnerright{
    from{  transform: rotate(0deg)   }
    to  {  transform: rotate(360deg) }
  }


.transition { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out; }
.image-transition { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out; }

.bg-transparent-hover:hover { background: none; background-color: rgba(0, 0, 0, 0) !important; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
.bg-none-hover:hover { background: none !important; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }




/********** Blink FX **********/ 

.blink { animation: blink-animation 2.5s steps(5, start) infinite; -webkit-animation: blink-animation 2.5s steps(5, start) infinite; }
@keyframes blink-animation {  to { visibility: hidden; transition: opacity ease-in-out 0s; animation-delay: 1s; } }
@-webkit-keyframes blink-animation { to { visibility: hidden; transition: opacity ease-in-out 3s; animation-delay: 3s; } }

.blink:hover { animation: none; -webkit-animation: none; }


/********** FadeScroll FX **********/  

/* Basis-Animationen */
.fadescroll {
  transition: all 400ms;
  opacity: 0;
}

.fade {
  opacity: 1;
}

.fade:not(.show) {
  opacity: inherit !important;
}

.slide-from-left,
.slide-from-right,
.slide-from-top,
.slide-from-bottom {
  transition: all 400ms;
  opacity: 0;
}

.slide-from-left { transform: translate(-600px, 0); }
.slide-from-right { transform: translate(600px, 0); }
.slide-from-top { transform: translate(0, -600px); }
.slide-from-bottom { transform: translate(0, 600px); }

.slide-left-in,
.slide-right-in,
.slide-top-in,
.slide-bottom-in {
  transform: translate(0, 0);
  opacity: 1;
}

@media print {
.slide-from-left, .slide-from-right, .slide-from-top, .slide-from-bottom  { transform: translate(0, 0); opacity: 1 !important; }
}


/* Fade-in Animations mit unterschiedlichen Zeiten */
.fade-in { animation: fadeIn 1.75s ease-in-out; }
.fade-in-1 { animation: fadeIn 1s ease-in-out; }
.fade-in-2-5 { animation: fadeIn 2.5s ease-in-out; }
.fade-in-5 { animation: fadeIn 5s ease-in-out; }
.fade-in-7-5 { animation: fadeIn 7.5s ease-in-out; }
.fade-in-10 { animation: fadeIn 10s ease-in-out; }
.fade-in-15 { animation: fadeIn 15s ease-in-out; }

/* Keyframes für FadeIn */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media print {
  .fade-in, .fade-in-1, .fade-in-2-5, .fade-in-5, .fade-in-7-5, .fade-in-10, .fade-in-15 { animation: fadeIn 0s ease-in-out !important; opacity: 1 !important; }
}


/********** Individuell FX **********/  
.text-transparent { color: rgba(255, 255, 255, 0.0); }


/* Color 1 ------------------------------------------------------------------------------- */

/* Textfarben + Hover-Effekte */
.text-color-1, .text-color-1-hover:hover { color: rgba(var(--color-1), var(--opacity-100)); }
.text-color-1-100, .text-color-1-100-hover:hover { color: rgba(var(--color-1), var(--opacity-100)); }
.text-color-1-75, .text-color-1-75-hover:hover { color: rgba(var(--color-1), var(--opacity-75)); }
.text-color-1-50, .text-color-1-50-hover:hover { color: rgba(var(--color-1), var(--opacity-50)); }
.text-color-1-25, .text-color-1-25-hover:hover { color: rgba(var(--color-1), var(--opacity-25)); }

/* Hintergrundfarben+ Hover-Effekte */
.bg-color-1, .bg-color-1-hover:hover { background-color: rgba(var(--color-1), var(--opacity-100)); }
.bg-color-1-100, .bg-color-1-100-hover:hover { background-color: rgba(var(--color-1), var(--opacity-100)); }
.bg-color-1-75, .bg-color-1-75-hover:hover { background-color: rgba(var(--color-1), var(--opacity-75)); }
.bg-color-1-50, .bg-color-1-50-hover:hover { background-color: rgba(var(--color-1), var(--opacity-50)); }
.bg-color-1-25, .bg-color-1-25-hover:hover { background-color: rgba(var(--color-1), var(--opacity-25)); }

/* Farbverläufe */
.verlauf-color-1-top {
  background: linear-gradient(to bottom, rgba(var(--color-1), 1) 0%, rgba(var(--color-1), 0) 100%);
}
.verlauf-color-1-bottom {
  background: linear-gradient(to bottom, rgba(var(--color-1), 0) 0%, rgba(var(--color-1), 1) 100%);
}
.verlauf-color-1-left {
  background: linear-gradient(to right, rgba(var(--color-1), 1) 33%, rgba(var(--color-1), 0) 100%);
}
.verlauf-color-1-right {
  background: linear-gradient(to right, rgba(var(--color-1), 0) 0%, rgba(var(--color-1), 1) 66%);
}

/* Diagonale Farbverläufe */
.verlauf-diagonal-color-1-tl-br {
  background: linear-gradient(135deg, rgba(var(--color-1), 1) 25%, rgba(var(--color-1), 0) 75%);
}
.verlauf-diagonal-color-1-tr-bl {
  background: linear-gradient(45deg, rgba(var(--color-1), 0) 25%, rgba(var(--color-1), 1) 75%);
}
.verlauf-diagonal-color-1-bl-tr {
  background: linear-gradient(45deg, rgba(var(--color-1), 1) 25%, rgba(var(--color-1), 0) 75%);
}
.verlauf-diagonal-color-1-br-tl {
  background: linear-gradient(135deg, rgba(var(--color-1), 0) 25%, rgba(var(--color-1), 1) 75%);
}

/* Shrink Color-1 */
.shrink-bg-color-1-tr { background: linear-gradient(70deg, rgba(var(--color-1), 0) 80%, rgba(var(--color-1), 1) 0%); }
.shrink-bg-color-1-br { background: linear-gradient(110deg, rgba(var(--color-1), 0) 80%, rgba(var(--color-1), 1) 0%); }
.shrink-bg-color-1-bl { background: linear-gradient(70deg, rgba(var(--color-1), 1) 20%, rgba(var(--color-1), 0) 0%); }
.shrink-bg-color-1-tl { background: linear-gradient(110deg, rgba(var(--color-1), 1) 20%, rgba(var(--color-1), 0) 0%); }

/* Radiale Farbverläufe */
.radial-in-color-1 {
  background: radial-gradient(circle, rgba(var(--color-1), 0) 0%, rgba(var(--color-1), 1) 100%);
}
.radial-out-color-1 {
  background: radial-gradient(circle, rgba(var(--color-1), var(--opacity-75)) 0%, rgba(var(--color-1), 0) 100%);
}

/* lineare Farbverläufe */
.verlauf-linear-color-1-top-bottom {
  background: linear-gradient(180deg, rgba(var(--color-1), 1) 0%, rgba(var(--color-1), 0) 50%, rgba(var(--color-1), 1) 100%);
}

/* Hover-Effekte für Verläufe und Radiale */
.verlauf-color-1-top:hover,
.verlauf-color-1-bottom:hover,
.verlauf-color-1-left:hover,
.verlauf-color-1-right:hover,
.verlauf-diagonal-color-1-tl-br:hover,
.verlauf-diagonal-color-1-tr-bl:hover,
.verlauf-diagonal-color-1-bl-tr:hover,
.verlauf-diagonal-color-1-br-tl:hover,
.radial-in-color-1:hover,
.radial-out-color-1:hover {
  transition: all var(--transition-duration) ease-in-out;
}


/* Color 2 ------------------------------------------------------------------------------- */

/* Textfarben + Hover-Effekte */
.text-color-2, .text-color-2-hover:hover { color: rgba(var(--color-2), var(--opacity-100)); }
.text-color-2-100, .text-color-2-100-hover:hover { color: rgba(var(--color-2), var(--opacity-100)); }
.text-color-2-75, .text-color-2-75-hover:hover { color: rgba(var(--color-2), var(--opacity-75)); }
.text-color-2-50, .text-color-2-50-hover:hover { color: rgba(var(--color-2), var(--opacity-50)); }
.text-color-2-25, .text-color-2-25-hover:hover { color: rgba(var(--color-2), var(--opacity-25)); }


/* Hintergrundfarben + Hover-Effekte */
.bg-color-2, .bg-color-2-hover:hover { background-color: rgba(var(--color-2), var(--opacity-100)); }
.bg-color-2-100, .bg-color-2-100-hover:hover { background-color: rgba(var(--color-2), var(--opacity-100)); }
.bg-color-2-75, .bg-color-2-75-hover:hover { background-color: rgba(var(--color-2), var(--opacity-75)); }
.bg-color-2-50, .bg-color-2-50-hover:hover { background-color: rgba(var(--color-2), var(--opacity-50)); }
.bg-color-2-25, .bg-color-2-25-hover:hover { background-color: rgba(var(--color-2), var(--opacity-25)); }


/* Farbverläufe */
.verlauf-color-2-top {
  background: linear-gradient(to bottom, rgba(var(--color-2), 1) 0%, rgba(var(--color-2), 0) 100%);
}
.verlauf-color-2-bottom {
  background: linear-gradient(to bottom, rgba(var(--color-2), 0) 0%, rgba(var(--color-2), 1) 100%);
}
.verlauf-color-2-left {
  background: linear-gradient(to right, rgba(var(--color-2), 1) 33%, rgba(var(--color-2), 0) 100%);
}
.verlauf-color-2-right {
  background: linear-gradient(to right, rgba(var(--color-2), 0) 0%, rgba(var(--color-2), 1) 66%);
}

/* Diagonale Farbverläufe */
.verlauf-diagonal-color-2-tl-br {
  background: linear-gradient(135deg, rgba(var(--color-2), 1) 25%, rgba(var(--color-2), 0) 75%);
}
.verlauf-diagonal-color-2-tr-bl {
  background: linear-gradient(45deg, rgba(var(--color-2), 0) 25%, rgba(var(--color-2), 1) 75%);
}
.verlauf-diagonal-color-2-bl-tr {
  background: linear-gradient(45deg, rgba(var(--color-2), 1) 25%, rgba(var(--color-2), 0) 75%);
}
.verlauf-diagonal-color-2-br-tl {
  background: linear-gradient(135deg, rgba(var(--color-2), 0) 25%, rgba(var(--color-2), 1) 75%);
}

/* Shrink Color-2 */
.shrink-bg-color-2-tr { background: linear-gradient(70deg, rgba(var(--color-2), 0) 80%, rgba(var(--color-2), 1) 0%); }
.shrink-bg-color-2-br { background: linear-gradient(110deg, rgba(var(--color-2), 0) 80%, rgba(var(--color-2), 1) 0%); }
.shrink-bg-color-2-bl { background: linear-gradient(70deg, rgba(var(--color-2), 1) 20%, rgba(var(--color-2), 0) 0%); }
.shrink-bg-color-2-tl { background: linear-gradient(110deg, rgba(var(--color-2), 1) 20%, rgba(var(--color-2), 0) 0%); }

/* Radiale Farbverläufe */
.radial-in-color-2 {
  background: radial-gradient(circle, rgba(var(--color-2), 0) 0%, rgba(var(--color-2), 1) 100%);
}
.radial-out-color-2 {
  background: radial-gradient(circle, rgba(var(--color-2), var(--opacity-75)) 0%, rgba(var(--color-2), 0) 100%);
}

/* lineare Farbverläufe */
.verlauf-linear-color-2-top-bottom {
  background: linear-gradient(180deg, rgba(var(--color-2), 1) 0%, rgba(var(--color-2), 0) 50%, rgba(var(--color-2), 1) 100%);
}

/* Hover-Effekte für Verläufe und Radiale */
.verlauf-color-2-top:hover,
.verlauf-color-2-bottom:hover,
.verlauf-color-2-left:hover,
.verlauf-color-2-right:hover,
.verlauf-diagonal-color-2-tl-br:hover,
.verlauf-diagonal-color-2-tr-bl:hover,
.verlauf-diagonal-color-2-bl-tr:hover,
.verlauf-diagonal-color-2-br-tl:hover,
.radial-in-color-2:hover,
.radial-out-color-2:hover {
  transition: all var(--transition-duration) ease-in-out;
}

/* Color 3 ------------------------------------------------------------------------------- */

/* Textfarben + Hover-Effekte */
.text-color-3, .text-color-3-hover:hover { color: rgba(var(--color-3), var(--opacity-100)); }
.text-color-3-100, .text-color-3-100-hover:hover { color: rgba(var(--color-3), var(--opacity-100)); }
.text-color-3-75, .text-color-3-75-hover:hover { color: rgba(var(--color-3), var(--opacity-75)); }
.text-color-3-50, .text-color-3-50-hover:hover { color: rgba(var(--color-3), var(--opacity-50)); }
.text-color-3-25, .text-color-3-25-hover:hover { color: rgba(var(--color-3), var(--opacity-25)); }

/* Hintergrundfarben + Hover-Effekte */
.bg-color-3, .bg-color-3-hover:hover { background-color: rgba(var(--color-3), var(--opacity-100)); }
.bg-color-3-100, .bg-color-3-100-hover:hover { background-color: rgba(var(--color-3), var(--opacity-100)); }
.bg-color-3-75, .bg-color-3-75-hover:hover { background-color: rgba(var(--color-3), var(--opacity-75)); }
.bg-color-3-50, .bg-color-3-50-hover:hover { background-color: rgba(var(--color-3), var(--opacity-50)); }
.bg-color-3-25, .bg-color-3-25-hover:hover { background-color: rgba(var(--color-3), var(--opacity-25)); }

/* Farbverläufe */
.verlauf-color-3-top {
  background: linear-gradient(to bottom, rgba(var(--color-3), 1) 0%, rgba(var(--color-3), 0) 100%);
}
.verlauf-color-3-bottom {
  background: linear-gradient(to bottom, rgba(var(--color-3), 0) 0%, rgba(var(--color-3), 1) 100%);
}
.verlauf-color-3-left {
  background: linear-gradient(to right, rgba(var(--color-3), 1) 33%, rgba(var(--color-3), 0) 100%);
}
.verlauf-color-3-right {
  background: linear-gradient(to right, rgba(var(--color-3), 0) 0%, rgba(var(--color-3), 1) 66%);
}

/* Diagonale Farbverläufe */
.verlauf-diagonal-color-3-tl-br {
  background: linear-gradient(135deg, rgba(var(--color-3), 1) 25%, rgba(var(--color-3), 0) 75%);
}
.verlauf-diagonal-color-3-tr-bl {
  background: linear-gradient(45deg, rgba(var(--color-3), 0) 25%, rgba(var(--color-3), 1) 75%);
}
.verlauf-diagonal-color-3-bl-tr {
  background: linear-gradient(45deg, rgba(var(--color-3), 1) 25%, rgba(var(--color-3), 0) 75%);
}
.verlauf-diagonal-color-3-br-tl {
  background: linear-gradient(135deg, rgba(var(--color-3), 0) 25%, rgba(var(--color-3), 1) 75%);
}

/* Shrink Color-3 */
.shrink-bg-color-3-tr { background: linear-gradient(70deg, rgba(var(--color-3), 0) 80%, rgba(var(--color-3), 1) 0%); }
.shrink-bg-color-3-br { background: linear-gradient(110deg, rgba(var(--color-3), 0) 80%, rgba(var(--color-3), 1) 0%); }
.shrink-bg-color-3-bl { background: linear-gradient(70deg, rgba(var(--color-3), 1) 20%, rgba(var(--color-3), 0) 0%); }
.shrink-bg-color-3-tl { background: linear-gradient(110deg, rgba(var(--color-3), 1) 20%, rgba(var(--color-3), 0) 0%); }

/* Radiale Farbverläufe */
.radial-in-color-3 {
  background: radial-gradient(circle, rgba(var(--color-3), 0) 0%, rgba(var(--color-3), 1) 100%);
}
.radial-out-color-3 {
  background: radial-gradient(circle, rgba(var(--color-3), var(--opacity-75)) 0%, rgba(var(--color-3), 0) 100%);
}

/* Linear Farbverläufe */
.verlauf-linear-color-3-top-bottom {
  background: linear-gradient(180deg, rgba(var(--color-3), 1) 0%, rgba(var(--color-3), 0) 50%, rgba(var(--color-3), 1) 100%);
}

/* Hover-Effekte für Verläufe und Radiale */
.verlauf-color-3-top:hover,
.verlauf-color-3-bottom:hover,
.verlauf-color-3-left:hover,
.verlauf-color-3-right:hover,
.verlauf-diagonal-color-3-tl-br:hover,
.verlauf-diagonal-color-3-tr-bl:hover,
.verlauf-diagonal-color-3-bl-tr:hover,
.verlauf-diagonal-color-3-br-tl:hover,
.radial-in-color-3:hover,
.radial-out-color-3:hover {
  transition: all var(--transition-duration) ease-in-out;
}



/* Black  -------------------------------------------------------------------------------- */

/* Textfarben + Hover-Effekte */
.text-black, .text-black-hover:hover { color: rgba(var(--black-color), var(--opacity-100)); }
.text-black-100, .text-black-100-hover:hover { color: rgba(var(--black-color), var(--opacity-100)); }
.text-black-75, .text-black-75-hover:hover { color: rgba(var(--black-color), var(--opacity-75)); }
.text-black-50, .text-black-50-hover:hover { color: rgba(var(--black-color), var(--opacity-50)); }
.text-black-25, .text-black-25-hover:hover { color: rgba(var(--black-color), var(--opacity-25)); }

/* Hintergrundfarben + Hover-Effekte*/
.bg-black, .bg-black-hover:hover { background-color: rgba(var(--black-color), var(--opacity-100)); }
.bg-black-100, .bg-black-100-hover:hover { background-color: rgba(var(--black-color), var(--opacity-100)); }
.bg-black-75, .bg-black-75-hover:hover { background-color: rgba(var(--black-color), var(--opacity-75)); }
.bg-black-50, .bg-black-50-hover:hover { background-color: rgba(var(--black-color), var(--opacity-50)); }
.bg-black-25, .bg-black-25-hover:hover { background-color: rgba(var(--black-color), var(--opacity-25)); }

/* Farbverläufe */
.verlauf-black {
  background: linear-gradient(to bottom, rgba(var(--black-color), var(--opacity-100)) 0%, rgba(var(--black-color), 0) 100%);
}

.verlauf-black-top {
  background: linear-gradient(to bottom, rgba(var(--black-color), 1) 0%, rgba(var(--black-color), 0) 100%);
}
.verlauf-black-bottom {
  background: linear-gradient(to bottom, rgba(var(--black-color), 0) 0%, rgba(var(--black-color), 1) 100%);
}

.verlauf-black-left {
  background: linear-gradient(to right, rgba(var(--black-color), var(--opacity-100)) 33%, rgba(var(--black-color), 0) 100%);
}

.verlauf-black-right {
  background: linear-gradient(to right, rgba(var(--black-color), 0) 0%, rgba(var(--black-color), var(--opacity-100)) 66%);
}

/* Diagonale Farbverläufe */
.verlauf-diagonal-black-tl-br {
  background: linear-gradient(135deg, rgba(var(--black-color), var(--opacity-100)) 33%, rgba(var(--black-color), 0) 100%);
}
.verlauf-diagonal-black-tr-bl {
  background: linear-gradient(45deg, rgba(var(--black-color), 0) 0%, rgba(var(--black-color), var(--opacity-100)) 66%);
}
.verlauf-diagonal-black-bl-tr {
  background: linear-gradient(45deg, rgba(var(--black-color), var(--opacity-100)) 33%, rgba(var(--black-color), 0) 88%);
}
.verlauf-diagonal-black-br-tl {
  background: linear-gradient(135deg, rgba(var(--black-color), 0) 0%, rgba(var(--black-color), var(--opacity-100)) 66%);
}

/* Shrink Black */
.shrink-bg-black-tr { background: linear-gradient(70deg, rgba(var(--black-color), 0) 80%, rgba(var(--black-color), 1) 0%); }
.shrink-bg-black-br { background: linear-gradient(110deg, rgba(var(--black-color), 0) 80%, rgba(var(--black-color), 1) 0%); }
.shrink-bg-black-bl { background: linear-gradient(70deg, rgba(var(--black-color), 1) 20%, rgba(var(--black-color), 0) 0%); }
.shrink-bg-black-tl { background: linear-gradient(110deg, rgba(var(--black-color), 1) 20%, rgba(var(--black-color), 0) 0%); }

/* Radiale Farbverläufe */
.radial-in-black {
  background: radial-gradient(circle, rgba(var(--black-color), 0) 0%, rgba(var(--black-color), var(--opacity-100)) 100%);
}

.radial-out-black {
  background: radial-gradient(circle, rgba(var(--black-color), var(--opacity-75)) 0%, rgba(var(--black-color), 0) 100%);
}

/* lineare Farbverläufe */
.verlauf-linear-black-top-bottom {
  background: linear-gradient(180deg, rgba(var(--black-color), 1) 0%, rgba(var(--black-color), 0) 50%, rgba(var(--black-color), 1) 100%);
}

/* Hover-Effekte für Verläufe und Radiale */
.verlauf-black:hover,
.verlauf-diagonal-black-tl-br:hover,
.verlauf-diagonal-black-tr-bl:hover,
.verlauf-diagonal-black-bl-tr:hover,
.verlauf-diagonal-black-br-tl:hover,
.radial-in-black:hover,
.radial-out-black:hover {
  transition: all var(--transition-duration) ease-in-out;
}


/* White  ------------------------------------------------------------------------------- */

/* Textfarben + Hover-Effekte */
.text-white, .text-white-hover:hover { color: rgba(var(--white-color), var(--opacity-100)); }
.text-white-100, .text-white-100-hover:hover { color: rgba(var(--white-color), var(--opacity-100)); }
.text-white-75, .text-white-75-hover:hover { color: rgba(var(--white-color), var(--opacity-75)); }
.text-white-50, .text-white-50-hover:hover { color: rgba(var(--white-color), var(--opacity-50)); }
.text-white-25, .text-white-25-hover:hover { color: rgba(var(--white-color), var(--opacity-25)); }

/* Hintergrundfarben + Hover-Effekte */
.bg-white, .bg-white-hover:hover { background-color: rgba(var(--white-color), var(--opacity-100)); }
.bg-white-100, .bg-white-100-hover:hover { background-color: rgba(var(--white-color), var(--opacity-100)); }
.bg-white-75, .bg-white-75-hover:hover { background-color: rgba(var(--white-color), var(--opacity-75)); }
.bg-white-50, .bg-white-50-hover:hover { background-color: rgba(var(--white-color), var(--opacity-50)); }
.bg-white-25, .bg-white-25-hover:hover { background-color: rgba(var(--white-color), var(--opacity-25)); }


/* Farbverläufe */
.verlauf-white {
  background: linear-gradient(to bottom, rgba(var(--white-color), var(--opacity-100)) 33%, rgba(var(--white-color), 0) 100%);
}

.verlauf-white-top {
  background: linear-gradient(to bottom, rgba(var(--white-color), 1) 0%, rgba(var(--white-color), 0) 100%);
}
.verlauf-white-bottom {
  background: linear-gradient(to bottom, rgba(var(--white-color), 0) 0%, rgba(var(--white-color), 1) 100%);
}

.verlauf-white-left {
  background: linear-gradient(to right, rgba(var(--white-color), var(--opacity-100)) 33%, rgba(var(--white-color), 0) 100%);
}

.verlauf-white-right {
  background: linear-gradient(to right, rgba(var(--white-color), 0) 0%, rgba(var(--white-color), var(--opacity-100)) 66%);
}

/* Diagonale Farbverläufe */
.verlauf-diagonal-white-tl-br {
  background: linear-gradient(135deg, rgba(var(--white-color), var(--opacity-100)) 33%, rgba(var(--white-color), 0) 100%);
}

.verlauf-diagonal-white-tr-bl {
  background: linear-gradient(45deg, rgba(var(--white-color), 0) 0%, rgba(var(--white-color), var(--opacity-100)) 66%);
}

.verlauf-diagonal-white-bl-tr {
  background: linear-gradient(45deg, rgba(var(--white-color), var(--opacity-100)) 33%, rgba(var(--white-color), 0) 88%);
}

.verlauf-diagonal-white-br-tl {
  background: linear-gradient(135deg, rgba(var(--white-color), 0) 0%, rgba(var(--white-color), var(--opacity-100)) 66%);
}

/* Shrink White */
.shrink-bg-white-tr { background: linear-gradient(70deg, rgba(var(--white-color), 0) 80%, rgba(var(--white-color), 1) 0%); }
.shrink-bg-white-br { background: linear-gradient(110deg, rgba(var(--white-color), 0) 80%, rgba(var(--white-color), 1) 0%); }
.shrink-bg-white-bl { background: linear-gradient(70deg, rgba(var(--white-color), 1) 20%, rgba(var(--white-color), 0) 0%); }
.shrink-bg-white-tl { background: linear-gradient(110deg, rgba(var(--white-color), 1) 20%, rgba(var(--white-color), 0) 0%); }

/* Radiale Farbverläufe */
.radial-in-white {
  background: radial-gradient(circle, rgba(var(--white-color), 0) 0%, rgba(var(--white-color), var(--opacity-100)) 100%);
}

.radial-out-white {
  background: radial-gradient(circle, rgba(var(--white-color), var(--opacity-75)) 50%, rgba(var(--white-color), 0) 150%);
}

/* lineare Farbverläufe */
.verlauf-linear-white-top-bottom {
  background: linear-gradient(180deg, rgba(var(--white-color), 1) 0%, rgba(var(--white-color), 0) 50%, rgba(var(--white-color), 1) 100%);
}

/* Hover-Effekte für Verläufe und Radiale */
.verlauf-white:hover,
.verlauf-diagonal-white-tl-br:hover,
.verlauf-diagonal-white-tr-bl:hover,
.verlauf-diagonal-white-bl-tr:hover,
.verlauf-diagonal-white-br-tl:hover,
.radial-in-white:hover,
.radial-out-white:hover {
  transition: all var(--transition-duration) ease-in-out;
}


/* Grau  -------------------------------------------------------------------------------- */

/* Textfarben */
.text-grau, .text-grau-hover:hover { color: rgba(var(--grau-color), var(--opacity-100)); }
.text-grau-100, .text-grau-100-hover:hover { color: rgba(var(--grau-color), var(--opacity-100)); }
.text-grau-75, .text-grau-75-hover:hover { color: rgba(var(--grau-color), var(--opacity-75)); }
.text-grau-50, .text-grau-50-hover:hover { color: rgba(var(--grau-color), var(--opacity-50)); }
.text-grau-25, .text-grau-25-hover:hover { color: rgba(var(--grau-color), var(--opacity-25)); }

/* Hintergrundfarben */
.bg-grau, .bg-grau-hover:hover { background-color: rgba(var(--grau-color), var(--opacity-100)); }
.bg-grau-100, .bg-grau-100-hover:hover { background-color: rgba(var(--grau-color), var(--opacity-100)); }
.bg-grau-75, .bg-grau-75-hover:hover { background-color: rgba(var(--grau-color), var(--opacity-75)); }
.bg-grau-50, .bg-grau-50-hover:hover { background-color: rgba(var(--grau-color), var(--opacity-50)); }
.bg-grau-25, .bg-grau-25-hover:hover { background-color: rgba(var(--grau-color), var(--opacity-25)); }


/* Farbverläufe */
.verlauf-grau {
  background: linear-gradient(to bottom, rgba(var(--grau-color), var(--opacity-100)) 33%, rgba(var(--grau-color), 0) 100%);
}

.verlauf-grau-top {
  background: linear-gradient(to bottom, rgba(var(--grau-color), 1) 0%, rgba(var(--grau-color), 0) 100%);
}
.verlauf-grau-bottom {
  background: linear-gradient(to bottom, rgba(var(--grau-color), 0) 0%, rgba(var(--grau-color), 1) 100%);
}

.verlauf-grau-left {
  background: linear-gradient(to right, rgba(var(--grau-color), var(--opacity-100)) 33%, rgba(var(--grau-color), 0) 100%);
}

.verlauf-grau-right {
  background: linear-gradient(to right, rgba(var(--grau-color), 0) 0%, rgba(var(--grau-color), var(--opacity-100)) 66%);
}

/* Diagonale Farbverläufe */
.verlauf-diagonal-grau-tl-br {
  background: linear-gradient(135deg, rgba(var(--grau-color), var(--opacity-100)) 33%, rgba(var(--grau-color), 0) 100%);
}

.verlauf-diagonal-grau-tr-bl {
  background: linear-gradient(45deg, rgba(var(--grau-color), 0) 0%, rgba(var(--grau-color), var(--opacity-100)) 66%);
}

.verlauf-diagonal-grau-bl-tr {
  background: linear-gradient(45deg, rgba(var(--grau-color), var(--opacity-100)) 33%, rgba(var(--grau-color), 0) 88%);
}

.verlauf-diagonal-grau-br-tl {
  background: linear-gradient(135deg, rgba(var(--grau-color), 0) 0%, rgba(var(--grau-color), var(--opacity-100)) 66%);
}

/* Shrink Grau */
.shrink-bg-grau-tr { background: linear-gradient(70deg, rgba(var(--grau-color), 0) 80%, rgba(var(--grau-color), 1) 0%); }
.shrink-bg-grau-br { background: linear-gradient(110deg, rgba(var(--grau-color), 0) 80%, rgba(var(--grau-color), 1) 0%); }
.shrink-bg-grau-bl { background: linear-gradient(70deg, rgba(var(--grau-color), 1) 20%, rgba(var(--grau-color), 0) 0%); }
.shrink-bg-grau-tl { background: linear-gradient(110deg, rgba(var(--grau-color), 1) 20%, rgba(var(--grau-color), 0) 0%); }

/* Radiale Farbverläufe */
.radial-in-grau {
  background: radial-gradient(circle, rgba(var(--grau-color), 0) 0%, rgba(var(--grau-color), var(--opacity-100)) 100%);
}

.radial-out-grau {
  background: radial-gradient(circle, rgba(var(--grau-color), var(--opacity-75)) 50%, rgba(var(--grau-color), 0) 150%);
}

/* lineare Farbverläufe */
.verlauf-linear-grau-top-bottom {
  background: linear-gradient(180deg, rgba(var(--grau-color), 1) 0%, rgba(var(--grau-color), 0) 50%, rgba(var(--grau-color), 1) 100%);
}

/* Hover-Effekte für Verläufe und Radiale */
.verlauf-grau:hover,
.verlauf-diagonal-grau-tl-br:hover,
.verlauf-diagonal-grau-tr-bl:hover,
.verlauf-diagonal-grau-bl-tr:hover,
.verlauf-diagonal-grau-br-tl:hover,
.radial-in-grau:hover,
.radial-out-grau:hover {
  transition: all var(--transition-duration) ease-in-out;
}


/* Rot  --------------------------------------------------------------------------------- */

/* Textfarben + Hover-Effekte */
.text-red, .text-red-hover:hover { color: rgba(var(--red-color), var(--opacity-100)); }
.text-red-100, .text-red-100-hover:hover { color: rgba(var(--red-color), var(--opacity-100)); }
.text-red-75, .text-red-75-hover:hover { color: rgba(var(--red-color), var(--opacity-75)); }
.text-red-50, .text-red-50-hover:hover { color: rgba(var(--red-color), var(--opacity-50)); }
.text-red-25, .text-red-25-hover:hover { color: rgba(var(--red-color), var(--opacity-25)); }

/* Hintergrundfarben + Hover-Effekte */
.bg-red, .bg-red-hover:hover { background-color: rgba(var(--red-color), var(--opacity-100)); }
.bg-red-100, .bg-red-100-hover:hover { background-color: rgba(var(--red-color), var(--opacity-100)); }
.bg-red-75, .bg-red-75-hover:hover { background-color: rgba(var(--red-color), var(--opacity-75)); }
.bg-red-50, .bg-red-50-hover:hover { background-color: rgba(var(--red-color), var(--opacity-50)); }
.bg-red-25, .bg-red-25-hover:hover { background-color: rgba(var(--red-color), var(--opacity-25)); }


/* Farbverläufe */
.verlauf-red {
  background: linear-gradient(to bottom, rgba(var(--red-color), var(--opacity-100)) 33%, rgba(var(--red-color), 0) 100%);
}

.verlauf-red-top {
  background: linear-gradient(to bottom, rgba(var(--red-color), 1) 0%, rgba(var(--red-color), 0) 100%);
}
.verlauf-red-bottom {
  background: linear-gradient(to bottom, rgba(var(--red-color), 0) 0%, rgba(var(--red-color), 1) 100%);
}

.verlauf-red-left {
  background: linear-gradient(to right, rgba(var(--red-color), var(--opacity-100)) 33%, rgba(var(--red-color), 0) 100%);
}

.verlauf-red-right {
  background: linear-gradient(to right, rgba(var(--red-color), 0) 0%, rgba(var(--red-color), var(--opacity-100)) 66%);
}

/* Diagonale Farbverläufe */
.verlauf-diagonal-red-tl-br {
  background: linear-gradient(135deg, rgba(var(--red-color), var(--opacity-100)) 33%, rgba(var(--red-color), 0) 100%);
}

.verlauf-diagonal-red-tr-bl {
  background: linear-gradient(45deg, rgba(var(--red-color), 0) 0%, rgba(var(--red-color), var(--opacity-100)) 66%);
}

.verlauf-diagonal-red-bl-tr {
  background: linear-gradient(45deg, rgba(var(--red-color), var(--opacity-100)) 33%, rgba(var(--red-color), 0) 88%);
}

.verlauf-diagonal-red-br-tl {
  background: linear-gradient(135deg, rgba(var(--red-color), 0) 0%, rgba(var(--red-color), var(--opacity-100)) 66%);
}

/* Shrink Red */
.shrink-bg-red-tr { background: linear-gradient(70deg, rgba(var(--red-color), 0) 80%, rgba(var(--red-color), 1) 0%); }
.shrink-bg-red-br { background: linear-gradient(110deg, rgba(var(--red-color), 0) 80%, rgba(var(--red-color), 1) 0%); }
.shrink-bg-red-bl { background: linear-gradient(70deg, rgba(var(--red-color), 1) 20%, rgba(var(--red-color), 0) 0%); }
.shrink-bg-red-tl { background: linear-gradient(110deg, rgba(var(--red-color), 1) 20%, rgba(var(--red-color), 0) 0%); }

/* Radiale Farbverläufe */
.radial-in-red {
  background: radial-gradient(circle, rgba(var(--red-color), 0) 0%, rgba(var(--red-color), var(--opacity-100)) 100%);
}

.radial-out-red {
  background: radial-gradient(circle, rgba(var(--red-color), var(--opacity-75)) 50%, rgba(var(--red-color), 0) 150%);
}

/* lineare Farbverläufe */
.verlauf-linear-red-top-bottom {
  background: linear-gradient(180deg, rgba(var(--red-color), 1) 0%, rgba(var(--red-color), 0) 50%, rgba(var(--red-color), 1) 100%);
}

/* Hover-Effekte für Verläufe und Radiale */
.verlauf-red:hover,
.verlauf-diagonal-red-tl-br:hover,
.verlauf-diagonal-red-tr-bl:hover,
.verlauf-diagonal-red-bl-tr:hover,
.verlauf-diagonal-red-br-tl:hover,
.radial-in-red:hover,
.radial-out-red:hover {
  transition: all var(--transition-duration) ease-in-out;
}


/* End  --------------------------------------------------------------------------------- */


/********** Transparenzen **********/  
/*** opacity **********/
.opacity-0 { opacity: 0; } .opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25 { opacity: 0.25; } .opacity-25-hover:hover { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.50; } .opacity-50-hover:hover { opacity: 0.50 !important; }
.opacity-75 { opacity: 0.75; } .opacity-75-hover:hover { opacity: 0.75 !important; }
.opacity-100 { opacity: 1; } .opacity-100-hover:hover { opacity: 1 !important; }


/********** Marquee FX **********/  
.marquee { display:flex; position: relative; width: 100%; height:100%; white-space: nowrap; overflow: hidden; box-sizing: border-box; }

.run50ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 50s linear infinite; }
.run50rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 50s linear infinite; animation-direction: reverse; }

.run40ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 40s linear infinite; }
.run40rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 40s linear infinite; animation-direction: reverse; }

.run30ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 30s linear infinite; }
.run30rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 30s linear infinite; animation-direction: reverse; }

.run20ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 20s linear infinite; }
.run20rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 20s linear infinite; animation-direction: reverse; }

.run18ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 18s linear infinite; }
.run18rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 18s linear infinite; animation-direction: reverse; }

.run16ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 16s linear infinite; }
.run16rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 16s linear infinite; animation-direction: reverse; }

.run14ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 14s linear infinite; }
.run14rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 14s linear infinite; animation-direction: reverse; }

.run12ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 12s linear infinite; }
.run12rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 12s linear infinite; animation-direction: reverse; }

.run10ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 10s linear infinite; }
.run10rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 10s linear infinite; animation-direction: reverse; }

.run9ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 9s linear infinite; }
.run9rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 9s linear infinite; animation-direction: reverse; }

.run8ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 8s linear infinite; }
.run8rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 8s linear infinite; animation-direction: reverse; }

.run7ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 2s linear infinite; }
.run7rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 2s linear infinite; animation-direction: reverse; }

.run6ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 6s linear infinite; }
.run6rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 6s linear infinite; animation-direction: reverse; }

.run5ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 5s linear infinite; }
.run5rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 5s linear infinite; animation-direction: reverse; }

.run4ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 4s linear infinite; }
.run4rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 4s linear infinite; animation-direction: reverse; }

.run3ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 3s linear infinite; }
.run3rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 3s linear infinite; animation-direction: reverse; }

.run2ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 2s linear infinite; }
.run2rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 2s linear infinite; animation-direction: reverse; }

.run1ltr { display:flex; position:absolute; padding-left: 100%; animation: marquee 1s linear infinite; }
.run1rtl { display:flex; position:absolute; padding-left: 100%; animation: marquee 1s linear infinite; animation-direction: reverse; }

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}


/* Marquee vertikal */


/* Von oben nach unten */
.run10ttb { display: flex; position: absolute; top: -100%; width: 100%; height: 100vh; animation: marqueeY 10s linear infinite; }
.run20ttb { display: flex; position: absolute; top: -100%; width: 100%; height: 100vh; animation: marqueeY 20s linear infinite; }
.run30ttb { display: flex; position: absolute; top: -100%; width: 100%; height: 100vh; animation: marqueeY 30s linear infinite; }
.run40ttb { display: flex; position: absolute; top: -100%; width: 100%; height: 100vh; animation: marqueeY 40s linear infinite; }
.run50ttb { display: flex; position: absolute; top: -100%; width: 100%; height: 100vh; animation: marqueeY 50s linear infinite; }
.run100ttb { display: flex; position: absolute; top: -100%; width: 100%; height: 100vh; animation: marqueeY 100s linear infinite; }

/* Von unten nach oben */
.run10btt { display: flex; position: absolute; top: 100%; width: 100%; height: 100vh; animation: marqueeYReverse 10s linear infinite; }
.run20btt { display: flex; position: absolute; top: 100%; width: 100%; height: 100vh; animation: marqueeYReverse 20s linear infinite; }
.run30btt { display: flex; position: absolute; top: 100%; width: 100%; height: 100vh; animation: marqueeYReverse 30s linear infinite; }
.run40btt { display: flex; position: absolute; top: 100%; width: 100%; height: 100vh; animation: marqueeYReverse 40s linear infinite; }
.run50btt { display: flex; position: absolute; top: 100%; width: 100%; height: 100vh; animation: marqueeYReverse 50s linear infinite; }
.run100btt { display: flex; position: absolute; top: 100%; width: 100%; height: 100vh; animation: marqueeYReverse 100s linear infinite; }

/* Keyframes für nach unten scrollende Animation */
@keyframes marqueeY {
    0% { transform: translateY(0); }
    100% { transform: translateY(200%); }
}

/* Keyframes für nach oben scrollende Animation */
@keyframes marqueeYReverse {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200%); }
}




/* Kenburns */

.kenburns {
  animation: burnsIn var(--burns-duration) ease infinite alternate;
}

.kenburns .slide-content {
  animation: burnsOut var(--burns-duration) ease infinite alternate; /* position: relative; top: 30px; */
}

@keyframes burnsIn {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

@keyframes burnsOut {
  from { transform: scale(1.2); }
  to { transform: scale(1); }
}


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



.video-background {
  background: rgba(39, 53, 131, 1);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: auto;
  width: 100%;
  height: 100%;
  pointer-events: none; 
  min-width: 1440px;
}

.video-background {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -99;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* clear fix */
.mixcontainer:after {
  content: '';
  display: block;
  clear: both;
}
.embed-responsive {
 position:relative;
 display:block;
 height:0;
 padding:0;
 overflow:hidden
}
.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 width:100%;
 height:100%;
 border:0
}
.embed-responsive-16by9 {
 padding-bottom:56.25%
}
.embed-responsive-4by3 {
 padding-bottom:75%
}

#swipebox-overlay { background: rgba(var(--grau-color), var(--opacity-100)); }
#swipebox-slider {-webkit-transition: -webkit-transform 1.4s ease; transition: transform 1.4s ease;
  height: 80%;
  left: 10%;
  top: 10%;
  width: 80%;
  white-space: nowrap;
  position: absolute;
  display: none;
  cursor: pointer;
}
#swipebox-slider .slide {
  height: 100%;
  width: 100%;
  line-height: 1px;
  text-align: center;
  display: inline-block;
  opacity: 0.25;
  transition: all 1s ease-in-out;
}
#swipebox-slider .current {
  opacity: 1; transition: all 1s ease-in-out;
}
#swipebox-container a { background-color: rgba(var(--grau-color), var(--opacity-100)); border-radius: 50%; }


/* -------------------------- Ende -------------------------------- */