@font-face {font-family: "OpenSans"; src: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Fonts/OpenSans-Regular.ttf");}
@font-face {font-family: "OpenSans-Italic"; src: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Fonts/OpenSans-Italic.ttf");}
@font-face {font-family: "OpenSans-Bold"; src: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Fonts/OpenSans-Bold.ttf");}
@font-face {font-family: "OpenSans-BoldItalic"; src: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Fonts/OpenSans-BoldItalic.ttf");}
@font-face {font-family: "Lora"; src: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Fonts/Lora-Regular.ttf");}
@font-face {font-family: "Lora-Bold"; src: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Fonts/Lora-Bold.ttf");}

h1 {font-family: 'OpenSans-Bold', sans-serif; font-weight: normal; font-size: 50px; line-height: 1.36;}
h2 {font-family: 'OpenSans-Bold', sans-serif; font-weight: normal; font-size: 30px; line-height: 1.27;}
h3 {font-family: 'OpenSans-Bold', sans-serif; font-weight: normal; font-size: 24px; line-height: 1.38;}

.gridheader h1, .gridheader h2, .gridheader h3 {margin-bottom: 90px;}

/*************** defaults */
* {font-family: 'OpenSans', sans-serif; color: #111111; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
i {font-family: 'OpenSans-Italic', sans-serif;}
b {font-family: 'OpenSans-Bold', sans-serif; font-weight: normal;}
b i, i b {font-family: 'OpenSans-BoldItalic', sans-serif;}
body {background: #111111; margin: 0; width: 100%; font-size: 18px; }
a, a p, a span {text-decoration: none;font-size: 18px; color: #e3000d;}
a:hover {color: #c00000; text-decoration: none;}
.ce-bodytext a {overflow: auto;}
.frame-default p a {position:relative; padding-left: 22px;}
p {padding: 0 0 20px 0 ; margin: 0; line-height: 1.8; letter-spacing: normal;}
.ce-textpic ul {padding-bottom: 15px;}
ul, ol {padding: 0; margin: 0; list-style: none;}
.background-container {background-color: #fff;}
#main-content ul {list-style: inside;}
#main-content ul ul,
#main-content ol ul {list-style: circle inside;margin-left: 15px;}
#main-content ol {list-style: decimal inside;}
#main-content .ce-bodytext li {font-size: 16px; line-height: 28px; list-style-position: inside; padding-left: 1em; text-indent: -1em;}
#main-content.home .col-md-4 {overflow: hidden;}
hr {border: 1px solid #b2b2b2; clear: both; height: 0; padding-top: 0px; margin-top: 0px;}
img {max-width: 100%; width: auto; height: auto;}
img.rounded {border-radius: 8px !important;}
.form-control:focus {box-shadow: none; border-color: #e2e2e2;}
.text-danger{color: #e3000e !important}

.btn {background-color: #e3000e; color: #fff;}
.btn:hover {background-color: #C00000; color: #fff;}
#main-content ul.csc-bulletlist {list-style: disc; padding-left: 15px;}
#main-content ul.csc-bulletlist li {padding-left: 7px;}

.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;}
.frame-shove-it-up{margin-top:-260px;}

.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;}

#main-content .gridelement,
#main-content .red_block,
#main-content .frame {margin-bottom: 70px;}
#main-content form .frame {margin-bottom: 0;}
.gridelement.merge-bottom {padding-bottom: 0; margin-bottom: 20px;}

.container {max-width: 1310px;}
.container .container {padding: 0;}

.gridelement.frame-red-circles .row {overflow: hidden;}

/*************** Header ********/
.header {z-index: 99; border-bottom: solid 2px #e6e6e6; width: 100%;  background: #fff; position: relative;}
.header.sticky {position: fixed; top: 0;}
.header .container {max-width: 1920px; padding: 0 25px;}
.mainlogo {display: inline-block; z-index: 10; position: relative;}
.mainlogo a {margin: 25px 46px 15px 0; display: inline-block;z-index: 3; position: relative;}
.mainlogo a img {max-height: 76px; margin-bottom: 7px; padding-right: 15px;}
.mainlogo a .logotext {display: inline-block; font-size: 24px; line-height: 1.38; font-weight: normal; vertical-align: bottom; margin-left: 20px;}

.header .mainnav {display: inline-block; position: absolute; top: 51px; right: 0; width: 100%; text-align: right; z-index: 9;}
.header .mainnav nav {display: inline-block; padding-right: 25px;}
.header .mainnav nav > ul > li {display: inline-block; padding: 0 27px 41px;}
.header .mainnav nav ul li.current a,
.header .mainnav nav ul li.active a {border-bottom: 2px solid #e6e6e6;}
.header .mainnav nav ul li.current ul li a,
.header .mainnav nav ul li.active ul li a,
.header .mainnav nav ul li.active ul li.current ul li a {border: none;}
.header .mainnav nav ul li a {font-family: 'OpenSans-Bold', sans-serif; font-size: 24px; line-height: 1.38; color: #111111; text-transform: uppercase;}
.header .mainnav nav ul li ul li ul li a {text-transform: none;}
.header .mainnav nav ul li ul li:last-child ul {left: 100%; right: auto;}
.header .mainnav nav ul ul li {display: inline-block; padding: 15px 0px; margin: 0;}
.header .mainnav nav ul ul li a {display: inline-block; font-family: 'OpenSans-Bold', sans-serif; font-size: 20px; width: 100%; color: #111111;}
.header .mainnav nav ul ul li a:hover {text-decoration: underline;}
.header .mainnav nav ul li:last-child ul ul {right: 100%;}
.header .mainnav nav ul li:last-child ul li:last-child ul {right: 100%; left: auto;}
.header .mainnav nav ul ul li:hover ul {display: block;}
.header .search {display: inline-block;position: relative; cursor: pointer; top: -4px;}
.header .search i {padding: 5px 7px 3px 7px; color: #fff;}
.header .mainnav nav ul li:hover div.l2 {display: block;}
.header .mainnav nav ul li:hover ul.limiter {display: -webkit-box;display: -ms-flexbox;display: flex; max-width: 1310px; margin: 0 auto;}
.header .mainnav nav ul li:hover ul.limiter > li > ul {padding-top: 15px}
.header .mainnav nav ul li:hover ul.limiter > li { margin-right: 70px; }
.header .mainnav ul li .l2-wrap {height: auto; position: absolute; width: 100%; left: 0; top: 100%;}
.header .mainnav ul li div.l2 {padding: 41px 0px; margin: 0 auto; text-align: left; opacity: 1; background-color: #fff; border-bottom: solid 2px #e6e6e6; display: none;}
.header .mainnav ul li div.l2 li {vertical-align: top; margin: 0; background: none; height: auto; display: block;}
.header .mainnav ul li div.l2 li:last-child {margin-right: 0;}
.header .mainnav ul li div.l2 ul {position: static; padding: 0; top: auto; left: auto; -webkit-box-shadow: none; box-shadow: none; width: auto; background-color: rgba(0,0,0,0);}
.header .mainnav ul ul ul li a { font-family: 'OpenSans', sans-serif; font-size: 16px; font-weight: normal; letter-spacing: normal; text-align: left; color: #111111;}
.header .mainnav ul ul li span.bottomfeeder {position: relative; display: block; height: 40px;}
.header .mainnav nav ul ul li ul li a {position: static;}
.mobile-nav {display: none;}
#mobile-nav-trigger {display: none;}

/*************** Iframe ************/
.framewrapper .background-container {padding: 20px 0;}

/*************** Keyvisual ************/
.keyvisual .container {max-width: 1920px; position: relative; margin-bottom: 130px; padding: 0;}
.keyvisual .keytext {position: absolute; top: 136px; left: 184px; transition: all 0.5s ease;}
.keyvisual .keytext p {transition: all 0.5s ease; background-color: #e6e6e6; font-size: 50px; font-family: 'OpenSans-Bold', sans-serif; line-height: 1.8; letter-spacing: 0.5px; margin-bottom: 13px; padding: 0 20px 0 20px; display: inline-block;}
.responsive-keyimage {display: none;}

/*************** Keyvisual subpage************/
.wokeyvisual {margin-bottom: 25px;}
.rootline {margin-top: 20px; font-size: 15px;}
.rootline a {color: #111111;font-size: 15px;}
.rootline a:hover {text-decoration: underline;}
.pre-title {font-size: 50px; font-family: 'OpenSans-Bold', sans-serif; line-height: 1.36; margin: 25px 0 50px 0; text-transform: uppercase;}
.keyvisual.sub {margin-bottom: 50px;}
.keyvisual.sub .container {margin-bottom: 0;}
.keyvisual.sub .keyimage { height: 421px;}

/*************** indexed-search ************/
.main-searchbox {display: none;}
.main-searchbox .searchrow {background: rgba(0, 0, 0, 0.25); display: inline-block; position: absolute; right: 13px; padding: 10px 10px; top: 50px; }
.main-searchbox .searchrow .sword {width: 200px; display: inline-block; margin-right: 20px;}
.main-searchbox .searchrow .submitbtn {width: auto; display: inline-block;}
.main-searchbox .searchrow .submitbtn input {background-color: #e3000e; color: #fff;}
.main-searchbox .searchrow .submitbtn input:hover {background-color: #c00000;}

.tx-indexedsearch-info-sword {margin-top: 15px;}
.col-1.tx-indexedsearch {-ms-flex: 0 0 3.333333%; flex: 0 0 3.333333%; max-width: 3.333333%;}
.tx-indexedsearch-res {width: 90%; display: inline-block;}


/*************** DCE image/header/text *********/
.ImageHeaderText * {text-align: center; position: relative;}
.ImageHeaderText .keyimage {display: block; margin-bottom: 40px; height: 208px;}
.ImageHeaderText .keyimage img {max-width: 100%; height: auto;}
.ImageHeaderText h1, .ImageHeaderText h2, .ImageHeaderText h3 {margin-bottom: 10px;}
.ImageHeaderText .iht_button { position: absolute; bottom: 20px; left: 0; right: 0; border: 2px solid #e3000e; border-radius: 8px; width: 215px; height: 60px; font-family: 'OpenSans-Bold', sans-serif; font-size: 20px; color: #e3000e; line-height: 42px; margin: 0 auto; display: block; background-color: #fff;}
.ImageHeaderText .iht_button:hover {border-color: #c00000; color: #c00000;}
.ImageHeaderText .iht_button a {padding: 20px 48px; font-family: 'OpenSans-Bold', sans-serif;}

/*************** DCE Zähler Element *********/
.counter-title, .counter-value {text-align: center; display: inline-block; width: 133px; margin-left: 14%;}
.counter-value {font-family: 'OpenSans-Bold', sans-serif; font-size: 50px; line-height: 1.36;}
.counter-title {font-family: 'OpenSans-Bold', sans-serif; font-size: 24px; line-height: 1.38;}
.inner_circle {width: 250px; height: 250px; border: 2px solid #e6e6e6; border-radius: 50%;top: 25px; left: 25px; position: absolute;}
.counter-content {padding-top: 27%; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg);}
.spin {background: none; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 1em; padding: 1em 2em; -webkit-box-shadow: inset 0 0 0 2px #e3000e; box-shadow: inset 0 0 0 2px #e3000e; color: #e3000e; font-size: inherit; font-weight: 700; position: relative; vertical-align: middle; width: 300px; height: 300px; padding: 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg);}
.spin::before, .spin::after { -webkit-box-sizing: inherit; box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%;}
.spin.active { color: #e3000e;}
.spin::before, .spin::after { top: 0; left: 0;}
.spin::before {border: 2px solid transparent;}
.spin.active::before {border-top-color: #e3000e; border-right-color: #e3000e; border-bottom-color: #e3000e; -webkit-transition: border-top-color 0.4s linear, border-right-color 0.3s linear 0.9s, border-bottom-color 1s linear 1.9s; transition: border-top-color 0.4s linear, border-right-color 0.3s linear 0.9s, border-bottom-color 1s linear 1.9s;}
.spin::after {border: 0 solid transparent;}
.spin.active::after {border-top: 2px solid #e3000e; border-left-width: 2px; border-right-width: 2px; -webkit-transform: rotate(270deg); transform: rotate(270deg); transition: border-left-width 0s linear 3s, -webkit-transform 3s linear 0s; -webkit-transition: border-left-width 0s linear 3s, -webkit-transform 3s linear 0s; transition: transform 3s linear 0s, border-left-width 0s linear 3s; transition: transform 3s linear 0s, border-left-width 0s linear 3s, -webkit-transform 3s linear 0s;}
 .circle {border-radius: 100%; -webkit-box-shadow: none; box-shadow: none;}
 .circle::before, .circle::after {border-radius: 100%;}

/* IE10+ CSS styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .counter-content {padding-top: 32%;}
    .counter-title, .counter-value {margin-left: 26%;}
}

 /*************** DCE Red Box *********/
 .red_block {background-color: #e3000e; border-radius: 8px; padding: 70px 49px; position: relative;}
 .red_block .textpart .rbheader {font-family: 'OpenSans-Bold', sans-serif; font-size: 30px; line-height: 1.27;color: #fff; margin-bottom: 10px; word-break: break-word;}
 .red_block .textpart .rbtext {font-family: 'OpenSans-Bold', sans-serif; font-size: 20px; line-height: 1.35;color: #fff;}
 .red_block .blockbutton {position: absolute; right: 96px; background-color: #fff; top: 50%; transform: translateY(-50%);border-radius: 8px; max-width: 215px;}
 .red_block .blockbutton a {padding: 17px 38px; display: block;  font-family: 'OpenSans-Bold', sans-serif; font-size: 20px;line-height: 1.35; text-align: center;}

 /*************** DCE Youtube **********************/
.youtube-fullwidth {width: 100%; position: relative; overflow: auto; padding: 50px 0;}
.youtube {max-width: 800px; clear: both; margin-top: 30px;}
.youtube-fullwidth .youtube {margin: 0 auto;}
.youtube .video-responsive iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #000;}
.youtube .video-responsive {position: relative;padding-bottom: 56.25%; /* Default 16:9 ratio*/padding-top: 0px;height: 0;overflow: hidden;}

 /*************** DCE Keyvisual **********************/
.keyvisual.home img {width: 100%;}
/*************** Form Elements ************/
.input input[type=text] {border-radius: 8px; border: solid 2px #e6e6e6; background-color: #e6e6e6;}
.checkbox-container {display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.checkbox-container input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark { position: absolute; top: 5px; left: 0; height: 25px; width: 25px; border-radius: 50%; border: 2px solid #e6e6e6;}
.checkbox-container input:checked ~ .checkmark {background-color: #fff; border: 2px solid #e6e6e6;}
.checkmark:after { content: ""; position: absolute; display: none;}
.checkbox-container input:checked ~ .checkmark:after {display: block;}
.checkbox-container .checkmark:after { top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 50%; background: #111111;}
.checkmark-check {position: absolute; top: 4px; left: 0; height: 25px; width: 25px; border-radius: 8px;border: 2px solid #e6e6e6;}
.container input:checked ~ .checkmark-check { background-color: #fff;border: 2px solid #e6e6e6;}
.checkmark-check:after {content: ""; position: absolute; display: none;}
.container input:checked ~ .checkmark-check:after {display: block;}
.container .checkmark-check:after {left: 9px; top: 5px; width: 5px; height: 10px; border: solid #111111; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.submit .btn-primary {background-color: #e3000e; border-color: #e3000e;}
.submit .btn-primary:hover {background-color: #c00000; border-color: #c00000;}

/*************** Regiosuche ************/
.regiosuche { padding: 60px 60px; border: 2px solid #e6e6e6; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
.regiosuche .searchMenu {position: absolute; left: 35px; top: 18px; font-size: 20px;}
.regiosuche .plz { height: 60px; padding-left: 55px; background-color: #e6e6e6; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border: 2px solid #e2e2e2; }
.regiosuche .form-control.plz:focus {box-shadow: none; background-color: #ffffff; border-color: #e2e2e2;}
.regiosuche .btn { height: 60px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; font-family: 'OpenSans-Bold', sans-serif; padding: 0 40px; }
.regiosuche .error {color: #e3000e; padding-bottom: 10px;}

/*************** Anpassungen Cookiebanner ************/
.cc-window.cc-floating {max-width: 25em;}
.cc-revoke, .cc-window {-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.1); box-shadow: 0 0 4px 2px rgba(0,0,0,.1); background-color: #ebebeb;}
.cc-btn.cc-allow {background-color: #e3000d; border-color: #e3000d; color: #fff; text-decoration: none;}
.cc-btn.cc-allow:hover {color: #fff;}
.cc-btn.cc-deny {color: #e3000d; text-decoration: none;}
.cc-btn.cc-deny:hover {color: #e3000d; }

/*************** Footer ************/
footer{background-color: #e6e6e6; padding: 46px 0 46px 0; position: relative; margin-top: 50px;}
footer .gridelement {margin-bottom: 0;}
footer h3 {margin-bottom: 10px;}
footer ul {display: inline-block; margin-right: 20%; vertical-align: top;}
footer ul:last-child {margin-right: 0;}
footer ul li {margin-bottom: 18px;}
footer ul li a {font-family: 'OpenSans-Bold', sans-serif; font-size: 14px; line-height: 1.36; color: #111111;}
footer ul li a:hover {font-size: 14px;}
footer .footerclaim {font-size: 24px;}

@media (max-width: 1600px) {
    .keyvisual .keytext { left: 25px; top: 250px;}
}

@media (max-width: 1350px) {
    .keyvisual .keytext { top: 300px; }
    .keyvisual .keytext p {font-size: 40px;}
    .frame-shove-it-up {margin-top: -220px;}
}
@media (max-width: 1100px) {
    .header .container {max-width: 1070px;}
    .header .mainlogo {height: 137px; width: 525px; top: 0px; display: flex;}
    .header .mainlogo::before {top: -74px;}
    .header .mainlogo a {margin: auto 60px auto 0;}
    .header .mainlogo a img {max-width: 100%;}
    .header .mainnav,
    .header .headernav {display: none;}
    .header .mobile-nav.isopen {display: block;}
    .header #mobile-nav-trigger {display: inline-block; position: absolute; right: 40px; top: 40px;z-index: 12;}
    .header #mobile-nav-trigger .trigger-icon {width: 35px; height: 35px; background: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Images/Hamburger.svg") no-repeat center; margin: 10px; float: right;}
    .header #mobile-nav-trigger.isOpen .trigger-icon {background: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Images/Schliessen.svg") no-repeat center;}

    .header .mobile-nav {background: #fff; width: 100%;z-index: 9;padding-top: 15px; position: absolute; z-index: 26;left: 0px; border-bottom: 2px solid #e2e2e2;}
    .header .mobile-nav ul ul {display: none;}
    .header .mobile-nav ul li {position: relative; }
    .header .mobile-nav nav ul li a {padding: 20px 0 20px 25px; display: block; font-size: 20px; text-transform: uppercase; color: #111111;}
    .header .mobile-nav ul li .toggle-subnavigation {position: absolute; right: 0; top: 0; display: block; height: 70px; width: 80px; padding: 25px 55px 25px 0px; background: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Images/plus.svg") no-repeat center center; cursor: pointer; color: #fff; background-origin: content-box; background-size: 100%;}
    .header .mobile-nav ul li .toggle-subnavigation.open {background: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Images/minus.svg") no-repeat center center; background-origin: content-box; background-size: 100%;}
    .header .mobile-nav ul ul ul {display: none;}
    .header .mobile-nav ul li ul li .toggle-subnavigation {position: absolute; right: 0; top: 0; display: block; height: 70px; width: 80px; padding: 25px 55px 25px 0px; background: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Images/plus.svg") no-repeat center center; cursor: pointer; background-origin: content-box; background-size: 100%; }
    .header .mobile-nav ul li ul li .toggle-subnavigation.open {background: url("/typo3conf/ext/dm_sitepackage/Resources/Public/Images/minus.svg") no-repeat center center; background-origin: content-box; background-size: 100%;}
    .header .mobile-nav ul li ul {padding: 10px 0 10px 25px; background-color: #e6e6e6;}
    .header .mobile-nav ul li ul li a {padding: 20px 0; display: block; }

    .header .mobile-nav #menue > ul {background-color: #00386d;}
    .header .mobile-nav #menue > ul li a {padding: 50px 0 50px 45px; display: block; font-size: 30px; color: #fff; }

    .regiosuche { padding: 30px 30px; }

    .frame-shove-it-up {margin-top: -200px;}
}

@media (max-width: 850px) {
    .red_block .blockbutton {position: relative; transform: translateY(0%); margin-top: 25px; right: auto;}
    .header .mainlogo {width: auto;}
    .keyvisual .keytext p {font-size: 30px;}
}

@media (max-width: 768px) {
    .gridelement .col-md-4 {margin-bottom: 35px;}
    .circle {margin: 0 auto;}
    .pre-title {font-size: 45px;}
    .keyimage {display: none;}
    .home .keyimage, .keyimage.keep {display: block;}
    .responsive-keyimage {display: block; height: 250px;}
    .gridelement.frame-red-circles .row .col-lg-4 {margin-bottom: 20px;}
    .frame-shove-it-up {margin-top: -150px;}
}

@media (max-width: 480px) {
    .header .mainlogo a img {display: block;}
    .mainlogo a .logotext {margin-left: 0;}
    footer .footerclaim {margin-bottom: 20px;}
}
@media (max-width: 460px) {
    .home .frame-shove-it-up {margin-top: 0px;}
    .keyvisual.home .container {margin-bottom: 20px;}
}
