@charset "UTF-8";
/* @author ( Florian Koch | multimedia küche. ) */

/* ##########################  TEXTE / ÜBERSCHRIFTEN  ########################### */
@font-face {
    font-family: 'Anton-SC';
    src: url('../fonts/antonsc-regular-webfont.woff2') format('woff2'),
	     url('../fonts/antonsc-regular-webfont.woff') format('woff'),
         url('../fonts/antonsc-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PT-Sans-Narrow';
    src: url('../fonts/ptsansnarrow-regular-webfont.woff2') format('woff2'),
	     url('../fonts/ptsansnarrow-regular-webfont.woff') format('woff'),
         url('../fonts/ptsansnarrow-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ##########################  SCHRIFTEN  ########################### */
body { font-family: 'PT-Sans-Narrow', Tahoma, Geneva, sans-serif; }
h1 { font-family: 'Anton-SC', Arial, Swiss, sans-serif; letter-spacing: 10px; text-transform: uppercase; font-size: 72px !important; color: #ffffff; -webkit-text-stroke: 1px #000000; }
h2 { font-family: 'PT-Sans-Narrow', Tahoma, Geneva, sans-serif; letter-spacing: 5px; text-transform: uppercase; font-size: 48px !important; color: #ffffff; font-weight: 900; margin: 20px 0px 30px 0px; }
h3 { font-family: 'PT-Sans-Narrow', Tahoma, Geneva, sans-serif; letter-spacing: 0px; font-size: 32px !important; color: #ffffff; font-weight: 900; }
h4, p.wichtig { font-family: 'PT-Sans-Narrow', Tahoma, Geneva, sans-serif; letter-spacing: 0px; font-size: 24px !important; color: #ffffff; font-weight: 900; }
p, ul li { font-family: 'PT-Sans-Narrow', Tahoma, Geneva, sans-serif; letter-spacing: 0px; font-size: 24px !important; color: #ffffff; }
ul, #sp-bottom .sp-module ul, ul.liste { margin: 0 0 25px 25px; list-style: square outside !important; color: #ba2811; }
#sp-bottom h1, #sp-bottom h2, #sp-bottom h3, #sp-bottom h4, #sp-bottom p, #sp-bottom ul li { color: #ba2811; }

/* ##########################  LAYOUT  ########################### */
body { background-color: #ba2811; max-width: 2000px; }
#sp-header { position: fixed; background: none; box-shadow: none; }
.djslider-default { margin: 0px !important; }
#sp-main div.sp-module-content > div.pagebuilderck > div { position: absolute; top: 0px; left: 700px; max-height: 800px; }
#sp-bottom div.sp-module-content > div.pagebuilderck > div { position: relative; top: 0px; }
.article-ratings-social-share { display: none !important; visibility: hidden; }
#offcanvas-toggler { display: none !important; visibility: hidden; }
#djslider123::after { content: url("/images/system/top-border.png"); position: absolute; bottom: -10px; }
#sp-trennbereich { height: 77px; position: relative; z-index: 2; }
#sp-bottom { padding: 130px 0px 700px 0px ; margin-top: -77px; }
#mod-custom125 img { display: inline-block; text-align: center; }
#sp-bottom #mod-custom128 { background-color: rgba(255,255,255,0.8); padding: 50px 50px; border-radius:10px 15%; }
#sp-bottom .sp-module ul > li { margin-bottom: 0px; }
#sp-footer .container-inner { padding: 10px 0 0 0; border-top: none; }
#sp-footer2 #mod-custom125, #sp-footer1 { z-index: 2; position: relative; }
#mod-custom129 { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 0; }
#mod-custom129 img { width: 100%; }
#sp-main div.sp-module-content > div.pagebuilderck > div { max-height: unset; }
#sp-header .logo { position: fixed; left: 40px; top: 15px; }

/* ##########################  DESIGN  ########################### */
#sp-footer { font-size: 20px; }
.fa-solid::before { margin: 0px 15px 0px 15px; }
.action { display: block; width: 100%; min-height: 450px; }
.floaction { width: 27%; float: left; margin-left: 5%; }
.floaction button { min-width: 200px; text-align: center; line-height: 30px; font-size: 24px; font-weight: 900; background-color: #ba2811; color: #ffffff; transition: all 0.5s ease-in; border-radius:10px; text-transform: uppercase; display: block; margin: 0px 0px 20px 0px; }
.floaction button:hover { background-color: #171513; border-radius: 0px; }
#sp-bottom a { color: #ffffff; }
#sp-bottom a:hover, #sp-bottom button:hover a { color: #A2A2A2 !important; }
span.sp-copyright { font-weight: bold; }
#modal-menu-toggler { margin-top: 15px; z-index: 999; }
.burger-icon { width: 40px; cursor: pointer; }
.burger-icon > span { height: 4px; background-color: #ffffff; margin: 8px 0; }
#modal-menu-toggler.active .burger-icon > span { margin: 3px 0; }
#modal-menu { top: 0px; }

/* ##########################  ANIMATION  ########################### */
.heartbeat { -webkit-animation: heartbeat 1.5s ease-in-out infinite reverse; animation: heartbeat 2.5s ease-in-out infinite reverse ; }
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@media (max-width:1800px) {	#sp-bottom { padding-bottom: 600px; } }
@media (max-width:1550px) {	#sp-main div.sp-module-content > div.pagebuilderck > div { right: -150px; left: unset; } #sp-bottom { padding-bottom: 480px; } }
@media (max-width:1400px) {	#sp-main div.sp-module-content > div.pagebuilderck > div { right: -300px; left: unset; } }
@media (max-width:1250px) {	#sp-main div.sp-module-content > div.pagebuilderck > div { right: -450px; left: unset; } #sp-bottom { padding-bottom: 380px; } }
@media (max-width:1100px) {	#sp-main div.sp-module-content > div.pagebuilderck > div { right: -600px; left: unset; } #sp-bottom { padding-bottom: 300px; } }
@media (max-width:950px) { #sp-main div.sp-module-content > div.pagebuilderck > div { right: -750px; left: unset; } #sp-bottom { padding-bottom: 240px; } }
@media (max-width:991px) {
	#sp-header .logo { height: 100px !important; }
	.floaction { width: 100%; float: none; margin-left: 0px; }
	.row > * { width: unset; }
	#sp-header.header-with-modal-menu #modal-menu-toggler { display: block; }
	#modal-menu .modal-menu-inner > .container { padding: 70px 0 0 50px; }
}
@media (max-width:800px) {	
	#sp-main div.sp-module-content > div.pagebuilderck > div { position: relative; left: 0px; right: unset; }
	#sp-bottom #mod-custom128 { border-radius: 0px; }
	#sp-bottom { padding-bottom: 210px; }
	#sp-footer .container-inner { padding: 0px 0 0 0; overflow: hidden; }	
	#sp-footer2 #mod-custom125 { height: 25px; }
	#mod-custom125 img { height: 25px; width: auto; }
	span.sp-copyright { font-size: 16px; line-height: 35px; }
}
@media (max-width:500px) {
	h1 { font-size: 66px !important; }
	h2 { font-size: 40px !important; }
	#sp-header .logo { left: 20px !important; }
	#sp-bottom #mod-custom128 { padding: 20px 20px; }
	#sp-bottom { padding-bottom: 130px; }
	#sp-footer .container-inner { padding: 0px 0 0 0; }
}