/* css zu home */ /* 3StreifenRundTextBildCSS */ .Streifen3RundTextBildStreifen{width:21.401%;left:0;} .Streifen3RundTextBildStreifen > div{height:52px;border-radius:0 26px 26px 0;} .Streifen3RundTextBildText{width:79.118%;margin-left:21.401%;} .Streifen3RundTextBildBildContainer{max-width:41.67%;padding-top:64px;} .Streifen3RundTextBildBild{max-width:100%;} @media screen and (max-width:1024px){ .Streifen3RundTextBildTextStreifenContainer{padding-top:24px;} .Streifen3RundTextBildText{width:78.125%;margin-left:9.77%;} .Streifen3RundTextBildStreifen{width:9.77%;} .Streifen3RundTextBildBildContainer{padding-top:34px;} } @media screen and (max-width:768px){ .Streifen3RundTextBildText{margin-left:0;padding-left:18px !important;} .Streifen3RundTextBildlangtext{position:relative;} .Streifen3RundTextBildStreifen{ top:-190px; width:54px; left:-18px; } .Streifen3RundTextBildTextStreifenContainer{padding-top:115px !important;} .Streifen3RundTextBildText > h1,.Streifen3RundTextBildText > span{padding-left:54px;} .Streifen3RundTextBildText{width:86.4%;} .Streifen3RundTextBildBildContainer{ max-width:none; text-align:center; padding-top:0; } } /* --- --- */ /* AllgemeineModuleCSS */ /* primarycolor:#344756 secondarycolor:#527fa2 extracolor:#e6e7e8 signalcolor:#d7df23 textcolor:#474747 clearcolor:#ffffff space5:10px space9:17px space18:34px space27:51px space36:68px space54:102px */ *{box-sizing:border-box;} body{ margin:0; color:#474747; background-color:#f8f8f8; font-family:Montserrat Regular, sans-serif; line-height:31px; font-size:17px; hyphens:auto; -moz-hyphens:auto; word-break: break-word; } h1{font-family:Montserrat SemiBold, sans-serif;font-size:45px;} hr{ height:2px; background-color:#474747; border:none; } #main{ max-width:1440px; margin:0 auto; background-color:#ffffff; overflow:hidden; } .preHeaderText{ font-family:Montserrat Medium, sans-serif; font-size:20px; letter-spacing:-1px; display:inline-block; margin-bottom:8px; } /*=================== GRUNDFARBEN ===================*/ .primarycolor{color:#344756;} .primarybackcolor{background-color:#344756;} .secondarycolor{color:#527fa2;} .secondarybackcolor{background-color:#527fa2;} .extracolor{color:#e6e7e8;} .extrabackcolor{background-color:#e6e7e8;} .signalcolor{color:#d7df23;} .signalbackcolor{background-color:#d7df23;} .clearcolor{color:#ffffff;} .clearbackcolor{background-color:#ffffff;} .leftlinePrimarycolor{border-left:2px solid #344756;} .rightlinePrimarycolor{border-right:2px solid #344756;} .toplinePrimarycolor{border-top:2px solid #344756;} .bottomlinePrimarycolor{border-bottom:2px solid #344756;} .verticallinePrimarycolor{border-left:2px solid #344756;border-right:2px solid #344756;} .horizontallinePrimarycolor{border-bottom:2px solid #344756;border-top:2px solid #344756;} .leftlineSecondarycolor{border-left:2px solid #527fa2;} .rightlineSecondarycolor{border-right:2px solid #527fa2;} .toplineSecondarycolor{border-top:2px solid #527fa2;} .bottomlineSecondarycolor{border-bottom:2px solid #527fa2;} .verticallineSecondarycolor{border-left:2px solid #527fa2;border-right:2px solid #527fa2;} .horizontallineSecondarycolor{border-bottom:2px solid #527fa2;border-top:2px solid #527fa2;} .leftlineExtracolor{border-left:2px solid #e6e7e8;} .rightlineExtracolor{border-right:2px solid #e6e7e8;} .toplineExtracolor{border-top:2px solid #e6e7e8;} .bottomlineExtracolor{border-bottom:2px solid #e6e7e8;} .verticallineExtracolor{border-left:2px solid #e6e7e8;border-right:2px solid #e6e7e8;} .horizontallineExtracolor{border-bottom:2px solid #e6e7e8;border-top:2px solid #e6e7e8;} /*===================== GRUNDABSTAENDE =====================*/ .lm0, .lm0-0-9 { margin-left: 0px;} .rm0, .rm0-0-9 { margin-right: 0px;} .tm0, .tm0-0-9 { margin-top: 0px;} .bm0, .bm0-0-9 { margin-bottom: 0px;} .hm0, .hm0-0-9 { margin-left: 0px; margin-right: 0px;} .vm0, .vm0-0-9 { margin-top: 0px; margin-bottom: 0px;} .lp0, .lp0-0-9 { padding-left: 0px;} .rp0, .rp0-0-9 { padding-right: 0px;} .tp0, .tp0-0-9 { padding-top: 0px;} .bp0, .bp0-0-9 { padding-bottom: 0px;} .hp0, .hp0-0-9 { padding-left: 0px; padding-right: 0px;} .vp0, .vp0-0-9 { padding-top: 0px; padding-bottom: 0px;} .lm5 { margin-left: 10px;} .rm5 { margin-right: 10px;} .tm5 { margin-top: 10px;} .bm5 { margin-bottom: 10px;} .hm5 { margin-left: 10px; margin-right: 10px;} .vm5 { margin-top: 10px; margin-bottom: 10px;} .lp5 { padding-left: 10px;} .rp5 { padding-right: 10px;} .tp5 { padding-top: 10px;} .bp5 { padding-bottom: 10px;} .hp5 { padding-left: 10px; padding-right: 10px;} .vp5 { padding-top: 10px; padding-bottom: 10px;} .lm9 { margin-left: 17px;} .rm9 { margin-right: 17px;} .tm9 { margin-top: 17px;} .bm9 { margin-bottom: 17px;} .hm9 { margin-left: 17px; margin-right: 17px;} .vm9 { margin-top: 17px; margin-bottom: 17px;} .lp9 { padding-left: 17px;} .rp9 { padding-right: 17px;} .tp9 { padding-top: 17px;} .bp9 { padding-bottom: 17px;} .hp9 { padding-left: 17px; padding-right: 17px;} .vp9 { padding-top: 17px; padding-bottom: 17px;} .lm18 { margin-left: 34px;} .rm18 { margin-right: 34px;} .tm18 { margin-top: 34px;} .bm18 { margin-bottom: 34px;} .hm18 { margin-left: 34px; margin-right: 34px;} .vm18 { margin-top: 34px; margin-bottom: 34px;} .lp18 { padding-left: 34px;} .rp18 { padding-right: 34px;} .tp18 { padding-top: 34px;} .bp18 { padding-bottom: 34px;} .hp18 { padding-left: 34px; padding-right: 34px;} .vp18 { padding-top: 34px; padding-bottom: 34px;} .lm27 { margin-left: 51px;} .rm27 { margin-right: 51px;} .tm27 { margin-top: 51px;} .bm27 { margin-bottom: 51px;} .hm27 { margin-left: 51px; margin-right: 51px;} .vm27 { margin-top: 51px; margin-bottom: 51px;} .lp27 { padding-left: 51px;} .rp27 { padding-right: 51px;} .tp27 { padding-top: 51px;} .bp27 { padding-bottom: 51px;} .hp27 { padding-left: 51px; padding-right: 51px;} .vp27 { padding-top: 51px; padding-bottom: 51px;} .lm36, .lm36-27-9 { margin-left: 68px;} .rm36, .rm36-27-9 { margin-right: 68px;} .tm36, .tm36-27-9 { margin-top: 68px;} .bm36, .bm36-27-9 { margin-bottom: 68px;} .hm36, .hm36-27-9 { margin-left: 68px; margin-right: 68px;} .vm36, .vm36-27-9 { margin-top: 68px; margin-bottom: 68px;} .lp36, .lp36-27-9 { padding-left: 68px;} .rp36, .rp36-27-9 { padding-right: 68px;} .tp36, .tp36-27-9 { padding-top: 68px;} .bp36, .bp36-27-9 { padding-bottom: 68px;} .hp36, .hp36-27-9 { padding-left: 68px; padding-right: 68px;} .vp36, .vp36-27-9 { padding-top: 68px; padding-bottom: 68px;} .lm54 { margin-left: 102px;} .rm54 { margin-right: 102px;} .tm54 { margin-top: 102px;} .bm54 { margin-bottom: 102px;} .hm54 { margin-left: 102px; margin-right: 102px;} .vm54 { margin-top: 102px; margin-bottom: 102px;} .lp54 { padding-left: 102px;} .rp54 { padding-right: 102px;} .tp54 { padding-top: 102px;} .bp54 { padding-bottom: 102px;} .hp54 { padding-left: 102px; padding-right: 102px;} .vp54 { padding-top: 102px; padding-bottom: 102px;} /*========================= GRUNDEIGENSCHAFTEN =========================*/ .vt{vertical-align:top;} .vm{vertical-align:middle;} .vb{vertical-align:bottom;} .hc{text-align:center;} .hl{text-align:left;} .hr{text-align:right;} .dib{display:inline-block;} .block{display:block;} .none{display:none;} .inline{display:inline;} .absolute{position:absolute;} .relative{position:relative;} .floatleft{float:left;} .floatright{float:right;} .floatnone{float:none;} .oScroll{overflow:scroll;} .oHide{overflow:hidden;} .oVisible{overflow:visible;} /*====================== BREITEN ======================*/ .wide4{width:100%;} .wide3,.col34{width:75%;} .wide2,.col12, .col12-1-1,.col24{width:50%;} .wide1,.col14{width:25%;} .col13, .col13-2-1{width:33.333%;} .col23{width:66.666%;} .col15{width:20%;} .col25{width:39.5%;} .col35{width:59.5%;} .col45{width:79.5%;} .wide1,.wide2,.wide3,.wide4, .col12,.col12-1-1,.col24, .col14,.col13,.col23,.col13-2-1, .col15,.col25,.col35,.col34,.col45 {display:inline-block;} @media screen and (max-width:1440px){ .full1440{width:100% !important;} .hide1440{display:none !important;} } @media screen and (max-width:1024px){ .col12-1-1{width:100%;} .col15 {width:25%;} .col45{width:75%;} .col25, .col35, .col14-2-1{width:50%;} .lm36-27-9{margin-left:51px;} .rm36-27-9{margin-right:51px;} .tm36-27-9{margin-top:51px;} .bm36-27-9{margin-bottom:51px;} .hm36-27-9{margin-left:51px;margin-right:51px;} .vm36-27-9{margin-top:51px;margin-bottom:51px;} .lp36-27-9{padding-left:51px;} .rp36-27-9{padding-right:51px;} .tp36-27-9{padding-top:51px;} .bp36-27-9{padding-bottom:51px;} .hp36-27-9{padding-left:51px;padding-right:51px;} .vp36-27-9{padding-top:51px;padding-bottom:51px;} .hide1024{display:none !important;} .full1024{width:100% !important;} } @media screen and (max-width: 768px){ .wide2,.wide3, .col24,.col23,.col34, .col12,.col13-2-1,.col14-2-1{width:100%;} .wide1, .col14,.col13{width:50%;} .hide768{display:none !important;} .full768{width:100% !important;} } @media screen and (max-width:600px){ .wide1,.col14,.col13, .col15,.col25,.col35,.col45{width:100%;} .lm36-27-9, .lm0-0-9{margin-left:17px;} .rm36-27-9, .rm0-0-9{margin-right:17px;} .tm36-27-9, .tm0-0-9{margin-top:17px;} .bm36-27-9, .bm0-0-9{margin-bottom:17px;} .hm36-27-9, .hm0-0-9{margin-left:17px;margin-right:17px;} .vm36-27-9, .vm0-0-9{margin-top:17px;margin-bottom:17px;} .lp36-27-9, .lp0-0-9{padding-left:17px;} .rp36-27-9, .rp0-0-9{padding-right:17px;} .tp36-27-9, .tp0-0-9{padding-top:17px;} .bp36-27-9, .bp0-0-9{padding-bottom:17px;} .hp36-27-9, .hp0-0-9{padding-left:17px;padding-right:17px;} .vp36-27-9, .vp0-0-9{padding-top:17px;padding-bottom:17px;} .hide600{display:none !important;} .full600{width:100% !important;} } /*======================= STREIFEN =========================*/ .primarycolorStripeleft47::before,.primarycolorStriperight47::after, .secondarycolorStripeleft47::before,.secondarycolorStriperight47::after, .extracolorStripeleft47::before,.extracolorStriperight47::after, .primarycolorStripeleft110::before,.primarycolorStriperight110::after, .secondarycolorStripeleft110::before,.secondarycolorStriperight110::after, .extracolorStripeleft110::before,.extracolorStriperight110::after, .primarycolorStripeleft152::before,.primarycolorStriperight152::after, .secondarycolorStripeleft152::before,.secondarycolorStriperight152::after, .extracolorStripeleft152::before,.extracolorStriperight152::after {content:'';position:absolute;top:0;height:100%;} .primarycolorStripeleft47,.primarycolorStriperight47, .primarycolorStripeleft110,.primarycolorStriperight110, .primarycolorStripeleft152,.primarycolorStriperight152{background-color:#344756;} .secondarycolorStripeleft47,.secondarycolorStriperight47, .secondarycolorStripeleft110,.secondarycolorStriperight110, .secondarycolorStripeleft152,.secondarycolorStriperight152{background-color:#527fa2;} .extracolorStripeleft47,.extracolorStriperight47, .extracolorStripeleft110,.extracolorStriperight110, .extracolorStripeleft152,.extracolorStriperight152{background-color:#e6e7e8;} /*=========== LEFT ============*/ .primarycolorStripeleft47::before,.primarycolorStripeleft110::before, .primarycolorStripeleft152::before {background-image:linear-gradient(to top left,#344756 50%, transparent 51%);} .secondarycolorStripeleft47::before,.secondarycolorStripeleft110::before, .secondarycolorStripeleft152::before {background-image:linear-gradient(to top left,#527fa2 50%, transparent 51%);} .extracolorStripeleft47::before,.extracolorStripeleft110::before, .extracolorStripeleft152::before {background-image:linear-gradient(to top left,#e6e7e8 50%, transparent 51%);} /*=========== RIGHT ============*/ .primarycolorStriperight47::after,.primarycolorStriperight110::after, .primarycolorStriperight152::after {background-image:linear-gradient(to top right,#344756 50%, transparent 51%);} .secondarycolorStriperight47::after,.secondarycolorStriperight110::after, .secondarycolorStriperight152::after {background-image:linear-gradient(to top right,#527fa2 50%, transparent 51%);} .extracolorStriperight47::after,.extracolorStriperight110::after, .extracolorStriperight152::after {background-image:linear-gradient(to top right,#e6e7e8 50%, transparent 51%);} /*=============== 47 HOCH ================*/ .primarycolorStriperight47::after,.secondarycolorStriperight47::after, .extracolorStriperight47::after,.primarycolorStripeleft47::before, .secondarycolorStripeleft47::before,.extracolorStripeleft47::before{width:19px;} .primarycolorStripeleft47,.primarycolorStriperight47, .secondarycolorStripeleft47,.secondarycolorStriperight47, .extracolorStripeleft47,.extracolorStriperight47{height:47px} .primarycolorStripeleft47::before,.secondarycolorStripeleft47::before, .extracolorStripeleft47::before{left:-19px;} .primarycolorStriperight47::after,.secondarycolorStriperight47::after, .extracolorStriperight47::after{right:-19px;} /*=============== 110 HOCH ================*/ .primarycolorStriperight110::after,.secondarycolorStriperight110::after, .extracolorStriperight110::after,.primarycolorStripeleft110::before, .secondarycolorStripeleft110::before,.extracolorStripeleft110::before{width:45px;} .primarycolorStripeleft110,.primarycolorStriperight110, .secondarycolorStripeleft110,.secondarycolorStriperight110, .extracolorStripeleft110,.extracolorStriperight110{height:110px} .primarycolorStripeleft110::before,.secondarycolorStripeleft110::before, .extracolorStripeleft110::before{left:-45px;} .primarycolorStriperight110::after,.secondarycolorStriperight110::after, .extracolorStriperight110::after{right:-45px;} /*=============== 152 HOCH ================*/ .primarycolorStriperight152::after,.secondarycolorStriperight152::after, .extracolorStriperight152::after,.primarycolorStripeleft152::before, .secondarycolorStripeleft152::before,.extracolorStripeleft152::before{width:65px;} .primarycolorStripeleft152,.primarycolorStriperight152, .secondarycolorStripeleft152,.secondarycolorStriperight152, .extracolorStripeleft152,.extracolorStriperight152{height:152px} .primarycolorStripeleft152::before,.secondarycolorStripeleft152::before, .extracolorStripeleft152::before{left:-65px;} .primarycolorStriperight152::after,.secondarycolorStriperight152::after, .extracolorStriperight152::after{right:-65px;} /*====================== BUTTONS ======================*/ .signalcolorbutton,.primarycolorbutton,.secondarycolorbutton{ padding:11px 37px; color:#ffffff; display:inline-block; text-align:center; transition:all 300ms ease-in-out; -ms-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; -webkit-transition:all 300ms eas-in-out; border:1px solid transparent; text-decoration:none; font-family:inherit; font-size:inherit; } .signalcolorbutton{background-color:#d7df23;} .signalcolorbutton:hover{border-color:#d7df23;color:#d7df23;} .primarycolorbutton{background-color:#344756;} .primarycolorbutton:hover{border-color:#344756;color:#344756;} .secondarycolorbutton{background-color:#527fa2;} .secondarycolorbutton:hover{border-color:#527fa2;color:#527fa2;} .signalcolorbutton:hover,.primarycolorbutton:hover,.secondarycolorbutton:hover{background-color:#ffffff;} /* --- --- */ /* Banner_unter_Menue */ #bannerUnterMenue { height: 446px; margin-top: 91px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } #bannerUnterMenueStripes { height: 50px; width: 53.5%; background-color: #fff; position: absolute; right: 0px; bottom: 0px; } #bannerUnterMenue > #bannerUnterMenueText, #bannerUnterMenue > #bannerUnterMenueTextCoverStripe { padding-top: 35px; padding-bottom: 35px; padding-right: 42px; position: absolute; bottom: 0; left: 0; background-color: rgba(52, 71, 86, 0.81); } #bannerUnterMenue > #bannerUnterMenueTextCoverStripe { background-color: rgba(82, 128, 166, 0.81); } #bannerUnterMenueText h1, #bannerUnterMenueTextCoverStripe h1 { font-size: 54px; margin-top: 0; margin-bottom: 0; } #bannerUnterMenue > #bannerUnterMenueText > .bannerUnterMenueTextSmall, #bannerUnterMenue > #bannerUnterMenueTextCoverStripe > .bannerUnterMenueTextSmall { font-size: 29px; letter-spacing: -1px; } #bannerUnterMenueText h1, #bannerUnterMenueTextCoverStripe h1, #bannerUnterMenue > #bannerUnterMenueText > .bannerUnterMenueTextSmall, #bannerUnterMenue > #bannerUnterMenueTextCoverStripe > .bannerUnterMenueTextSmall { color: white; font-family: Montserrat Medium, sans-serif; } #bannerUnterMenueStripes::before { content: ''; display: inline-block; border-left: 30px solid transparent; border-bottom: 50px solid #fff; position: absolute; left: -30px; top: 0; } #bannerUnterMenue > #bannerUnterMenueText::after, #bannerUnterMenue > #bannerUnterMenueTextCoverStripe::after { content: ''; display: inline-block; border-right: 70px solid transparent; border-bottom: 160px solid rgba(52, 71, 86, 0.81); position: absolute; right: -70px; top: 0px; } #bannerUnterMenue > #bannerUnterMenueTextCoverStripe::after { border-bottom-color: rgba(82, 128, 166, 0.81); } @media screen and (max-width: 1112px) { #bannerUnterMenueTextCoverStripe h1 { font-size: 40px; } } @media screen and (max-width: 1024px) { #bannerUnterMenue { height: 328px; } } @media screen and (max-width: 600px) { #bannerUnterMenue { margin-top: 55px; } #bannerUnterMenueText h1 { font-size: 24px; } #bannerUnterMenue > #bannerUnterMenueText > .bannerUnterMenueTextSmall, #bannerUnterMenue > #bannerUnterMenueTextCoverStripe > .bannerUnterMenueTextSmall { font-size: 14px; line-height: 100%; } #bannerUnterMenue > #bannerUnterMenueText, #bannerUnterMenue > #bannerUnterMenueTextCoverStripe { padding-top: 10px; padding-bottom: 17px; } } /* --- --- */ /* bewertungenCSS */ #ratingBox { display: flex; transition: margin .3s ease-in-out; -o-transition: margin .3s ease-in-out; -ms-transition: margin .3s ease-in-out; -moz-transition: margin .3s ease-in-out; -webkit-transition: margin .3s ease-in-out; } .rating { width: 33.333%; padding-left: 30px; padding-right: 30px; align-self: center; transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } #ratingWrapper { overflow: hidden; margin-bottom: 50px; position: relative; } label.lbl_rating { display: none; position: absolute; top: calc(50% - 60px); z-index: 1; } label.lbl_rating_left { left: 5%; } label.lbl_rating_right { right: 5.2%; } input[name="rad_rating"] { display: none; } #ratingContainer { width: calc(85% - 25px); overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: bottom right; position: relative; } #ratingStripes { width: 15%; margin-right: 25px; background-size: auto; background-repeat: no-repeat; background-position: bottom right; } .ratingBody { display: block; padding: 20px; position: relative; } #ratingStripes .Streifen3RundTextBildStreifen { width: 68%; bottom: -9px; } .ratingBody:hover { cursor: default; } #ratingContainer > .preHeaderText, #ratingContainer > .preHeaderText + h1 { padding-left: 39px; } #ratingWrapper, #ratingContainer > .preHeaderText, #ratingContainer > .preHeaderText + h1 { width: 94%; float: right; } .ratingBody > hr:last-of-type { width: calc(100% - 40px); position: absolute; bottom: 20px; left: 20px; z-index: 1; } label.lbl_rating::before { content: ''; display: block; width: 15px; height: 15px; border-top: 3px solid #527fa2; border-left: 3px solid #527fa2; position: relative; } label.lbl_rating_left::before { left: 6px; transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } label.lbl_rating_right::before { right: 6px; transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); } input#rad_rating_first:checked ~ #ratingWrapper > #ratingBox { transition: none; -o-transition: none; -ms-transition: none; -moz-transition: none; -webkit-transition: none; animation: RatingFirst .3s ease-in-out; -o-animation: RatingFirst .3s ease-in-out; -ms-animation: RatingFirst .3s ease-in-out; -moz-animation: RatingFirst .3s ease-in-out; -webkit-animation: RatingFirst .3s ease-in-out; } input#rad_rating_last:checked ~ #ratingWrapper > #ratingBox { margin-left: -33.333%; transition: none; -o-transition: none; -ms-transition: none; -moz-transition: none; -webkit-transition: none; animation: RatingLast .3s ease-in-out; -o-animation: RatingLast .3s ease-in-out; -ms-animation: RatingLast .3s ease-in-out; -moz-animation: RatingLast .3s ease-in-out; -webkit-animation: RatingLast .3s ease-in-out; } input#rad_rating_last:checked ~ label#lbl_rating_left_1, input#rad_rating_last:checked ~ label#lbl_rating_right_1 { display: block; } @keyframes RatingFirst { from { margin-left: -33.333%; } to { margin-left: 0px; } } @keyframes RatingFirst_850 { from { margin-left: calc(-66.666% - 50%); } to { margin-left: -50%; } } @keyframes RatingFirst_600 { from { margin-left: calc(-100% * 2); } to { margin-left: -100%; } } @media screen and (min-width: 1261px) { input#rad_rating_1:checked ~ #ratingWrapper > #ratingBox > .rating:nth-of-type(5) { padding-left: 32px; } input[name="rad_rating"]:last-of-type:checked ~ #ratingWrapper > #ratingBox > .rating:nth-last-of-type(5) { padding-right: 32px; } } @media screen and (max-width: 1260px) and (min-width: 851px) { input#rad_rating_1:checked ~ #ratingWrapper > #ratingBox > .rating:nth-of-type(5) { padding-left: 21px; } input[name="rad_rating"]:last-of-type:checked ~ #ratingWrapper > #ratingBox > .rating:nth-last-of-type(5) { padding-right: 21px; } } @media screen and (max-width: 1260px) and (min-width: 601px) { #ratingStripes { width: 10%; } #ratingContainer { width: 90%; } .rating { padding-right: 20px; padding-left: 20px; } #ratingStripes .Streifen3RundTextBildStreifen { width: 100%; } #ratingContainer > .preHeaderText, #ratingContainer > .preHeaderText + h1 { padding-left: 26px; } } @media screen and (max-width: 1024px) { #ratingStripes { display: none; } #ratingContainer { width: 100%; } label.lbl_rating_left { left: 6%; } label.lbl_rating_right { right: 3.5%; } #ratingWrapper, #ratingContainer > .preHeaderText, #ratingContainer > .preHeaderText + h1 { width: 92%; } } @media screen and (max-width: 850px) and (min-width: 601px) { .rating { width: 66.666%; } label.lbl_rating_left { left: 4%; } label.lbl_rating_right { right: 2.7%; } label.lbl_rating { top: calc(50% - 30px); } input#rad_rating_last:checked ~ #ratingWrapper > #ratingBox { margin-left: calc(-66.666% - 50%); } input#rad_rating_first:checked ~ #ratingWrapper > #ratingBox { animation: RatingFirst_850 .3s ease-in-out; -o-animation: RatingFirst_850 .3s ease-in-out; -ms-animation: RatingFirst_850 .3s ease-in-out; -moz-animation: RatingFirst_850 .3s ease-in-out; -webkit-animation: RatingFirst_850 .3s ease-in-out; } input#rad_rating_last:checked ~ #ratingWrapper > #ratingBox { animation: RatingLast_850 .3s ease-in-out; -o-animation: RatingLast_850 .3s ease-in-out; -ms-animation: RatingLast_850 .3s ease-in-out; -moz-animation: RatingLast_850 .3s ease-in-out; -webkit-animation: RatingLast_850 .3s ease-in-out; } } @media screen and (min-width: 601px) { .rating { font-size: 70%; line-height: 22px; } } @media screen and (max-width: 600px) { .rating { width: 100%; line-height: 28px; } #ratingWrapper { margin-bottom: 70px; } label.lbl_rating_left { left: 7.2%; } label.lbl_rating_right { right: 3.1%; } input#rad_rating_last:checked ~ #ratingWrapper > #ratingBox { margin-left: calc(-100% * 2); } input#rad_rating_first:checked ~ #ratingWrapper > #ratingBox { animation: RatingFirst_600 .3s ease-in-out; -o-animation: RatingFirst_600 .3s ease-in-out; -ms-animation: RatingFirst_600 .3s ease-in-out; -moz-animation: RatingFirst_600 .3s ease-in-out; -webkit-animation: RatingFirst_600 .3s ease-in-out; } input#rad_rating_last:checked ~ #ratingWrapper > #ratingBox { animation: RatingLast_600 .3s ease-in-out; -o-animation: RatingLast_600 .3s ease-in-out; -ms-animation: RatingLast_600 .3s ease-in-out; -moz-animation: RatingLast_600 .3s ease-in-out; -webkit-animation: RatingLast_600 .3s ease-in-out; } } /* --- --- */ /* bigPageStripeCSS */ .bigStripe { width: calc(100% - 78px - 68px); height: 186px; bottom: 0px; } .bigStripeRight { right: 0px; } .bigStripeLeft { left: 0px; } .bigStripeBox { padding: 25px; margin-bottom: 50px; position: relative; z-index: 100; } .bigStripeRight::before, .bigStripeLeft::before { content: ''; display: inline-block; border-bottom: 186px solid #344756; position: absolute; } .bigStripeRight::before { border-left: 78px solid transparent; left: -78px; } .bigStripeLeft::before { border-right: 78px solid transparent; right: -78px; } @media screen and (max-width: 600px) { .bigStripe { height: 110px; } .bigStripeBox { margin-bottom: 110px; } } /* --- --- */ /* elements.popupinfo */ x{} /* ausblenden wenn checkbox über graue fläche abgewählt wird */ label#lbl_JubaPopupMessageBoxGreyOverall, aside#JubaPopupMessage, label#lbl_JubaPopupMessageIcon {display: none;} /* einblenden der Info */ input[type="checkbox"]#rad_JubaPopupMessage:checked ~ aside#JubaPopupMessage { display:block; border: 1px solid #005541; background-color: #fff; position: fixed; z-index: 300; left: calc(50% - 140px); top: 2rem; width: 280px; padding: 1rem; } input[type="checkbox"]#rad_JubaPopupMessage:checked ~ label#lbl_JubaPopupMessageBoxGreyOverall { position:fixed; left: 0px; top: 0px; width: 100%; height: 100%; display:block; background-color: rgba(200,200,200,0.7); z-index: 299 } input[type="checkbox"]#rad_JubaPopupMessage:checked ~ aside label#lbl_JubaPopupMessageIcon { display: block; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAEvElEQVRIiZ2WS4hbVRjHs6uPUhC61EWtpVIsCoqgFitFEUWpWBFB1IXoQsFNRRHBB11IFRdVXLifUmfSNplMHpPkZl6ZTN7vTN43j5tMZvKYdJKZzLRJys/FTHPndjKteODHuff78/2/e757uOeqVPuMjY0NlpaWKBQKVKtVms0mGxsb3Lx5k83NTdbX12m323Q6Hba2ttjPZ+jo9XpIkoQoijQaDVqtNmtrLZrNG9Trq9RqdWq1Bo3GKs3mDdbWWqyvr7O5uUm3271/sV6vRy6Xo1wus7bWotFoUqvVqVZr96RWrdNsNmm32/R6vf0L9ft9crkclcoSjdVVlldWWF5e2Z7/A5XlFVZ22jp0Rb1ej2w2i1SSqNXqLC1VWKr8D5YqVCrLNBoNbt26BSAXkySJdDrDykqVUqksk8pQCkSUsTtkRKQrmuFauUy9Xuf27dvbRba2tkgkEkilEsWiRKFY3Eato3j0RYqnz8mxXRS//I7igSMU3/uMQjC8R5ekEu12e7tIuVwmmUxSLEqIYg4xl0f0+CkePLZtcuAI+R9+3Y7vkJswU3zoqKz/9pdS35krleXtjRCLxUhnMmSyIplsdkDu/E8Dk+LBY2SN1m0tkaTw9KsDrXDqrCLvDulsFlEUabVaqKLRKMlUmsQukqk0iUSS/PNvymYnTpOMRMl+/bNc/NCTpKwzJFNpUumMwieZSpNIpsjnC6iCwSCJRJLFxfgeEpZpCo+cGJiK736qaGPm2wvEE0kFu/Nji3EyWRGVw7HAYjxBJBobSuLin/KT7yL3zGtEwxFisUUFe/KTKVRTU1OEI1GCofC+ZN76SFnk4WNExrSEwhHCkaiCu3PDkSgqQRDw+QNDCQRD+PwBglfHKT7wuLyKJ17C5w/gDwTxB4IEgqHBPMxDZbfP43S5cbm9Crw+P16fH5fbS/qVc3vaFfn+F9weH26PD6/Ph8vtxe3xKX08XgLBICqny8WcfZ4Fp0uB0+XB6fIQuvC7bL5rNYVDx/GOaXC63Dhdnp0ct8LDseAiEAih8ng8WAWBeccC9nnHAMeCE6fZSv7wyYFx/P3PyZw8I++uk2dwzM7hWHBin3fs8ZizzxMKhVHl83ksFgu2qWlm5+aZmbUzM2tnzj5P/I0P5e372HPYLQKOy2MUDh2X2/bJV8zZ5bzdTM/MUqlUUHU6HRwLDvQGA1PTMwNcFy8p3oHr4qWB5jv/o6w9eBTnH38rcqemZ7AKNrxer3xqiqKI0WhiQm9EsE1jtQhkjr4wMIq9/gFWYUpB/NRZeTVvf6zQzBYBQbBRLpflT3232yUSiaDT6dBN6LFYbdiuqFl8+R1yh59CuKbFbLEqENTXyT76LN4vvlHETZMWTJNm4vHE3lOy1+sRCoW4rtFwXTuOyWzBZLZgvTyKcdI8FJPeIF9PmtEbTRiMJqKxGP1+f/gx3O12CYfDaLVaRsfUjOv0GIyTCvSGvfcTeiPa8QlMJjPxePz+PxT9fp9qtYrVamV0dJQr/4xy9ZoGjVaHbsKwY2xiXKdHo9Wh0eqY0BuYm7NTKpXu/SNx92g2mwSDQWw2GxqtFrX6KmNqNSMjI4yMXEaj1SIIAj6fj5Ik0el09jX/F5Hf+SiQLF0OAAAAAElFTkSuQmCC); width: 25px; height: 25px; position:relative; bottom: 0px; left: 0px; margin-right:12px; margin-top: 12px; } #JubaPopupMessage, #JubaPopupMessage .listpopupmessages {color: black !important;} /* --- --- */ /* InndataMenueCSS */ /*voninndata*/ #jubaconMenu { display: flex; } #headerTop { width: 1440px; max-width: 100%; background-color: #fff; position: fixed; top: 0px; z-index: 150; } #mainMenu { display: inline-block; width: calc(100% - 216px); padding-left: 68px; position: relative; z-index: 2; vertical-align: top; } #mainMenuIcons { width: 216px; float: right; background-color: #344756; position: relative; } #headerIconTel { background-image: url('/bilder/dropdown_telefon.svg'); } #headerIconMail { background-image: url('/bilder/dropdown_mail.svg'); } #headerIconAdress { background-image: url('/bilder/dropdown_standort.svg'); } #mainMenuIcons input[type=checkbox] { display: none; } #jubaconMenu a { border: none; } #jubaconMenu > #jubaconMenuLogo { display: inline-block; height: 64px; width: 17%; margin-top: 14px; margin-right: -4.5px; background-image: url("/bilder/logo.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; position: relative; z-index: 3; } #jubaconMenu > ul#menu_eb_1 { display: inline-block; width: 83%; margin: 0px; padding: 0px; vertical-align: top; } #jubaconMenu > ul#menu_eb_1 > li { display: inline-block; width: 20%; text-align: center; margin-right: -4.5px; } #jubaconMenu > ul#menu_eb_1 > li > a { display: inline-block; height: 91px; padding: 30px 0px; position: relative; z-index: 3; } #jubaconMenu > ul#menu_eb_1 > li { vertical-align: top; position: relative; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 { width: 100%; text-align: left; margin: 0; padding: 0px; background-color: #527fa2; list-style: none; opacity: 0; pointer-events: none; position: absolute; left: 20px; transition: opacity .3s; -o-transition: opacity .3s; -ms-transition: opacity .3s; -moz-transition: opacity .3s; -webkit-transition: opacity .3s; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 > li { padding: 5px 20px; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 > li > a { display: block; color: #fff; font-family: Montserrat Regular, sans-serif; } #mainMenuIcons > ul { display: inline-block; margin: 0px; padding: 0px; } #mainMenuIcons > ul > li { display: inline-block; vertical-align: top; } #mainMenuIcons > ul > li > .headerIconsPic { display: inline-block; height: 91px; padding: 0px 11px; vertical-align: top; } #mainMenuIcons > ul > li > a { border-bottom: none; } .headerIconsPic > div { display: inline-block; width: 30px; height: 30px; margin-top: 31px; background-size: contain; background-repeat: no-repeat; } #headerIconsContact > .headerIconsPic > div { background-image: url('/bilder/menu_icon_kontakt.svg'); } #headerIconsLogin > .headerIconsPic > div { background-image: url('/bilder/menu_icon_login.svg'); } #mainMenuIcons > ul > li > ul { display: block; width: 300px; opacity: 0; margin: 0px; padding: 30px 10px 10px 10px;; background-color: #fff; box-shadow: 0px 3px 3px 0px rgba(59, 48, 48, 0.24); pointer-events: none; position: absolute; right: 0; z-index: 100; transition: opacity .3s; -o-transition: opacity .3s; -ms-transition: opacity .3s; -moz-transition: opacity .3s; -webkit-transition: opacity .3s; } #headerIconsContact > ul > li { display: inline-block; margin-bottom: 5px; } #headerTop > section.bigIncludeTo { display: block; } #jubaconMenu a, #mainMenu label, #mainMenu .MenuTooltipText, #mainMenu input[type=radio] { display: none; } #jubaconMenu > ul#menu_eb_1 > li:hover ul#menu_eb_2 { opacity: 1; pointer-events: auto; } #headerIconsContact:hover > .headerIconsPic > div { background-image: url('/bilder/menu_icon_kontakt_hover.svg'); } #headerIconsLogin:hover > .headerIconsPic > div { background-image: url('/bilder/menu_icon_login_hover.svg'); } #mainMenuIcons > ul > li:hover > ul { opacity: 1; pointer-events: auto; } #jubaconMenu > ul#menu_eb_1 > li > a:hover::after { content: ''; display: block; margin: 0 auto; border: 1px solid; border-radius: 1px; } #mainMenuIcons::before { content: ''; width: 100px; height: 91px; background-color: #344756; position: absolute; left: -100px; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(3) > a, #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(4) > a, #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(5) > a { color: #fff; } #jubaconMenu > ul#menu_eb_1 > li:first-of-type { width: 18%; margin-left: 3%; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(3) { width: 23%; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(4) { width: 21%; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(5) { width: 15%; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(3), #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(4), #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(5) { background-color: #344756; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 > li:last-of-type { border-bottom: none; } #headerIconsContact > ul > .headerIconsContactList > div:first-of-type { display: inline-block; width: 32px; height: 32px; margin-right: 6px; background-size: contain; background-position: center; background-repeat: no-repeat; } #headerIconsContact > ul > li > div:nth-of-type(2) { display: inline-block; vertical-align: top; } @media screen and (min-width: 1025px) { #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 { min-width: 250px; } /*#jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 { display: flex; flex-wrap: wrap; min-width: 460px; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 > li { width: 50%; display: inline-block; }*/ #jubaconMenu > ul#menu_eb_1 > li:hover { background-color: #527fa2; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 > li:hover { background-color: #344756; } #jubaconMenu > ul#menu_eb_1 > li:first-of-type:hover > a, #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(2):hover > a { color: #344756; } #jubaconMenu > ul#menu_eb_1 > li::before, #jubaconMenu > ul#menu_eb_1 > li::after { content: ''; display: block; width: 40px; height: 100%; opacity: 0; position: absolute; top: 0px; z-index: 2; } #jubaconMenu > ul#menu_eb_1 > li::before { left: -20px; } #jubaconMenu > ul#menu_eb_1 > li::after { right: -20px; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(3)::before { opacity: 1; background-image: linear-gradient(to top right, #fff 49%, #344756 50%); z-index: 1; } #jubaconMenu > ul#menu_eb_1 > li:hover::before, #jubaconMenu > ul#menu_eb_1 > li:hover::after { opacity: 1; } #jubaconMenu > ul#menu_eb_1 > li:hover::before { background-image: linear-gradient(to top right, #344756 49%, #527fa2 50%); } #jubaconMenu > ul#menu_eb_1 > li:first-of-type:hover::before, #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(2):hover::before, #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(3):hover::before { background-image: linear-gradient(to top right, #fff 49%, #527fa2 50%); } #jubaconMenu > ul#menu_eb_1 > li:hover::after { background-image: linear-gradient(to top right, #527fa2 49%, #344756 50%); } #jubaconMenu > ul#menu_eb_1 > li:first-of-type:hover::after { background-image: linear-gradient(to top right, #527fa2 49%, #fff 50%); } #jubaconMenu > ul#menu_eb_1 > li:last-of-type > ul#menu_eb_2 { left: unset; right: -20px; } } @media screen and (max-width: 1024px) { #mainMenu { width: 30%; padding-left: 50px; position: static; } #mainMenuIcons { width: 65%; text-align: right; padding-left: 0; } ul#menu_eb_2 { overflow-y: auto; } #mainMenu label.toggleMenuButton { display: block; width: 38px; height: 29px; cursor: pointer; position: absolute; top: 31px; right: 45px; transition: right .6s; -o-transition: right .6s; -ms-transition: right .6s; -moz-transition: right .6s; -webkit-transition: right .6s; } #mainMenu label.toggleMenuButton#lbl_openMenu { z-index: 201; } #mainMenu label.lbl_hideSubMenu { display: block; width: 30px; height: 40px; position: absolute; top: 25px; left: 15px; } label#lbl_openMenu span { margin: 13px 0px; } #jubaconMenu > #jubaconMenuLogo { width: 85%; } #jubaconMenu > ul#menu_eb_1 { display: none; } #mainMenuIcons > ul { margin-right: 160px; text-align: left; } #mainMenuIcons > ul > li > label { cursor: pointer; } #jubaconMenu > label.toggleMenuButton#lbl_closeMenu { visibility: hidden; position: fixed; z-index: 300; opacity: 0; } #jubaconMenu > ul#menu_eb_1 { display: block; height: 100%; width: 300px; max-width: 100%; font-size: 20px; padding: 76px 20px; background-color: #527fa2; position: fixed; right: -300px; top: 0; z-index: 200; transition: right .6s; -o-transition: right .6s; -ms-transition: right .6s; -moz-transition: right .6s; -webkit-transition: right .6s; } #jubaconMenu > ul#menu_eb_1 > li { display: block; width: auto; padding: 10px; margin-right: 0px; text-align: left; border-bottom: 2px solid #344756; position: static; } #jubaconMenu > ul#menu_eb_1 > li > a { height: auto; padding: 0px; color: #fff; font-family: Montserrat Regular, sans-serif; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 { display: block; width: 300px; height: 100%; max-width: 100%; opacity: 1; padding: 5px 20px; padding-top: 76px; pointer-events: auto; position: absolute; top: 0; right: -300px; z-index: 250; transition: right .6s; -o-transition: right .6s; -ms-transition: right .6s; -moz-transition: right .6s; -webkit-transition: right .6s; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 > li { border-bottom: 2px solid #344756; padding: 10px; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 { left: auto; } #mainMenu #menu_eb_2 ~ label { display: block; height: 53px; width: 40px; margin-top: -42px; position: absolute; right: 20px; } #mainMenuIcons > ul > li:hover > ul { opacity: 0; pointer-events: none; } #jubaconMenu > ul#menu_eb_1 > li > a:hover { text-decoration: underline; } #jubaconMenu > ul#menu_eb_1 > li > ul#menu_eb_2 > li > a:hover { color: #fff; text-decoration: underline; } #mainMenuIcons::before { width: auto; height: auto; background-color: transparent; border-left: 42px solid transparent; border-top: 91px solid #344756; position: absolute; left: -42px; top: 0px; } #jubaconMenu > ul#menu_eb_1 > li > a:hover::after { display: none; } #mainMenu #menu_eb_2 ~ label::after { content: ""; display: block; width: 10px; height: 10px; margin-top: 20px; margin-left: 15px; border-top: 3px solid #344756; border-right: 3px solid #344756; transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } #mainMenu label.lbl_hideSubMenu::after { content: ""; display: block; width: 10px; height: 10px; margin-top: 15px; margin-left: 10px; border-top: 3px solid #344756; border-right: 3px solid #344756; transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); } label#lbl_openMenu span, label#lbl_openMenu::after, label#lbl_openMenu::before { display: block; width: 100%; height: 4px; background-color: #fff; border-radius: 2px; transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } label#lbl_openMenu::after, label#lbl_openMenu::before { content: ''; position: absolute; left: 0px; } label#lbl_openMenu::before { top: 0px; } label#lbl_openMenu::after { bottom: 0px; } #jubaconMenu > ul#menu_eb_1 > li:first-of-type { margin-left: 0px; width: auto; } #jubaconMenu > ul#menu_eb_1 > li:last-of-type { border-bottom: none; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(3), #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(4), #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(5) { width: auto; background-color: transparent; } #jubaconMenu > ul#menu_eb_1 > li:nth-of-type(3)::before { display: none; } #mainMenuIcons > ul > li > input[type=checkbox]:checked ~ ul { opacity: 1; pointer-events: auto; } #mainMenuIcons > ul > li#headerIconsContact > input[type=checkbox]:checked ~ label.headerIconsPic > div { background-image: url('/bilder/menu_icon_kontakt_hover.svg'); } #rad1_menuOpen:checked ~ #jubaconMenu > ul#menu_eb_1 { right: 0; box-shadow: -5px 10px 18px; } #rad1_menuOpen:checked ~ label.toggleMenuButton#lbl_openMenu { right: 20px; } #rad1_menuOpen:checked ~ #jubaconMenu > label.toggleMenuButton#lbl_closeMenu { visibility: visible; right: 20px; } #mainMenu #menu_eb_1 > li > input[type=radio]:checked ~ ul#menu_eb_2 { right: 0px; } input#rad1_menuOpen:checked ~ label#lbl_openMenu > span { opacity: 0; } input#rad1_menuOpen:checked ~ label#lbl_openMenu::after { bottom: 12px; transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } input#rad1_menuOpen:checked ~ label#lbl_openMenu::before { top: 13px; transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } } @media screen and (max-width: 600px) { #mainMenu { padding-left: 20px; } #mainMenu label.toggleMenuButton { width: 27px; height: 24px; top: 16px; right: 20px; } label#lbl_openMenu span { margin: 10px 0px; } #mainMenuIcons > ul > li > .headerIconsPic { height: 55px; } .headerIconsPic > div { height: 26px; width: 26px; margin-top: 15px; } #jubaconMenu > #jubaconMenuLogo { display: block; height: 55px; margin-top: 0px; } #jubaconMenu > ul#menu_eb_1 { font-size: 17px; line-height: 24px; } #mainMenuIcons > ul { margin-right: 100px; } #mainMenuIcons::before { border-top: 55px solid #344756; border-left: 25px solid transparent; left: -25px; } input#rad1_menuOpen:checked ~ label#lbl_openMenu::after { bottom: 10px; } input#rad1_menuOpen:checked ~ label#lbl_openMenu::before { top: 10px; } #mainMenu #menu_eb_2 ~ label { height: 44px; margin-top: -38px; } } /* ---------- Uhr ---------- */ #uhrblatt { display: block; width: 192px; height: 192px; margin-left: 40px; margin-top: 30px; position: relative; background: url('/bilder/ziffernblatt.svg'); background-size: contain !important; } #stundenzeiger { display: inline-block; width: 4px; height: 190px; background: url('/bilder/stundenzeiger.gif'); position: absolute; left: 96px; -webkit-animation: stunden 86400s linear infinite; -moz-animation: stunden 86400s linear infinite; animation: stunden 86400s linear infinite; background-size: contain; } #minutenzeiger { display: inline-block; width: 4px; height: 190px; position: absolute; left: 96px; background: url('/bilder/minutenzeiger.gif'); -webkit-animation: minuten 3600s linear infinite; -moz-animation: minuten 3600s linear infinite; animation: minuten 3600s linear infinite; background-size: contain; } #sekundenzeiger { display: inline-block; width: 4px; height: 190px; background: url('/bilder/sekundenzeiger.gif'); position: absolute; left: 96px; -webkit-animation: sekunden 60s linear infinite; -moz-animation: sekunden 60s linear infinite; animation: sekunden 60s linear infinite; background-size: contain; } /* --- --- */ /* linkedinBeitraegeCSS */ .linkedin_morebtn { cursor: pointer; user-select: none; } .linkedInNavPageselect a { border-bottom: none; margin-left: 5px; margin-right: 5px; } .linkedInNavPageselect a:first-of-type { margin-right: 7px; font-size: 22px; } .linkedInNavPageselect a:last-of-type { margin-left: 7px; font-size: 22px; } .linkedInNavPageselect b { border-bottom: none; margin-left: 5px; margin-right: 5px; font-size: 22px; } #linkedin-autoren_container { width: 20%; position: relative; padding: 15px 15px 15px 15px; hyphens: none; border: 1px solid #e0dfdc; border-radius: 25px; max-height: 550px; margin-left: 5%; float: left; margin-top: 65px; overflow: hidden; } #linkedin-a-otto-wrapper { width: 180px; height: 180px; border-radius: 90px; overflow: hidden; z-index: 1; position: relative; left: 50%; transform: translateX(-50%); top: 10px; } #linkedin-a-otto { transform: scale(1.3) translateY(15px); } #linkedin-a-titel { text-align: center; width: 100%; top: 20px; position: relative; font-size: 20px; } #linkedin-a-name { text-align: center; width: 100%; top: 15px; position: relative; font-size: 34px; } #linkedin-a-ceo { text-align: center; width: 100%; display: block; position: relative; top: 20px; line-height: 24px; font-size: 19px; } #linkedin-autoren_container button { background-color: #527fa2; margin-top: 32px; height: 48px; left: 50%; transform: translateX(-50%); position: relative; font-size: 18px; border: 1px solid transparent; cursor: pointer; } #linkedin-autoren_container button:hover { background-color: #fff; border: 1px solid #527fa2; color: #527fa2; } #linkedin-a-banner { transform: scale(1.3) translateY(15px); object-fit: cover; height: 120px; position: absolute; left: 0; top: -2px; } #linkedin-posts-wrapper { width: 65%; float: left; position: relative; margin-left: 5%; } .linkedin-container { width: 100%; position: relative; padding: 15px 15px 15px 15px; border: 1px solid #e0dfdc; border-radius: 25px; margin: 45px 0px 5px 0px; min-height: 265px; overflow: hidden; } .linkedin-container:first-of-type { margin-top: 65px; } .linkedin-left-container { width: 61.4%; position: relative; min-height: 265px; display: inline-block; margin-right: -15px; } .linkedin-datum { color: #527fa2; font-family: Montserrat Medium, sans-serif; font-size: 18px; letter-spacing: -1px; display: inline-block; margin-bottom: 8px; } .linkedin-titel { margin: 0; margin-bottom: 10px; } .linkedin-langtext { font-size: 17px; line-height: 22px; min-height: 90px; padding-right: 10px; padding-bottom: 45px; } .linkedin-img { width: 40%; position: relative; float: right; min-height: 400px; overflow: hidden; margin: -15px; margin-left: -15px; margin-left: 0; display: flex; justify-content: center; padding-bottom: 51px; } .linkedin-img a { min-height: 350px; display: flex; border-bottom: none; font-family: Montserrat Regular, sans-serif; font-size: 12px; line-height: 23px; } .linkedin-img img { max-width: 100%; position: relative; object-fit: cover; } .linkedin-reaktionen > a { border-bottom: none; font-family: Montserrat Regular, sans-serif; color: #a3a3a3; } .linkedin-reaktionen { cursor: pointer; margin: -15px; position: absolute; width: 102.6%; left: 14px; bottom: 15px; margin-right: 0; margin-top: 0; border-top: 1px solid #e0dfdc; width: 61.4%; } .linkedin-reaktionen div { width: calc(100% / 3); display: inline-block; text-align: center; font-size: 14px; height: 50px; line-height: 50px; border-right: 1px solid #e0dfdc; } .linkedin-reaktionen div:last-child { border-right: 0; } .linkedin-reaktionen > a > div > img { height: 25px; margin-right: 10px; top: 5px; position: relative; } .linkedin-reaktionen div:hover { background-color: #ebebeb; } .linkedin-aktionen > a { border-bottom: none; font-family: Montserrat Regular, sans-serif; color: #fff; } .linkedin-aktionen { cursor: pointer; margin: -15px; position: absolute; width: 102.6%; right: 14px; bottom: 15px; margin-top: 0; border-top: 1px solid #e0dfdc; width: 38.9%; background-color: #527fa2; z-index: 1; } .linkedin-aktionen div { width: calc(100% / 2); display: inline-block; text-align: center; font-size: 14px; height: 50px; line-height: 50px; border-left: 1px solid #e0dfdc; } .linkedin-aktionen div:hover { background-color: #344756; color: #fff; } @media screen and (max-width: 1260px) { #linkedin-a-titel { font-size: 16px; } #linkedin-a-name { font-size: 24px; } #linkedin-a-ceo { font-size: 16px; } #linkedin-autoren_container button { font-size: 14px; width: 100%; } } @media screen and (max-width: 1024px) { #linkedin-autoren_container { float: none; width: unset; margin-right: 5%; } #linkedin-a-banner { width: 100%; } #linkedin-posts-wrapper { width: unset; margin-right: 5%; } } @media screen and (max-width: 768px) { .post_aufklappen { display: none !important; } .linkedin-langtext { font-size: 14px; line-height: 20px; } .linkedin-container { min-height: 350px; } .linkedin-img { min-height: 250px !important; height: 250px !important; float: unset !important; width: calc(100% + 30px) !important; margin: -15px !important; margin-bottom: 36px !important; overflow: visible; } .linkedin-img a { min-height: 250px !important; width: 100%; } .linkedin-img img { height: 250px !important; max-width: 100%; width: 100%; } .linkedin-reaktionen div { font-size: 12px; } .linkedin-reaktionen > a > div > img { height: 20px; } .linkedin-beitrag-ansehen { display: none !important; } .linkedin-aktionen div { width: 100%; font-size: 12px; } .linkedin-aktionen { display: unset !important; } .linkedin-left-container { width: 100% !important; } } @media screen and (max-width: 610px) { .linkedin-reaktionen div { font-size: 0; } .linkedin-reaktionen > a > div > img { margin-right: 0; top: 9px; } } @media screen and (max-width: 380px) { .linkedin-aktionen div { font-size: 10px; } } /*-- Suche --*/ .sucheLinkedInContainer{ float:right; width:65%; padding-right: calc(100% - 5% - 20% - 5% - 65%); margin-top:65px } .sucheLinkedInContainer > .searchButtonLinkedin{ font-size:inherit; font-family: inherit; cursor: pointer; } @media screen and (max-width:1024px){ .sucheLinkedInContainer{ float:none; width: 100%; padding-left: calc(100% - 5% - 20% - 5% - 65%); } #linkedin-autoren_container{margin-top:0;} } @media screen and (max-width:600px){ .sucheLinkedInContainer > input{width: 100%;} .sucheLinkedInContainer > .searchButtonLinkedin{margin-top:10px;} } /* --- --- */ /* Packets3noSpaceCSS */ .Packets3NoSpacePacket:nth-of-type(1n + 4){ display:none; } .Packets3NoSpacePic{ width:80%; max-height:170px; } .Packets3NoSpaceWrapper{overflow:hidden;} .Packets3NoSpaceSlider{overflow:visible;} .Packets3NoSpacePacketWrapper > .Packets3NoSpacePacket{ border-left:3px solid #e6e7e8; }.Packets3NoSpacePacketWrapper:first-of-type > .Packets3NoSpacePacket{ border-left:none; } .Packets3NoSpaceButton_Ausblenden{display:none;} .Packets3NoSpacePacketWrapper{transition:500ms;} .Packets3NoSpaceButton_Ausblenden.primarycolorbutton{ border-color: #344756; color: #344756; background-color: #ffffff; } .Packets3NoSpaceButton_Ausblenden.secondarycolorbutton{ border-color: #527fa2; color: #527fa2; background-color: #ffffff; } .Packets3NoSpaceButton_Ausblenden.signalcolorbutton{ border-color: #d7df23; color: #d7df23; background-color: #ffffff; } .Packets3NoSpaceButton_Ausblenden.primarycolorbutton:hover{ border-color: transparent; color: #ffffff; background-color: #344756; } .Packets3NoSpaceButton_Ausblenden.secondarycolorbutton:hover{ border-color: transparent; color: #ffffff; background-color: #527fa2; } .Packets3NoSpaceButton_Ausblenden.signalcolorbutton:hover{ border-color:transparent; color: #ffffff; background-color: #d7df23; } #Packets3NoSpaceRad_2:checked ~ .Select_3, #Packets3NoSpaceRad_2:checked ~ .Select_1 {border-bottom:3px solid #e6e7e8} #Packets3NoSpaceRad_2:checked ~ .Select_3 {border-left:3px solid #e6e7e8} #Packets3NoSpaceRad_2:checked ~ .Select_1 {border-right:3px solid #e6e7e8} #Packets3NoSpaceRad_2:checked ~ .Select_3 > div {border-left:none} #Packets3NoSpaceRad_2:checked ~ .Select_2 > div {border-left:none} #Packets3NoSpaceRad_1:checked ~ .Select_2, #Packets3NoSpaceRad_1:checked ~ .Select_3 {border-bottom:3px solid #e6e7e8} #Packets3NoSpaceRad_1:checked ~ .Select_2 {border-left:3px solid #e6e7e8} #Packets3NoSpaceRad_1:checked ~ .Select_2 > div {border-left:none} #Packets3NoSpaceRad_3:checked ~ .Select_1, #Packets3NoSpaceRad_3:checked ~ .Select_2 {border-bottom:3px solid #e6e7e8} #Packets3NoSpaceRad_3:checked ~ .Select_2 {border-right:3px solid #e6e7e8} #Packets3NoSpaceRad_3:checked ~ .Select_3 > div {border-left:none} .Packets3NoSpaceLangtext{ max-height:0px; transition:500ms; bottom:0px; overflow:hidden; right:0px; } .Packets3NoSpaceLangtext > .content3Img img{ width:100%; max-height:70px; margin-top:50px; } .Packets3NoSpaceHead{font-size:37px} @media screen and (max-width:1440px){ .Packets3NoSpacePic{ width:100%; max-height:115px; } .content3Img > div, .Packets3NoSpacePacket{ padding:0px 25px 0px 25px } .content2img > div:nth-child(3){ padding:0px 10px 0px 10px; } .Packets3NoSpaceHead{font-size:37px} } @media screen and (max-width:1024px){ .Packets3NoSpaceSlider{ width:150%; transition:500ms; } .Packets3NoSpacePacket{ padding-left: 40px; padding-right: 40px; } #Packets3NoSpaceSlider_1:checked ~ .Packets3NoSpaceWrapper #Packets3NoSpaceSlider_2_lbl{display:block;} #Packets3NoSpaceSlider_2:checked ~ .Packets3NoSpaceWrapper #Packets3NoSpaceSlider_1_lbl{display:block;} #Packets3NoSpaceSlider_1:checked ~ .Packets3NoSpaceWrapper .Packets3NoSpaceSlider{margin-left:0%;} #Packets3NoSpaceSlider_2:checked ~ .Packets3NoSpaceWrapper .Packets3NoSpaceSlider{margin-left:-51%;} #Packets3NoSpaceSlider_2_lbl,#Packets3NoSpaceSlider_1_lbl{top:125px} } @media screen and (max-width:768px){ .Packets3NoSpaceHead{font-size:31px} #homePacket .col13{width:33.333%;} #homePacket .col14{width:25%;} #homePacket .col24{width:50%;} .Packets3NoSpacePacket{ padding-left: 25px; padding-right: 25px; } .content2img > .col24.rp36-18-9{ padding-right:20px; } } @media screen and (max-width:600px){ #Packets3NoSpaceSlider_2_lbl,#Packets3NoSpaceSlider_1_lbl{display:none !important;} #homePacket .Packets3NoSpaceSlider{width:100% !important; margin-left:0!important;} .Packets3NoSpacePacketWrapper{ width:100% !important; position:relative!important; border:none !important; border-bottom: 3px solid #e6e7e8 !important; margin-top:25px } .Packets3NoSpacePacket{border:none !important;} .Packets3NoSpaceWrapper{overflow:visible;} .content3Img > div{width:100%!important; margin-bottom:60px} .content2img > div{width:100%!important; margin-bottom:20px} .content2img > div:nth-child(3) > img{max-width:200px} #Packets3NoSpaceRad_1:checked ~ .Select_1 > .show_1{bottom:-890px; max-height:890px !important} #Packets3NoSpaceRad_1:checked ~ .Select_1{margin-bottom:890px !important;} #Packets3NoSpaceRad_2:checked ~ .Select_2 > .show_2{bottom:-890px; max-height:890px !important} #Packets3NoSpaceRad_2:checked ~ .Select_2{margin-bottom:890px !important;} #Packets3NoSpaceRad_3:checked ~ .Select_3 > .show_3{bottom:-1110px; max-height:1110px !important} #Packets3NoSpaceRad_3:checked ~ .Select_3{margin-bottom:1110px!important;} } /* --- --- */ /* smallPageStripesCSS */ .pageStripe { height: 45px; position: absolute; z-index: 1; } #bluePageStripe { width: 29%; bottom: 60px; } #grayPageStripe { bottom: 0px; width: 33%; } .stripeMargin { margin-bottom: 125px; } .stripeTop { top: 105px; } .stripesLeft .pageStripe { left: 0px; } .stripesRight .pageStripe { right: 0px; } .stripeContainer #pageStripesWrapper { width: 100%; } .stripeContainer #pageStripesWrapper.stripesLeft { left: 0px; } .stripeContainer #pageStripesWrapper.stripesRight { right: 0px; } .pageStripe::before { content: ''; display: inline-block; position: absolute; top: 0px; z-index: 1; } #bluePageStripe::before { border-bottom: 45px solid #344756; } #bluePageStripe.backBlue::before { border-bottom: 45px solid #527fa2; } #grayPageStripe::before { border-bottom: 45px solid #e6e7e8; } .stripesLeft #bluePageStripe::before { border-right: 20px solid transparent; right: -20px; } .stripesRight #bluePageStripe::before { border-left: 20px solid transparent; left: -20px; } .stripesLeft #grayPageStripe::before { border-right: 20px solid transparent; right: -20px; } .stripesRight #grayPageStripe::before { border-left: 20px solid transparent; left: -20px; } @media screen and (max-width: 1024px) { #bluePageStripe { width: 13%; } #grayPageStripe { width: 19%; } } @media screen and (max-width: 600px) { .stripeMarginIntroText { margin-bottom: 125px; } #bluePageStripe { width: 48%; } #grayPageStripe { width: 58%; } } /* --- --- */ /* spacePacketsCSS */ #packetWrapper { width: 80%; line-height: 25px; } #packetListWrapper { grid-template-columns: calc(33.333% - 17px) calc(33.333% - 17px) calc(33.333% - 17px); column-gap: 17px; } .packetBox { padding: 24px; } #packetWrapper.bigStripeBox { padding: 0px; } .packetIcon { width: 50px; height: 50px; border-radius: 25px; background-size: 30px; background-position: center; background-repeat: no-repeat; } label.lbl_hideDetails { display: none; } .packetText hr { background-color: #e6e7e8; } .packetBox > .packetDetail { padding: 0px 24px; } .packetLine:first-of-type { margin-bottom: 24px; } .packetLine:last-of-type { margin-top: 24px; } .packetBox:nth-of-type(3n+3) h4 { color: #527fa2; } .packetBox:nth-of-type(3n+3) h4 { color: #d7df23; } .packetBox:nth-of-type(3n+1) .packetIcon { background-color: #344756; } .packetBox:nth-of-type(3n+2) .packetIcon { background-color: #527fa2; } .packetBox:nth-of-type(3n+3) .packetIcon { background-color: #d7df23; } @media screen and (min-width: 1025px) { #packetHeaderBox { margin-left: 24px; } } @media screen and (max-width: 1024px) { #packetListWrapper { column-gap: 0px; grid-template-columns: 33.333% 33.333% 33.333%; } .packetBox { padding: 0px; } .packetDetail { border: none; } #packetWrapper.bigStripeBox { padding: 24px; /* padding-right: 0px;*/ background-color: #fff; } .packetBox { border-left: 2px solid #e6e7e8; } .packetBox > .packetLine { display: none; } } @media screen and (max-width: 1024px) and (min-width: 769px) { .packetBox:nth-of-type(3n+3) { border-right: 2px solid #e3e7e8; } .packetBox:nth-of-type(n+4) { padding-top: 24px; } } @media screen and (max-width: 768px) { #packetListWrapper { grid-template-columns: 100%; } .packetBox { padding-top: 24px; border-right: 2px solid #e6e7e8; } .packetBox:first-of-type { padding-top: 0px; } .packetBox:last-of-type .packetDetail > .packetLine { display: none; } } @media screen and (max-width: 600px) { .packetText { height: 0px; overflow: hidden; } #packetWrapper.bigStripeBox { width: 100%; padding-right: 0px; } .packetDetail > input[type="radio"]:checked ~ label.lbl_showDetails { display: none; } .packetDetail > input[type="radio"]:checked ~ label.lbl_hideDetails { display: inline-block; } .packetDetail > input[type="radio"]:checked ~ .packetText { height: 100%; padding-top: 24px; } } /* --- --- */ #backtotopContainer { width: calc(100% - 54px); position: absolute; text-align: right; top: 0; left: 0; } #backtotop { display: none; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 37px solid rgba(82, 128, 166, 0.55); position: fixed; bottom: 14px; z-index: 900; } /* --- --- */ #packetWithPicImgBox { width: calc(100% - 835px); max-width: 300px; float: left; } #packetWithPicTextBox { width: calc(100% - 300px); min-width: 835px; } #packetWrapper { width: 86%; } #packetButton { width: 175px; } #packetHeaderWithButtonBox { max-width: calc(100% - 175px); padding-right: 70px; } #packetHeader { font-size: 35px; } #packetWithPicImgBox img { max-height: 400px; } #packetWithPicTextBox > .bigStripe { width: calc(100% - 78px - 68px - 300px); } #packetButton > a { width: 100%; padding-left: 20px; padding-right: 20px; } .packetBox:nth-of-type(3n+2) h2 { color: #527fa2; } .packetBox:nth-of-type(3n+3) h2 { color: #d7df23; } @media screen and (max-width: 1024px) { #packetWithPicTextBox { width: calc(100% - 200px); min-width: 600px; } #packetWithPicImgBox { width: calc(100% - 600px); max-width: 200px; } #packetWrapper { width: 95%; } } @media screen and (max-width: 768px) { #packetWithPicTextBox { min-width: 0px; } #packetWithPicImgBox { max-width: 350px; } #packetWrapper { margin-bottom: 30px; } #packetWithPicTextBox > .bigStripe { display: none; } #packetWithPicTextBox, #packetWithPicImgBox { display: block; width: 100%; } } @media screen and (max-width: 650px) { #packetButton { width: auto; max-width: 100%; padding-bottom: 24px; } #packetHeaderWithButtonBox { max-width: 100%; padding-right: 0px; padding-bottom: 24px; } } @media screen and (max-width: 600px) { #packetWrapper.bigStripeBox { padding-right: 24px; } .packetText { height: auto; } } /* --- --- */ #sucheAjaxContainer { display: block; position: fixed; top: 0; margin: 0 auto; width: 100%; max-width: 1440px; height: 100%; pointer-events: none; z-index: 2; } #chkSucheAjax, #mandSucheAjax {display: none;} #lblSucheAjax { position: absolute; top: 31px; right: 68px; width: 40px; height: 60px; pointer-events: all; background-image: url("/bilder/menu_icon_suche.svg"); background-position: top right; background-repeat: no-repeat; background-size: 30px; } #lblSucheCloseArea { opacity: 0; pointer-events: none; cursor: unset; position: fixed; background-color: rgba(0, 0, 0, 0.2); height: 100%; width: 100%; left: 0; top: 0; transition: 300ms; } #sucheAjax { max-width: 100%; max-height: calc(100% - 91px); padding: 20px; text-align: right; background-color: #fff; box-shadow: 0px 3px 3px 0px rgba(59, 48, 48, 0.24); position: absolute; top: 91px; right: 0; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .3s; -o-transition: opacity .3s; -ms-transition: opacity .3s; -moz-transition: opacity .3s; -webkit-transition: opacity .3s; overflow: auto; } #chkSucheAjax:checked ~ #sucheAjax, #lblSucheAjax:hover ~ #sucheAjax, #sucheAjax:hover, #chkSucheAjax:checked ~ #lblSucheCloseArea { opacity: 1; pointer-events: auto; } #chkSucheAjax:checked ~ #lblSucheAjax, #lblSucheAjax:hover { background-image: url("/bilder/menu_icon_suche_hover.svg"); } #sucheAjaxTbBtn { max-width: 300px; display: inline-block; } #tbSucheAjax, #btnSucheAjax {vertical-align: top;} #tbSucheAjax { width: calc(100% - 42px - 10px); } #btnSucheAjax { height: 42px; width: 42px; padding: 0; margin-left: 10px; background-image: url("/bilder/menu_icon_suche.svg"); background-repeat: no-repeat; background-position: center; } #ergebnisseSucheAjax { display: none; text-align: left; width: 500px; max-width: 100%; } #ergebnisseSucheAjax > article{ padding: 20px 0; border-bottom: 1px solid #e6e7e8; } .ergebnisSucheAjaxHeadline { margin-top: 0; margin-bottom: 10px; } @media screen and (max-width: 1024px) { #lblSucheAjax {right: 118px;} #lblSucheAjax:hover ~ #sucheAjax, #sucheAjax:hover { opacity: 0; pointer-events: none; } #chkSucheAjax:checked ~ #sucheAjax { opacity: 1; pointer-events: auto; } } @media screen and (max-width: 600px) { #lblSucheAjax { height: 40px; right: 64px; top: 15px; width: 36px; background-size: 26px; } #sucheAjax { top: 55px; max-height: calc(100% - 55px); } } /* --- --- */