@font-face { font-family: 'ClearSans-Light'; src : url('fonts/ClearSans-Light-webfont.eot'); src : url('fonts/ClearSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Light-webfont.woff') format('woff'), url('fonts/ClearSans-Light-webfont.ttf') format('truetype'), url('fonts/ClearSans-Light-webfont.svg#clear_sans_lightregular') format('svg'); font-weight: normal; font-style : normal; } @font-face { font-family: 'ClearSans-Medium'; src : url('fonts/ClearSans-Medium-webfont.eot'); src : url('fonts/ClearSans-Medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Medium-webfont.woff') format('woff'), url('fonts/ClearSans-Medium-webfont.ttf') format('truetype'), url('fonts/ClearSans-Medium-webfont.svg#clear_sans_mediumregular') format('svg'); font-weight: normal; font-style : normal; } @font-face { font-family: 'ClearSans-Regular'; src : url('fonts/ClearSans-Regular-webfont.eot'); src : url('fonts/ClearSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/ClearSans-Regular-webfont.woff') format('woff'), url('fonts/ClearSans-Regular-webfont.ttf') format('truetype'), url('fonts/ClearSans-Regular-webfont.svg#clear_sansregular') format('svg'); font-weight: normal; font-style : normal; } @font-face { font-family: 'Brawler-Regular'; src : url('fonts/Brawler-Regular.eot'); src : url('fonts/Brawler-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Brawler-Regular.woff') format('woff'), url('fonts/Brawler-Regular.ttf') format('truetype'), url('fonts/Brawler-Regular.svg') format('svg'); font-weight: normal; font-style : normal; } * { box-sizing : border-box; font-family: 'ClearSans-Light', sans-serif; margin : 0; padding : 0; } *::before, *::after { box-sizing: border-box; } *:focus { outline: none; } html { font-size: 14px; } body { background-color: #6c7d8a; /*color : #636363;*/ color : black; font-size : 16px; font-weight : 300; line-height : 26.6px; } div { position: relative; } a, a:hover { /*color: #636363;*/ color : black; text-decoration: none; transition : color 0.5s, background 0.5s; } b, strong { font-weight: 600; } p { /*line-height: 1.3em;*/ line-height: 25.5px; } #foot p { word-break: break-word; } p:not(:last-child) { margin-bottom: 1em; } img { max-width: 100%; height : auto; } h1 { font-family : 'Brawler-Regular', serif; color : #f08376; font-size : 20px; font-weight : 300; margin : 0 0 1em 0; text-rendering: optimizeLegibility; } h2 { font-family : 'Brawler-Regular', serif; font-weight : 300; line-height : 1.2em; font-size : 20px; margin-bottom : 17px; text-rendering: optimizeLegibility; } h2.thin { font-family: 'Brawler-Regular', serif; font-size : 20px; font-weight: 300; } h3 { font-size : 16px; text-rendering: optimizeLegibility; } h3.dotted-dark { background : url('../img/dot_darkgreen.png') repeat-x bottom left; margin-bottom: 10px; } h3.dotted { background : url('../img/dot_green.png') repeat-x bottom left; font-weight : 300; height : 17px; margin-bottom: 30px; } h3.dotted span { background : #fff; font-family : 'ClearSans-Medium', sans-serif; color : #576b7c; font-size : 12px; display : inline-block; padding-left : 0px; text-transform: uppercase; } @media(min-width:768px) { h3.dotted span { padding-left: 3px; } } h3.dotted.white { background: url('../img/dot.png') repeat-x bottom left; } h3.dotted.white span { background-color: #C1DBCD; color : #fff; } span.dotted-dark { background : url('../img/dot_darkgreen.png') repeat-x bottom left; margin-bottom: 10px; } span.dotted { background : url('../img/dot_green.png') repeat-x bottom left; font-weight : 300; height : 17px; margin-bottom: 30px; } span.dotted span { background : #fff; font-family : 'ClearSans-Medium', sans-serif; color : #576b7c; font-size : 12px; display : inline-block; padding-left : 0px; text-transform: uppercase; } @media(min-width:768px) { span.dotted span { padding-left: 3px; } } span.dotted.white { background: url('../img/dot.png') repeat-x bottom left; } span.dotted.white span { background-color: #C1DBCD; color : #fff; } h4 { color : #576b7c; font-family : 'ClearSans-Medium', serif; font-size : 12px; font-weight : 300; margin-bottom : 1em; text-transform: uppercase; text-rendering: optimizeLegibility; } h5 { color : rgb(255, 134, 116); font-family : 'ClearSans-Light', serif; font-size : inherit; font-weight : 300; text-transform: uppercase; } h6 { font-size : 16px; font-weight : 600; margin-bottom: 1.5em; } .no-pad { padding: 0; } .no-margin { margin: 0; } .bg-white { background-color: rgb(255, 255, 255); } .bg-white a { color : rgb(255, 134, 116); text-decoration: underline; } .bg-white a:hover { text-decoration: none; } .bg-green { background-color: rgb(111, 162, 135); } /* Pantone 556 C */ .bg-green-dark { background-color: rgba(13, 82, 87, 0.8); } /* Pantone 7476 C */ .bg-teal-dark { background-color: rgb(0, 115, 119); } /* Pantone 332 C */ .bg-teal { background-color: rgba(193, 219, 205, 1); } /* Pantone 559 C | 197, 217, 201 */ .bg-teal-80 { background-color: rgba(193, 219, 205, 0.8); } /* Pantone 559 @ 80% C */ .bg-teal-light { background-color: rgba(230, 237, 228, 0.8); } /* Pantone 621 C */ .bg-teal-xlight { background-color: #f5f9f5; } .bg-blue { background-color: rgb(79, 92, 108); color : #fff; } /* Pantone 7545 C */ .bg-orange { background-color: rgb(255, 134, 116); } /* Pantone 170 C */ .bg-orange { background-color: #f48476; } /* Pantone 170 C */ .rb-top-right { border-top-right-radius: 28px; } .rb-bottom-left { border-bottom-left-radius: 28px; } .rb-top-left { border-top-left-radius: 28px; } .rb-bottom-right { border-bottom-right-radius: 28px; } .border-grey { border: 1px solid #CCC; } .txt-orange { color: #f79231; } .txt-koralle { color: #ff8674; } .txt-white { color: #fff !important; } .txt-grey { color: #636363 !important; } .fc-koralle { color: #FF8674 !important; } .txt-fs-15 { font-size: 15px; } .ico-orange { border-top-right-radius : 10px; border-bottom-left-radius: 10px; background : #D78275 no-repeat center; background-size : 46px; height : 46px; width : 46px; display : block; float : left; margin-right : 9px; } .mb-1 { margin-bottom: 17px; } .mb-2 { margin-bottom: 34px; } .mb-3 { margin-bottom: 68px; } .mb-4 { margin-bottom: 102px; } .mb25 { margin-bottom: 25px; } .mb40 { margin-bottom: 40px; } .mb90 { margin-bottom: 102px; } .clearfix { *zoom: 1; clear: both; } .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .block { display: block; } .inline-block { display: inline-block; } .table { display: table; width : 100%; } .td { display : table-cell; vertical-align: top; } .td.vam { vertical-align: middle; } .td.vab { vertical-align: bottom; } .td-col-space { display: table-cell; width : 17px; } .tal { text-align: left; } .tac { text-align: center; } .tar { text-align: right; } a.ico { background-repeat : no-repeat; background-position: center; } a.ico.link { background-image: url('../img/ico_link.png'); } a.ico.linkedin { background-image: url('../img/ico_linkedin.png'); } a.ico.blog { background-image: url('../img/ico_blog.png'); } a.ico.fb { background-image: url('../img/ico_fb.png'); } a.ico.twitter { background-image: url('../img/ico_twitter.png'); } a.ico.xing { background-image: url('../img/ico_xing.png'); } a.ico.insta { background-image: url('../img/ico_insta.png'); } .btn.success { background-color: #00654b; } .btn.alert { background-color: #e43725; } .hr { background: url('../img/dot.png') repeat-x top left; height : 3px; } img#phery-loader { display : none; position: fixed; right : 15px; top : 15px } /* vertical-center box */ .vc { display: table; height : 100%; width : 100%; } .vc>.vc-inner { display : table-cell; height : 100%; vertical-align: middle; width : 100%; padding-top : 8px; padding-right : 0; padding-bottom: 8px; padding-left : 0; } .default-pad { padding: 34px 17px; } .content ol { margin-left : 34px; margin-bottom: 17px; } .content ol li { margin-bottom: 3px; margin-top : 3px; } .content ul { margin-bottom: 1.3em; list-style : none; } .content ul li { background : url('../img/bg_li.png') no-repeat left 10px; margin-left : 0; padding-left : 17px; margin-bottom: 3px; margin-top : 3px; } .content ul.white li { background: url('../img/bg_li_white.png') no-repeat left 10px; } .content a { color : rgb(255, 134, 116); text-decoration: underline; } .content a:hover { text-decoration: none; } .content .bg-orange a { color: #fff; } .content a.more { background : url('../img/ico_arrow_down_red.png') no-repeat center left; display : inline-block; padding-left : 20px; font-size : 20px; text-decoration: none; } .content .pagination { font-size : 16px; margin-bottom: 17px; padding : 14px 29px; } .content .pagination a { color : #636363; text-decoration: none; } .content .pagination a:hover, .content .pagination a.active { color: #232323; } .content .pagination a.active { color : #636363; font-weight: bold; } .content .pagination>a:not(:last-child)::after { content: " | "; } .content table.tb-content { margin-bottom: 17px; } .content table.tb-content, .content table.tb-content tr, .content table.tb-content td { height: auto !important; width : auto !important; } .content table.tb-content td:not(:last-child) { padding-right: 17px; } /* accordion */ .accordion-head { background-image : url('../img/ico_arrow_down.png'); background-repeat : no-repeat; background-position : right 17px center; border-bottom-right-radius: 7.5mm; cursor : pointer; font-size : inherit; font-weight : 300; padding : 17px 34px; margin-top : 17px; margin-bottom : 0; } .accordion-head:first-child { margin-top: 0px; } .accordion-head.ui-state-active { background-image : url('../img/ico_arrow_up.png'); border-bottom-right-radius: 0; margin-bottom : 0; } .accordion-body { padding: 34px 34px; } .accordion-body-small { position : absolute; z-index : 30; background-color: rgba(230, 237, 228, 0.95); } .accordion-body-small-scroll { max-height: 250px; overflow : auto; } /* teaser */ .teaser-orange, .teaser-teal, .teaser-green, .teaser-teal-light { padding: 21px; } .teaser-orange, .teaser-green { color: white; } .teaser-orange a, .teaser-green a { color : white !important; text-decoration: underline; } .teaser-teal {} .teaser-teal-light { font-size: 10px; } /* Startseite */ .ico-corona { display : none; background : url('../img/icon-blog-90.png') no-repeat; background-size: contain; cursor : pointer; height : 90px; position : absolute; top : 200px; left : calc(100% - 352px); width : 90px; z-index : 50; } @media(min-width:1280px) { .ico-corona { display: block; } } .ico-spenden { background : url('../img/ico_spenden.png') no-repeat; background-size: contain; cursor : pointer; height : 90px; position : absolute; top : -52px; left : -100px; width : 80px; z-index : 50; } .ico-spenden:hover { background-image: url('../img/ico_spenden_on.png'); } #tooltipSpenden { border-top-left-radius : 17px; border-bottom-right-radius: 17px; /*background-color :rgba(238, 138, 120, 1.0);*/ background-color : rgba(255, 137, 107, 1.0); color : #fff; padding : 17px 22px; position : absolute; z-index : 50; left : 2px; bottom : 103px; cursor : pointer; display : none; width : 400px; } #tooltipSpenden::before { background : transparent url(../img/ico_triangle_down_red.png) no-repeat 0 0; background-size: contain; content : ""; height : 11px; left : 28px; position : absolute; bottom : -11px; width : 21px; opacity : 1.0; } #tooltipSpenden::after { height : 40px; content : ""; left : 0; bottom : -40px; position: absolute; width : 100%; } .box-bedarfscheck { color : #fff; padding : 34px; text-align: center; } .box-bedarfscheck>p { text-align: left; } .box-bedarfscheck>p>a { color: #fff; } .box-login-info { background: #f49f90; } /* Pressefotos */ .box-pressefoto { background-size : cover; background-position: center; background-repeat : no-repeat; display : block; height : 220px; position : relative; } .box-pressefoto:nth-child(3n+1):not(:last-of-type) { margin-right: 0; } .box-pressefoto:after { background: transparent url('../img/ico_download.png') no-repeat; content : ""; height : 29px; left : 17px; position : absolute; top : 17px; width : 29px; } .box-pressefoto div { bottom : 0; color : #636363; display : none; left : 0; padding : 17px; position: absolute; right : 0; } .box-pressefoto:hover div { display: block; } .box-social .ico { background-size: 17px; position : absolute; top : 20px; right : 15px; height : 17px; width : 17px; } .box-social .ico:after { background-color: #fff; content : ""; position : absolute; left : -12px; width : 12px; height : 17px; top : 0; } ul.ico-bar-small { background-color: #fff; float : right; } ul.ico-bar-small>li { background : none; display : inline-block; margin-left: 8px; padding : 0; } ul.ico-bar-small>li>a.ico { background-color : rgb(255, 134, 116); background-size : 17px; border-bottom-left-radius: 4px; border-top-right-radius : 4px; display : block; height : 17px; width : 17px; } ul.ico-bar-small>li:nth-child(odd)>a.ico { border-bottom-left-radius : 0; border-top-right-radius : 0; border-top-left-radius : 4px; border-bottom-right-radius: 4px; } ul#quick-connect { list-style: none; padding : 30px 17px 26px 30px; position : absolute; right : 0; top : 568px; z-index : 25; } ul#quick-connect>li { font-size : 12px; margin-bottom: 17px; } ul#quick-connect>li:last-child { margin-bottom: 0; } ul#quick-connect>li .info { display : none; float : left; padding-left : 17px; padding-right: 34px; line-height : 1.2em; width : 205px; margin-right : 17px; } ul#quick-connect>li .info.toggle:hover { cursor: pointer; } ul#quick-connect>li .toggle { background: url('../img/ico_arrow_down.png') no-repeat center right; } ul#quick-connect>li .toggle.on { background: url('../img/ico_arrow_up.png') no-repeat center right; } ul#quick-connect>li a { color: #fff; } ul#quick-connect>li a.ico { display: block; float : left; height : 40px; width : 40px; } ul#quick-connect>li a.ico:hover { cursor: pointer; } ul#quick-connect>li a.ico.contact { background-image: url('../img/ico_contact.png'); } ul#quick-connect>li a.ico.at { background-image: url('../img/ico_at.png'); } ul#quick-connect>li a.ico.tel { background-image: url('../img/ico_tel.png'); } ul#quick-connect>li a.ico.call { background-image: url('../img/ico_call.png'); } ul#quick-connect>li a.ico.mail { background-image: url('../img/ico_mail.png'); } .quick-connect-form { display : none; padding-top: 17px; } #callback-form { margin-bottom: -26px; } .content a.btn { color : white; margin-left : 0; text-decoration: none; display : inline-block; } .content a.btn.disabled { background-color: lightgray; } .content a.btn.disabled:hover { cursor: not-allowed; } .content a.btn.double { margin-right: 17px; } input, textarea, select { -webkit-appearance: none; -moz-appearance : none; appearance : none; border-radius : 0; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border : 1px solid #fff; } input, textarea, a.btn { border : 1px solid transparent; border-top-right-radius : 5px; border-bottom-left-radius: 5px; padding: 2px 5px; height: 25px; line-height: 25px; font-size: 13px; width: 299px; } input.file-input { padding: 0; border : none; width : auto; } textarea { min-height: 3em; height: 5em; max-height: 30em; margin-left: 125px; min-width: 318px; max-width: 318px; } select { border : 1px solid transparent; padding : 0 35px 0 5px; background-color : #fff; background-image : url('../img/ico_select_arrow.png'); background-position : right; background-repeat : no-repeat; border : none; border-top-right-radius : 5px; border-bottom-left-radius: 5px; height : 25px; line-height : 19px; min-width : 55px; } /* hide browser-styling (arrow) in IE10 */ select::-ms-expand { display: none; } input.strasse { width: 266px; margin-right: 10px; float : left; } input.hausnr { width : 40px; text-align: center; } input.plz { width : 65px; margin-right: 10px; text-align : center; float : left; } input.ort { width: 226px; } input[type=submit], a.btn { background-color: rgba(255, 134, 116, 0.9); background-color: #f49f90; color : #fff; display : block; margin-left : 125px; padding : 5px 25px; height : auto; width : auto; } input[type="submit"]:disabled { background-color: lightgrey; } input[type="submit"]:disabled:hover { cursor: not-allowed; } input.double[type=submit] { float : left; margin-right: 17px; margin-top : 15px; } input.double[type=submit]:last-of-type { float : none; margin-left: 0; margin-top : 15px; } #datenschutz-btn { display : block; margin-bottom: 15px; margin-top : 15px; } @media(min-width:882px) { #datenschutz-btn { height : 42px; line-height: 32px; } } @media(min-width:1280px) { #datenschutz-btn { height : auto; line-height: 25px; } } #submit-btn { margin-bottom: 15px; float : none; } @media(min-width:555px) { #submit-btn { float: right; } #datenschutz-btn { display: inline-block; } input.double[name="zurueck"] { margin-top: 15px !important; } } @media(min-width:662px) { input.double[name="zurueck"] { margin-top: 15px; } } @media(max-width:973px) { #kampagne_perma { max-width: 297px; } } @media(max-width:354px) { #kampagne_perma { max-width: 265px; } } @media(min-width:768px) and (max-width:881px) { .reverse-submit input.double[type="submit"] { float: none !important; } } .reverse-submit { margin-left: 125px; display : inline-block; } .reverse-submit input.double[type=submit] { float : right; margin-left: 0; } .reverse-submit input.double[type=submit]:last-of-type { float : left; margin-left: 0; } input[type=submit]:hover { cursor: pointer; } input[type=radio] { height: 20px; width : 20px; } label { float: left; width: 125px; /*width: 100%;*/ display: inline-block; } label.long { width: 305px; } label.textarea { position: absolute; } form.small label { line-height: 21px; width : 100px; } form.small input, form.small textarea { width : 160px; max-width: 160px; min-width: 160px; } form.small textarea, form.small input[type=submit] { margin-left: 100px; } form.small input[type=submit].full { margin-left: 0px; width : 100%; max-width : 100%; } /* Checkbox */ input[type='checkbox'], input[type='radio'] { -webkit-appearance: none; -moz-appearance : none; appearance : none; border : none; border-radius : 0; font-size : 1em; width : 100% } input[type='checkbox']:checked, input[type='checkbox']:not(:checked), input[type='radio']:checked, input[type='radio']:not(:checked) { background: transparent; position : relative; visibility: hidden; margin : 0; padding : 0; display : none; } input[type='checkbox']+label, input[type='radio']+label { cursor : pointer; padding-left: 30px; position : relative; width : 100%; } input[type='checkbox']:checked+label::before, input[type='checkbox']:not(:checked)+label::before, input[type='radio']:checked+label::before, input[type='radio']:not(:checked)+label::before { background : white none repeat scroll 0 0; border : 1px solid #fff; border-bottom-left-radius: 5px; border-top-right-radius : 5px; content : " "; display : inline-block; height : 20px; left : 0; position : absolute; top : 0; width : 20px; } input[type='checkbox'].error:checked+label::before, input[type='checkbox'].error:not(:checked)+label::before, input[type='radio'].error:checked+label::before, input[type='radio'].error:not(:checked)+label::before { border: 1px solid rgba(255, 134, 116, 0.9); } input[type=radio]:checked+label::before, input[type=radio]:not(:checked)+label::before {} input[type='checkbox']:hover+label::before, input[type='radio']:hover+label::before { background: #fff url('../img/checkbox.png') no-repeat center; } input[type='checkbox']:checked+label::before, input[type='radio']:checked+label::before { background: #fff url('../img/checkbox.png') no-repeat center; } input[type='checkbox']:checked+label, input[type='radio']:checked+label { font-weight: 600; } label.bc { float : left; margin-bottom: 25px; margin-right : 17px; width : 119px; } label.bc span { display : block; line-height: 1em; min-height : 2em; } .bc-ico { border-bottom-left-radius: 17px; border-top-right-radius : 17px; margin-top : 5px; padding : 5px; width : 100px; } .bc-spacer { height: 75px; } .bc-ico img { pointer-events : none; -webkit-user-select: none; user-select : none; } .col-bc-1 { margin-right: 0; } .col-bc-2 { clear: both; width: auto; } label.bc.small { margin-right: 17px; width : 119px; } label>input[type="checkbox"]:checked+div.bc-ico, label>input[type="radio"]:checked+div.bc-ico { background: #f48476 none repeat scroll 0 0; } .bc-answer { padding: 17px 34px; } .bc-answer.prio-0, .bc-answer.prio-1, .bc-answer.prio-2, .bc-answer.prio-3 { background-position: right 45px; background-repeat : no-repeat; } .bc-answer.prio-0 { background-image: url("../img/bedarfscheck/icon-prio-0.png"); } .bc-answer.prio-1 { background-image: url("../img/bedarfscheck/icon-prio-1.png"); } .bc-answer.prio-2 { background-image: url("../img/bedarfscheck/icon-prio-2.png"); } .bc-answer.prio-3 { background-image: url("../img/bedarfscheck/icon-prio-3.png"); } .bc-answer h2 { margin-bottom: 5px; } .bc-answer-body { height : 50px; margin-right: 30%; overflow : hidden; } .bc-answer-body p { word-wrap: break-word; } .bc-answer-body a { cursor: pointer; } .bc-answer-body a.more { background : #EBF1E9 none repeat scroll 0 0; bottom : 0; font-size : inherit; padding-left: 5px; position : absolute; right : 0; } .bc-answer-body a.more::before { background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(237, 237, 237, 0) 0%, rgb(235, 241, 233) 80%) repeat scroll 0 0; content : ""; display : block; height : 1.4em; left : -35px; position : absolute; width : 35px; } .success-msg { background-color : rgba(230, 237, 228, 0.8); border-top-left-radius : 15px; border-bottom-right-radius: 15px; padding : 34px 34px; } @media(min-width:992px) { .success-msg { padding: 34px 204px; } } .error { border: 1px solid rgba(255, 134, 116, 0.9); } .error-msg { background : rgba(255, 134, 116, 0.9); border-top-right-radius : 5px; border-bottom-left-radius: 5px; color : #fff; margin-bottom : 17px; padding : 34px 51px; text-align : center; } #login-popup { position : relative; margin : 20px auto; max-width: 500px; width : auto; } #login-popup>div { min-height: 250px; padding : 20px 75px; } #logout-msg, #message-popup { position : relative; margin : 20px auto; max-width: 500px; width : auto; padding : 34px 68px; } #logout-msg p:last-child, #message-popup p:last-child { margin-bottom: 0; } /* #content-popup { position: relative; margin: 20px auto; max-width: 800px; width:auto; } #content-popup > div { min-height: 250px; padding: 20px 75px; } */ a#to-top { background-image : url("../img/ico_arrow_up.png"); background-position: center center; background-repeat : no-repeat; height : 54px; position : absolute; right : 0; top : 50px; width : 72px; z-index : 25; } /* file handler */ #form-info { display : none; padding : 17px; margin-bottom : 17px; border-top-left-radius : 5px; border-bottom-right-radius: 5px; } #file-input { background : rgba(0, 0, 0, 0) url("../img/ico_file_upload.png") no-repeat scroll left top; padding-left: 32px; display : block; } #file-input label.file-label { float : none; display: inline-block; width : 280px; } #file-input label.file-label input { position: fixed; top : -1000px; } #file-input label.file-label .label-text:hover { cursor: pointer; } ul#file-list li { list-style : none; background-image: none; padding-left : 0; margin : 10px 0; } ul#file-list li span {} ul#file-list li a { float: right; } ul#file-list li a:hover { cursor: pointer; } /* * adventskalender */ #adventskalender-liste div { margin-bottom: 10px; } #adventskalender-liste div:nth-child(2n+1) { clear: left; } div.adventsCover { top : 0; left : 0; cursor : pointer; position : absolute; transition : all 1.2s ease-in; background-size : cover; background-position: 0px 30%; height : 100%; width : 100%; } @media only screen and (max-width: 800px) { div.adventsCover { background-position: 45% 30%; } } @media only screen and (max-width: 767px) { div.adventsCover { background-position: 0% 30%; } } @media only screen and (max-width: 360px) { div.adventsCover { background-position: 40% 30%; } } div.adventsCover.rotate { top : 500px; transform : rotate(90deg); transform-origin: top left; } #fragespiel .frage { font-size : 14px; font-weight: bold; } #fragespiel .qcirc { position : relative; top : 3px; width : 23px; height : 23px; min-width : 23px; min-height : 23px; margin-right : 10px; background-image: url('/img/advent/tree.png'); background-size : cover; } #fragespiel .antwortText { min-width: 226px; } .adventWrapper { position: relative; overflow: hidden; } #fragespiel .antwort { display : inline-flex; color : white; font-size : 14px; text-decoration: none; margin-top : 10px; } #fragespiel .antwort:hover { color : white; text-decoration: none; cursor : pointer; } #fragespiel .loesung_text { display: none; } #fragespiel #nochmal { display: none; } #fragespiel #nochmal:hover { cursor: pointer; } #fragespiel #liste { max-width: 210px; } .fitImage { display : block; position : relative; left : -20px; top : -20px; width : calc(100% + 40px); max-width : calc(100% + 40px); border-top-right-radius: 13px; } @media(min-width:768px) { .fitImage { display: none; } } .responsiveVideoMemberStart { width: 350px; } .responsiveVideoMemberStartWeih { width : 100%; height: 327px; } @media(max-width:768px) { .clearfix.txt-grey.bg-orange.txt-white.form-info-box.mb-1 { display : inline-block; margin-top: 30px; } } #maincontentMobil { position: relative; top : -80px; } .cookie-margin { height: 300px; } @media(min-width:768px) { .cookie-margin { height: 237px; } } @media(min-width:992px) { .cookie-margin { height: 182px; } } @media(min-width:1170px) { .cookie-margin { height: 134px; } } .kampagneFrei { margin-top : 15px; margin-right: 10px; } .kampagneFrei #kampagne_perma_text { width: 100%; } #change-cookie button { cursor : pointer; color : white; background-color: #ef887b; border : 0px solid black; padding : 8px; margin : 15px; margin-left : 15px; margin-left : 0px; font-weight : bold; } .cookie_change_button { cursor : pointer; color : white; background-color: #ef887b; border : 0px solid black; padding : 8px; margin : 15px; margin-left : 15px; margin-left : 0px; font-weight : bold; } .declineAll { cursor : pointer; color : white; background-color: #ef887b; border : 0px solid black; padding : 8px; margin : 15px; margin-left : 15px; margin-left : 0px; font-weight : bold; } #content-popup-container { padding : 35px; margin-bottom: 150px; } .mfp-content { max-width : 1440px; margin-left : auto; margin-right: auto; } .menuToggle { color : #f08376; text-transform: uppercase; height : 65px; left : 60px; top : 191px; position : absolute; z-index : 10; cursor : pointer; line-height : 20px; } .menuToggle .animatedBurger { width : 45px; height : 48px; line-height: 20px; } .menuToggle .animatedBurger span:first-child { position : relative; transform-origin: 0% 50%; } .menuToggle .animatedBurger span:last-child { position : relative; transform-origin: 0% 50%; } .menuToggle .animatedBurger span { display : inline-block; background-color : #f08376; height : 5px; width : 45px; line-height : 5px; transition-duration: 0.5s; transition-property: transform; } .menuToggle>span { position : relative; top : -22px; font-size : 30px; margin-left: 62px; } a.mitgliedWerdenBtn { position : relative; height : 48px; font-size : 18px; line-height : 48px; color : #fff; background-color : #f48476; border : 1px solid #f48476; border-bottom-left-radius: 15px; border-top-right-radius : 15px; margin-left : 1rem; margin-right : 1rem; margin-top : 14px; margin-bottom : 35px; padding-right : 2rem; padding-left : 2rem; display : inline-block; } a.kuendigungBtn { position : relative; height : 48px; font-size : 18px; line-height : 48px; border : 1px solid black; border-bottom-left-radius: 15px; border-top-right-radius : 15px; margin-left : 1rem; margin-right : 1rem; margin-top : 14px; margin-bottom : 35px; padding-right : 2rem; padding-left : 2rem; display : inline-block; } /* YouTube Video Cookiefirst ************************* *****************************************************/ iframe:not([src]) { display: none; } .youtubevideo-wrapper { position: relative; } .youtubevideo-wrapper .button-wrapper { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 90%; font-size : .9rem; line-height : 1.5; text-align : center; background-color: rgba(255, 255, 255, .85); box-shadow : 0 0 .25rem 0 rgba(0, 0, 0, .3); border-radius : .125rem; padding : .5rem; } .youtubevideo-wrapper .button-wrapper button { font-size : .9rem; color : #ef887b; text-decoration : underline; border : 0; background-color: transparent; cursor : pointer; } .youtubevideo-wrapper .responsive-video { position : relative; padding-bottom: 48%; padding-top : 25px; height : 0; display : none; } .youtubevideo-wrapper .responsive-video iframe { position: absolute; top : 0; left : 0; width : 100%; height : 100%; } @media (min-width: 576px) { .youtubevideo-wrapper .button-wrapper { width : 70%; font-size : 1.125rem; line-height: 1.75; } .youtubevideo-wrapper .button-wrapper button { font-size: 1.125rem; } }