:root {
  /* Abstände, Höhen und Weiten */
  --spacing-home: 90px;
  --spacing-default: 80px;
  --spacing-responsive: 30px;

  --width-desktop: 1244px;
  --width-twothird: 926px;

    /* wird per js gesetzt */
    --scrollbar-width: 0px;

    /* Farben */
    --red: #BD0926;
    --grey: #4B4A4D;
    --grey2: #A8A8A8;
    --white: #FFFFFF;

}

@font-face {font-family: 'Material Icons'; font-style: normal; font-display: swap; font-weight: 400; src: url('/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/MaterialIcons-Regular.ttf') format('truetype');}
@font-face {font-family: 'Material Icons Outlined'; font-style: normal; font-display: swap; font-weight: 400; src: url('/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/MaterialIcons-Outlined.woff2') format('woff2');
}
.material-icons {font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap;  direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}
.material-icons-outlined {font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -moz-font-feature-settings: 'liga'; -moz-osx-font-smoothing: grayscale;}

@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Light.woff2") format("woff2"),
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Light.woff") format("woff"),
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Regular.woff2") format("woff2"),
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Regular.woff") format("woff"),
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: 
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Semibold.woff") format("woff"),
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Bold.woff2") format("woff2"),
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Bold.woff") format("woff"),
      url("/typo3conf/ext/eas_sitepackage/Resources/Public/Fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
}

h1 {font-weight: 600; font-size: 40px; line-height: 56px;}
h2 {font-weight: 600; font-size: 36px; line-height: 46px; margin-bottom: 30px;}
h3 {font-weight: 700; font-size: 30px; line-height: 40px; margin-bottom: 24px;}
h4 {font-weight: 700; font-size: 26px; line-height: 36px; margin-bottom: 10px;}
h5 {font-weight: 700; font-size: 22px; line-height: 32px; margin-bottom: 10px;}
h6 {font-weight: 700; font-size: 20px; line-height: 30px; margin-bottom: 10px;}

.default h1, .default h2, .default h3, .default h4, .default h5, .default h6 {color: var(--red);}

/*************** defaults */
* { font-family: "Open Sans"; hyphens:none; -webkit-hyphens:none ; -moz-hyphens:none ; -ms-hyphens:none ; }
body {background: #fff; margin: 0; width: 100%; height: 100%; color: var(--grey);max-width:100%;overflow-x:hidden;}
a, a:hover, a p, a span {text-decoration: none;}
a,
.btn-link {color: var(--red);}
a:hover,
.btn-link:hover {color: var(--grey);}
.ce-bodytext a,
.frame-default {overflow: initial;}
p {font-weight: 400; margin: 0; font-size: 18px; line-height: 28px; letter-spacing: normal;}
ul, ol {padding: 0; margin: 0; list-style: none;}

/*************** Styling TYPO3 content elements class ********/
#main-content ul {list-style: none;}
#main-content ul li:before {content: "\2022"; color: var(--red); padding-right: 5px; font-size: 20px; top: 3px; position: relative;}
#main-content ol {list-style: none; counter-reset: item; padding-left: 15px;}
#main-content ol li {display: block;}
#main-content ol li:before {content: counter(item) ". "; counter-increment: item; color: var(--red); display: inline-block; width: 18px; margin-left: -16px;}
#main-content ul ul,
#main-content ol ul {list-style: circle inside;margin-left: 15px;}
#main-content .ce-bodytext li {font-size: 18px; line-height: 28px; list-style-position: inside; }
hr {border: 1px solid #303030; clear: both; height: 0; padding-top: 0px; margin-top: 0px;}
img {max-width: 100%; width: auto; height: auto;}
.ce-textpic ul {padding-bottom: 15px;}
.ce-gallery figcaption {text-align: left; font-size: 14px; line-height: 20px;}

#main-content ul.csc-bulletlist {list-style: disc; padding-left: 15px;}
#main-content ul.csc-bulletlist li {padding-left: 7px;}

#main-content .ce-left figure {margin-top: 40px;}
#main-content figure figcaption {margin-top: 20px;}

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

.centered {text-align: center;}
.csc-default,
.csc-header {margin-bottom: 40px;}
.csc-default .csc-header {margin-bottom: 0px;}

.ce-left img {float: left; padding-right: 15px;}
.ce-left.ce-nowrap .ce-bodytext {overflow: hidden;}
.ce-right img {float: right; padding-left: 15px;}
.ce-right.ce-nowrap .ce-bodytext {overflow: hidden;}
.ce-center .image {text-align: center;}

/**.ce-textpic {display: flex; flex-wrap: wrap; justify-content: space-between; }
.ce-textpic.ce-right {flex-direction: row-reverse;}
.ce-textpic .ce-gallery {float: none; width: 50%; margin: 0!important;}
.ce-gallery + .ce-bodytext {width: 50%;}
.ce-textpic .ce-gallery img {padding: 0;}
.ce-textpic.ce-right .ce-gallery + .ce-bodytext {margin-right: 20px; width: calc(50% - 20px);}**/

.ce-gallery figcaption {margin-top: 20px; font-size: 16px; font-weight: 300; font-style: italic; }
.ce-intext.ce-left ol, .ce-intext.ce-left ul {padding-left: 0px; list-style: none;}
#main-content .ce-bodytext ul.checkmarks {list-style-type: none;}
#main-content .ce-bodytext ul.checkmarks li {position: relative; padding-left: 30px; font-size: 18px;}
#main-content .ce-bodytext ul.checkmarks li:before { content:"done"; font-family: 'Material Icons'; font-size: 22px; top: 0px; left: 0px; position: absolute; pointer-events: none; color: var(--red);}

.redbutton a {padding: 8px 17px; background-color: var(--red); color: var(--white); position: relative;}
.redbutton a:hover {background-color: var(--grey);}
.redline {width: 276px; height: 4px; border-style:solid;border-image:linear-gradient(to right, var(--red), transparent) 1; border-width: 4px; border-bottom:0; border-left: 0; border-right: 0; margin-bottom: 30px;}

/*************** Frame (spacing and background color) ********/
.frame { padding: var(--spacing-home) 0; max-width: var(--width-desktop); margin: 0 auto; position: relative;}
.frame.frame-layout-1 {padding: 0;}
.frame.frame-layout-2 {padding: var(--spacing-home) 0 0 0;}
.frame.frame-layout-3 {padding: 0 0 var(--spacing-home) 0;}
.default .frame,
.intranet .frame .frame {padding: var(--spacing-default) 0;}
.default .frame.frame-layout-1,
.intranet .frame .frame.frame-layout-1 {padding: 0;}
.default .frame.frame-layout-2,
.intranet .frame .frame.frame-layout-2 {padding: var(--spacing-home) 0 0 0;}
.default .frame.frame-layout-3,
.intranet .frame .frame.frame-layout-3 {padding: 0 0 var(--spacing-home) 0;}
.frame.frame-space-before-none{padding-top:0 !important;}
.frame.frame-space-after-none{padding-bottom:0 !important;}
.frame.frame-space-before-small{padding-top:20px !important;}
.frame.frame-space-after-small{padding-bottom:20px !important;}
.frame.space_before-none{padding-top:0 !important;}
.frame.space_after-none{padding-bottom:0 !important;}
.frame.space_before-small{padding-top:20px !important;}
.frame.space_after-small{padding-bottom:20px !important;}
.frame .frame {padding: 0;}
.intranet .frame .frame { padding: var(--spacing-home) 0; max-width: var(--width-desktop); margin: 0 auto; position: relative;}
.frame:before {content: ""; height: 100%; background-color: var(--white); width:calc(100vw - var(--scrollbar-width)); position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%);}
.intranet .frame .frame:before {display: none;}
.frame-grey:before {background-color: rgba(75, 74, 77, 0.08);}
.innercontainer .frame:before {display: none;}

.frame.twothirds {max-width: var(--width-twothird); left: calc(calc(var(--width-twothird) - var(--width-desktop)) / 2);}
.frame.twothirds .ce-gallery {max-width: 290px;}
.frame.twothirds .ce-gallery img {object-fit:cover; }

.references .frame {max-width: 100%;}

.container {max-width: var(--width-desktop);}
.container .container {padding: 0;}

/*************** Icon classes ********/
.phone {position: relative; padding-left: 26px;}
.phone:before { content:"phone"; font-family: 'Material Icons'; font-size: 18px; top: -2px; left: 0px; position: absolute; pointer-events: none; color: var(--red);}
.fax {position: relative; padding-left: 26px;}
.fax:before { content:"print"; font-family: 'Material Icons'; font-size: 18px; top: -2px; left: 0px; position: absolute; pointer-events: none; color: var(--red);}
.email {position: relative; padding-left: 26px;}
.email:before { content:"email"; font-family: 'Material Icons'; font-size: 18px; top: 0px; left: 0px; position: absolute; pointer-events: none; color: var(--red);}
.cellphone {position: relative; padding-left: 26px;}
.cellphone:before { content:"phone_android"; font-family: 'Material Icons'; font-size: 18px; top: -2px; left: 0px; position: absolute; pointer-events: none; color: var(--red);}
.www {position: relative; padding-left: 26px;}
.www:before { content:"web"; font-family: 'Material Icons'; font-size: 22px; top: -2px; left: -1px; position: absolute; pointer-events: none; color: var(--red);}

/*************** Form ********/
#main-content input[type=checkbox] { -moz-appearance: none; appearance: none; -webkit-appearance: none; background-color: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 10px; border-radius: 4px; display: inline-block; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; top: 4px; margin-right: 5px;}
#main-content input[type=checkbox]:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
#main-content input[type=checkbox]:checked {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);}
#main-content input[type=checkbox]:checked:after {content:"done"; font-family: 'Material Icons'; font-size: 18px; top: -3px; right: 0px; position: absolute;}

.form-group .input .radio {padding-left: 20px;}
#main-content input[type=radio] { -moz-appearance: none; appearance: none; -webkit-appearance: none; background-color: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 10px; border-radius: 50px; display: inline-block; position: relative; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; top: 4px; margin-right: 5px; }
#main-content input[type=radio]:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
#main-content input[type=radio]:checked {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);}
#main-content input[type=radio]:checked:after {content:url(/typo3conf/ext/eas_sitepackage/Resources/Public/Icons/radiobutton.svg); top: 0px; right: 5px; position: absolute;}

/*************** Tables ********/
.ce-bodytext .contenttable {width: 820px;}
.ce-bodytext .contenttable th {background-color: var(--red); color: var(--white); padding: 13px 20px; border: 1px solid #FFFFFF67;}
.ce-bodytext .contenttable tr:nth-child(even) {background-color: #4B4A4D12;}
.ce-bodytext .contenttable td {padding: 13px 20px; border: 1px solid #4B4A4D10;}

/*************** Header ********/
.mobile-nav {display: none;}
#mobile-nav-trigger {display: none;}

body > .header { height: 113px; background-color: var(--white); }
.header .headerbox {position: relative; height: 100%; border-bottom: 2px solid rgba(75, 74, 77, 0.08);}
.header .headerbox .mainlogo {position: absolute; top: 10px; left: 0px; z-index: 100;}
.header .headerbox .mainlogo-sticky {position: absolute; top: 5px; left: 0px; display: none;z-index:1;}
.header .headerbox .mainlogo-sticky img {max-width: 275px;max-height: 70px;}
.header .headerbox .mainlogo img {max-height: 80px;}

.header .headerbox .headernav {position: absolute; top: 12px; right: 0;}
.header .headerbox .headernav ul li {display: inline-block; margin-left: 30px;}
.header .headerbox .headernav ul li a {font-size: 14px; color: var(--grey);}
.header .headerbox .headernav ul li.login a {color: var(--red);}
.header .headerbox .headernav ul li a:hover {color: var(--red); }
.header .headerbox .headernav .divider {margin-left: 30px;}
.header .headerbox .headernav .login {margin-left: 60px;}
.header .headerbox .headernav .login a {font-size: 14px; position: relative;}
.header .headerbox .headernav .login a:before {content:"east"; font-family: 'Material Icons'; font-size: 18px; top: -4px; left: -24px; position: absolute; pointer-events: none; color: var(--red);}
.header .headerbox .headernav div  {display: inline-block;}

.header .headerbox .mainnav {position: absolute; bottom: -8px; right: 0; width: 100%; text-align: right;}
.header .headerbox .mainnav ul li {display: inline-block; margin-left: 30px; padding-bottom: 18px; position:relative;}
.header .headerbox .mainnav ul li a {color: var(--grey); font-size: 17px; position: relative; padding: 5px 0; display: block;}
.header .headerbox .mainnav > .center-container > ul > li > a {text-transform: uppercase;}
.header .headerbox .mainnav ul li.redbutton a {padding: 8px 17px; background-color: var(--red); color: var(--white);}
.header .headerbox .mainnav ul li.redbutton a:hover {color: var(--white); background-color: var(--grey);}
.header .headerbox .mainnav > ul > li:hover > a {color: var(--red);}

.header .headerbox .mainnav ul ul {position: absolute;left: -23px;width: calc(100% + 85px);background-color: var(--white); border-top: 2px solid var(--red); padding: 16px 24px;z-index: 11;text-align: left;display: none;flex-direction: column; box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.15), 0px 4px 14px -1px rgba(0, 0, 0, 0.1); transform: translate(0, -60px); transition: transform 0.2s ease-out, opacity 0.2s, z-index 0s 0.2s; opacity: 0; margin-top: 13px;}
.header .headerbox .mainnav ul > li:hover ul > li {-webkit-animation-name: slideInLeft; animation-name: slideInLeft; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;}
.header .headerbox .mainnav ul ul li {margin: 0; padding-bottom: 0;}
.header .headerbox .mainnav ul ul li a {display: inline-block;}
.header .headerbox .mainnav ul ul li:hover a { color: var(--red);}
.header .headerbox .mainnav ul li:hover > ul {display: flex;  visibility: visible; transform: translate(0, 0); opacity: 1; z-index: 11;}
  @-webkit-keyframes slideInLeft {
    from {
      transform: translate(-25%, 0);
      opacity: 0;
    }
    to {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  @keyframes slideInLeft {
    from {
      transform: translate(-25%, 0);
      opacity: 0;
    }
    to {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

.header.sticky {position: fixed; height: 100px; width: 100%; top: 0; z-index: 101; box-shadow: 0px 3px 6px #0000000B;}
.header.sticky.intranet .headernav {display: block;}
.header.sticky .headerbox .mainlogo {display: none;}
.header.sticky .headerbox .mainlogo-sticky {display: block;}
.header.sticky .headerbox .mainnav ul li .l2-wrap {top: 100px;}
.header.sticky .headerbox .mainnav ul li.redbutton {
    padding-bottom: 0;
}
.header.sticky .headerbox .mainnav ul li ul {top: 33px;}

/*************** Main Content *********/
.rootline .frame {padding: 12px 0; font-size: 12px;}
.rootline .frame a {font-size: 12px;}

#keyvisual .frame {padding: 0 0 var(--spacing-default) 0;}
#keyvisual .frame.keyvisual-startseite{padding-bottom:0;}
.default .lead {font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: 30px;}

/*************** paginate *********/
.pagination li {display: inline-block; margin: 0 13px;display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; height: 44px; width: 44px; border: 2px solid var(--red);}
.pagination li::before {content: ""; display: none;}
.pagination li.active { border: 2px solid var(--grey);}
.pagination li.active a {color: var(--grey); }
.pagination .disabled { display: none; }

.bx-wrapper .bx-controls-direction a {z-index: 100;}

/*************** login ************/
.login {height: 100vh;}
.headernav .login {height: unset;}
.login .whitebox {position: relative; width: 742px; background-color: var(--white); height: 100%; left: 10%; padding: 27px 120px; height: 100%; min-height: 800px;}
.login #keyvisual {position: absolute; top: 0; margin-top: 0!important;}
.login .frame:before {display: none;}
.login .footer {background-color: var(--white); padding: 0; position: absolute; bottom: 30px; height: auto;}
.login .footer ul li {display: inline-block; margin-right: 30px;}
.login .footer ul li a {font-size: 16px; color: var(--grey);}

/*************** Footer ************/

.footer {background-color: var(--grey); padding: 25px 0 25px; height: 145px;}
.footer .frame {padding: 0;}
.footer .frame .row {align-items: center;}
.footer .frame .content-left {display: flex; align-items: baseline; gap: 50px;}
.footer .frame .content-left .award {min-width: 250px;}
.footer .logo {position: relative;}
.footer .logo .upper {color: var(--white); font-size: 22px;}
.footer .logo .lower {color: var(--white); font-size: 14px;}
.footer .footerMain ul {display: grid;text-align: right;}
.footer .footerMain li {display: inline-block;}
.footer .footerMain li a {color: var(--white);}
.footer .socialmedia {display: flex; flex-wrap: wrap; gap: 10px;}

.side-sticky{position: fixed;width: fit-content;right: 0;display: block;top: 50%;z-index: 44444;pointer-events: none;}
.side-sticky .sticky-phone,
.side-sticky .sticky-mail,
.side-sticky .sticky-yt,
.side-sticky .sticky-job{pointer-events: all;margin-bottom: 8px;background-color: #C00E0E;padding: 15px 30px 15px 60px;color:#fff;font-family: 'Montserrat';position: relative;transition:all 0.5s;right: -75%;height: 54px;}
.side-sticky .sticky-phone{padding: 8px 30px 8px 60px; line-height:1.2;}
.side-sticky .sticky-phone:hover,
.side-sticky .sticky-mail:hover,
.side-sticky .sticky-yt:hover,
.side-sticky .sticky-job:hover{right: -0%;}
.side-sticky .sticky-phone a,
.side-sticky .sticky-mail a,
.side-sticky .sticky-yt a,
.side-sticky .sticky-job a{color:#fff;font-family: 'Montserrat', Verdana, sans-serif;font-size: 14px;font-weight: 600;}
.side-sticky .sticky-job{background-color: #77160D;}
.side-sticky .sticky-phone::before,
.side-sticky .sticky-mail::before,
.side-sticky .sticky-yt::before,
.side-sticky .sticky-job::before{content: "";display: block;border-left: 10px solid transparent;border-bottom: 54px solid #C00E0E;position: absolute;left: -10px;top: 0;}
.side-sticky .sticky-job::before{border-bottom: 54px solid #77160D;}
.side-sticky .sticky-phone::after{content: "phone";font-family: 'Material Icons';font-size: 25px;top: 12px;left: 10px;position: absolute;pointer-events: none;color: #fff;}
.side-sticky .sticky-mail::after{content: "email";font-family: 'Material Icons';font-size: 25px;top: 8px;left: 10px;position: absolute;pointer-events: none;color: #fff;}
.side-sticky .sticky-yt::after{content: "smart_display";font-family: 'Material Icons Outlined';font-size: 25px;top: 8px;left: 10px;position: absolute;pointer-events: none;color: #fff;}
.side-sticky .sticky-job::after{content: "account_circle";font-family: 'Material Icons';font-size: 25px;top: 8px;left: 10px;position: absolute;pointer-events: none;color: #fff;}
