.rsts-main,.rsts-main *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rsts-header,.rsts-footer,.rsts-thumbs-header,.rsts-thumbs-footer{overflow:hidden}.rsts-view,.rsts-thumbs-view{position:relative}@media print{.rsts-view,.rsts-thumbs-view{position:static}}.rsts-crop,.rsts-thumbs-crop{position:relative;overflow:hidden}@media print{.rsts-crop,.rsts-thumbs-crop{position:static;overflow:visible;width:auto !important;height:auto !important;transform:none !important}}.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:absolute;left:0;top:0}@media print{.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:static;width:auto !important;height:auto !important;transform:none !important}.rsts-slides.rsts-slide-image img,.rsts-slides.rsts-slide-video img,.rsts-slides.rsts-thumbs-slide-image img,.rsts-slides.rsts-thumbs-slide-video img,.rsts-slide.rsts-slide-image img,.rsts-slide.rsts-slide-video img,.rsts-slide.rsts-thumbs-slide-image img,.rsts-slide.rsts-thumbs-slide-video img,.rsts-thumbs-slides.rsts-slide-image img,.rsts-thumbs-slides.rsts-slide-video img,.rsts-thumbs-slides.rsts-thumbs-slide-image img,.rsts-thumbs-slides.rsts-thumbs-slide-video img,.rsts-thumbs-slide.rsts-slide-image img,.rsts-thumbs-slide.rsts-slide-video img,.rsts-thumbs-slide.rsts-thumbs-slide-image img,.rsts-thumbs-slide.rsts-thumbs-slide-video img{width:100% !important;height:auto !important;margin:0 !important}}.rsts-slide,.rsts-thumbs-slide{overflow:hidden}@media print{.rsts-slide,.rsts-thumbs-slide{position:static}}.rsts-video-iframe,.rsts-thumbs-video-iframe{position:absolute;top:0;left:0;width:100%;height:100%}.rsts-type-slide .rsts-view,.rsts-thumbs-type-slide .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/openhand.cur"),default;cursor:-webkit-grab;cursor:-moz-grab;cursor:-ms-grab;cursor:-o-grab;cursor:grab}.rsts-type-slide.rsts-dragging .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/closedhand.cur"),default;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-ms-grabbing;cursor:-o-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rsts-type-slide.rsts-dragging-disabled .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging-disabled .rsts-thumbs-view{cursor:auto}@media print{.rsts-nav,.rsts-prev,.rsts-next,.rsts-overlay-prev,.rsts-overlay-next,.rsts-progress,.rsts-thumbs-nav,.rsts-thumbs-prev,.rsts-thumbs-next,.rsts-thumbs-overlay-prev,.rsts-thumbs-overlay-next,.rsts-thumbs-progress{display:none !important}} #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} .cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;--ccb-focus-clr: #00a4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar input:focus-visible:not(.cc-hide-focus)+label:before{outline:3px dashed var(--ccb-focus-clr);outline-offset:2px}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover,.contao-cookiebar .cc-btn:focus{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-focus:not(.cc-hide-focus):focus-visible{outline:3px dashed var(--ccb-focus-clr);outline-offset:-3px}.cc-invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;float:left}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@media(forced-colors){.contao-cookiebar input+label:after{border:1px solid currentColor}.cc-inner{border:1px solid currentColor}input.cc-group-half+label:after{margin-left:9px}}@media(prefers-reduced-motion){.contao-cookiebar{--ccb-anim-duration: 2s}}@media print{.contao-cookiebar{opacity:0}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}.cc-group>label{flex-grow:1;margin:5px 0 5px 10px}.cc-cookies{display:none;width:100%}.cc-detail-btn{padding:8px 10px;line-height:1.2rem}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px}.cc-detail-btn,.cc-detail-btn-details{display:inline-block;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn span:nth-child(2),.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn.cc-active span:nth-child(1),.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn.cc-active span:nth-child(2),.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn:hover,.cc-detail-btn-details:hover{background:rgba(0,0,0,0);color:var(--ccb-detail-clr-hvr, #717171)} /* ====================================================================================== Styleseet für das Grid-System. Keine Änderungen vornehmen! Datei: grid.css Datum: 14.05.2024 Autor: Marco Dittmer, Agentur Zentral Aufbau: 1. Grid-System 1.1. Sehr großer Bildschirm (min-width: 1300px) 1.2. Großer Bildschirm (max-width: 1299px) and (min-width: 1040px) 1.3. Mittelgroßer Bildschirm (max-width: 1039px) and (min-width: 780px) 1.4. Kleiner Bildschirm (max-width: 779px) and (min-width: 520px) 1.5. Sehr kleiner Bildschirm (max-width: 519px) ====================================================================================== */ /* ====================================================================================== 1. Grid-System ====================================================================================== */ .grid_info { background: #e9ecef !important; border: 1px solid #fff; } .row, .flexbox { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } *[class*="grid_"] { float: left; min-height: 1px; } #main, #left, #right { float: left; position: relative; } /* ====================================================================================== 1. Grid-System 1.1. Sehr großer Bildschirm ====================================================================================== */ /* Media Query Anfang */ @media screen and (min-width: 1300px) { .width_lg, .xlg_width_lg, .mod_cookiebar .inside { margin: 0 auto; width: 100%; } .boxed .width_lg, .boxed .xlg_width_lg, .boxed .mod_cookiebar .inside { width: 1240px; } .width_md, .xlg_width_md { margin: 0 auto; width: 80%; } .boxed .width_md, .boxed .xlg_width_md { width: 992px; } .width_sm, .xlg_width_sm { margin: 0 auto; width: 60%; } .boxed .width_sm, .boxed .xlg_width_sm { width: 744px; } .fullwidth, .xlg_fullwidth { width: 100%; } .header-left #header, .header-right #header { height: 100%; position: fixed; width: 270px; } .header-right #header { left: auto; right: 0; } .column_both #container, .column_left #container, .column_right #container, .header-left #teaser, .header-left #container, .header-left #unterzeile, .header-left #footer { margin: 0 auto; padding-left: 270px; width: 100%; } .header-right #teaser, .header-right #container, .header-right #unterzeile, .header-right #footer { margin: 0 auto; padding-right: 270px; width: 100%; } .column_both.boxed #container, .column_left.boxed #container, .column_right.boxed #container { width: 1270px; } .column_right.boxed #container { padding-left: 0; } .column_both #main, .column_left #main, .column_right #main { width: calc(100% - 270px); } .column_both.boxed #main { width: 730px; } .column_left.boxed #main, .column_right.boxed #main { width: 1000px; } .column_both #left, .column_both #right, .column_left #left, .column_right #right { width: 270px; } .column_left #main, .column_left #left { float: right; } .column_both.boxed #main .width_lg, .column_both.boxed #main .fullwidth, .column_both.boxed #main .xlg_width_lg, .column_both.boxed #main .xlg_fullwidth, .column_left.boxed #main .width_lg, .column_right.boxed #main .width_lg, .column_left.boxed #main .fullwidth, .column_right.boxed #main .fullwidth, .column_left.boxed #main .xlg_width_lg, .column_right.boxed #main .xlg_width_lg, .column_left.boxed #main .xlg_fullwidth, .column_right.boxed #main .xlg_fullwidth { padding: 0 15px; width: 100%; } .column_both #main .width_md, .column_left #main .width_md, .column_right #main .width_md, .column_both #main .xlg_width_md, .column_left #main .xlg_width_md, .column_right #main .xlg_width_md { width: 80%; } .column_both #main .width_sm, .column_left #main .width_sm, .column_right #main .width_sm, .column_both #main .xlg_width_sm, .column_left #main .xlg_width_sm, .column_right #main .xlg_width_sm { width: 60%; } .column_both #left .width_lg, .column_left #left .width_lg, .column_right #left .width_lg, .column_both #right .width_lg, .column_left #right .width_lg, .column_right #right .width_lg, .column_both #left .xlg_width_lg, .column_left #left .xlg_width_lg, .column_right #left .xlg_width_lg, .column_both #right .xlg_width_lg, .column_left #right .xlg_width_lg, .column_right #right .xlg_width_lg, .column_both #left .width_md, .column_left #left .width_md, .column_right #left .width_md, .column_both #right .width_md, .column_left #right .width_md, .column_right #right .width_md, .column_both #left .xlg_width_md, .column_left #left .xlg_width_md, .column_right #left .xlg_width_md, .column_both #right .xlg_width_md, .column_left #right .xlg_width_md, .column_right #right .xlg_width_md, .column_both #left .width_sm, .column_left #left .width_sm, .column_right #left .width_sm, .column_both #right .width_sm, .column_left #right .width_sm, .column_right #right .width_sm, .column_both #left .xlg_width_sm, .column_left #left .xlg_width_sm, .column_right #left .xlg_width_sm, .column_both #right .xlg_width_sm, .column_left #right .xlg_width_sm, .column_right #right .xlg_width_sm, .column_both #left .fullwidth, .column_left #left .fullwidth, .column_right #left .fullwidth, .column_both #right .fullwidth, .column_left #right .fullwidth, .column_right #right .fullwidth, .column_both #left .xlg_fullwidth, .column_left #left .xlg_fullwidth, .column_right #left .xlg_fullwidth, .column_both #right .xlg_fullwidth, .column_left #right .xlg_fullwidth, .column_right #right .xlg_fullwidth { padding: 0 15px; width: 100%; } .boxed .row { margin-left: -15px; margin-right: -15px; } .boxed .fullwidth .row, .boxed .xlg_fullwidth .row { margin-left: 0; margin-right: 0; } .row_xlg_bottom_offset_xlg { padding-bottom: 55px; } .row_xlg_bottom_offset_lg { padding-bottom: 45px; } .row_xlg_bottom_offset_md { padding-bottom: 35px; } .row_xlg_bottom_offset_sm { padding-bottom: 25px; } .row_xlg_bottom_offset_xsm { padding-bottom: 15px; } .row_xlg_top_offset_xlg { padding-top: 55px; } .row_xlg_top_offset_lg { padding-top: 45px; } .row_xlg_top_offset_md { padding-top: 35px; } .row_xlg_top_offset_sm { padding-top: 25px; } .row_xlg_top_offset_xsm { padding-top: 15px; } .col_xlg_no_offset { padding: 0 !important; } .col_xlg_bottom_no_offset { padding-bottom: 0 !important; } .col_xlg_left_no_offset { padding-left: 0 !important; } .col_xlg_right_no_offset { padding-right: 0 !important; } .col_xlg_top_no_offset { padding-top: 0 !important; } *[class*="grid_"] { padding: 15px; } .grid_xlg_0 { display: none; } .grid_xlg_1 { width: 8.33333333%; } .grid_xlg_2 { width: 16.66666667%; } .grid_xlg_3 { width: 25%; } .grid_xlg_4 { width: 33.33333333%; } .grid_xlg_5 { width: 41.66666667%; } .grid_xlg_6 { width: 50%; } .grid_xlg_7 { width: 58.33333333%; } .grid_xlg_8 { width: 66.66666667%; } .grid_xlg_9 { width: 75%; } .grid_xlg_10 { width: 83.33333333%; } .grid_xlg_11 { width: 91.66666667%; } .grid_xlg_12 { width: 100%; } /* Media Query Ende */ } /* ====================================================================================== 1. Grid-System 1.2. Großer Bildschirm ====================================================================================== */ /* Media Query Anfang */ @media screen and (max-width: 1299px) and (min-width: 1040px) { .width_lg, .xlg_width_lg, .mod_cookiebar .inside { margin: 0 auto; width: 100%; } .boxed .width_lg, .boxed .lg_width_lg, .boxed .mod_cookiebar .inside { width: 980px; } .width_md, .lg_width_md { margin: 0 auto; width: 80%; } .boxed .width_md, .boxed .lg_width_md { width: 784px; } .width_sm, .lg_width_sm { margin: 0 auto; width: 60%; } .boxed .width_sm, .boxed .lg_width_sm { width: 588px; } .fullwidth, .lg_fullwidth { width: 100%; } .header-left #header, .header-right #header { height: 100%; position: fixed; width: 235px; } .header-right #header { left: auto; right: 0; } .column_both #container, .column_left #container, .column_right #container, .header-left #teaser, .header-left #container, .header-left #unterzeile, .header-left #footer { margin: 0 auto; padding-left: 235px; width: 100%; } .header-right #teaser, .header-right #container, .header-right #unterzeile, .header-right #footer { margin: 0 auto; padding-right: 235px; width: 100%; } .column_both.boxed #container, .column_left.boxed #container, .column_right.boxed #container { width: 1010px; } .column_right.boxed #container { padding-left: 0; } .column_both #main, .column_left #main, .column_right #main { width: calc(100% - 235px); } .column_both.boxed #main { width: 540px; } .column_left.boxed #main, .column_right.boxed #main { width: 775px; } .column_both #left, .column_both #right, .column_left #left, .column_right #right { width: 235px; } .column_left #main, .column_left #left { float: right; } .column_both.boxed #main .width_lg, .column_both.boxed #main .fullwidth, .column_both.boxed #main .lg_width_lg, .column_both.boxed #main .lg_fullwidth, .column_left.boxed #main .width_lg, .column_right.boxed #main .width_lg, .column_left.boxed #main .fullwidth, .column_right.boxed #main .fullwidth, .column_left.boxed #main .lg_width_lg, .column_right.boxed #main .lg_width_lg, .column_left.boxed #main .lg_fullwidth, .column_right.boxed #main .lg_fullwidth { padding: 0 15px; width: 100%; } .column_both #main .width_md, .column_left #main .width_md, .column_right #main .width_md, .column_both #main .lg_width_md, .column_left #main .lg_width_md, .column_right #main .lg_width_md { width: 80%; } .column_both #main .width_sm, .column_left #main .width_sm, .column_right #main .width_sm, .column_both #main .lg_width_sm, .column_left #main .lg_width_sm, .column_right #main .lg_width_sm { width: 60%; } .column_both #left .width_lg, .column_left #left .width_lg, .column_right #left .width_lg, .column_both #right .width_lg, .column_left #right .width_lg, .column_right #right .width_lg, .column_both #left .lg_width_lg, .column_left #left .lg_width_lg, .column_right #left .lg_width_lg, .column_both #right .lg_width_lg, .column_left #right .lg_width_lg, .column_right #right .lg_width_lg, .column_both #left .width_md, .column_left #left .width_md, .column_right #left .width_md, .column_both #right .width_md, .column_left #right .width_md, .column_right #right .width_md, .column_both #left .lg_width_md, .column_left #left .lg_width_md, .column_right #left .lg_width_md, .column_both #right .lg_width_md, .column_left #right .lg_width_md, .column_right #right .lg_width_md, .column_both #left .width_sm, .column_left #left .width_sm, .column_right #left .width_sm, .column_both #right .width_sm, .column_left #right .width_sm, .column_right #right .width_sm, .column_both #left .lg_width_sm, .column_left #left .lg_width_sm, .column_right #left .lg_width_sm, .column_both #right .lg_width_sm, .column_left #right .lg_width_sm, .column_right #right .lg_width_sm, .column_both #left .fullwidth, .column_left #left .fullwidth, .column_right #left .fullwidth, .column_both #right .fullwidth, .column_left #right .fullwidth, .column_right #right .fullwidth, .column_both #left .lg_fullwidth, .column_left #left .lg_fullwidth, .column_right #left .lg_fullwidth, .column_both #right .lg_fullwidth, .column_left #right .lg_fullwidth, .column_right #right .lg_fullwidth { padding: 0 15px; width: 100%; } .boxed .row { margin-left: -15px; margin-right: -15px; } .boxed .fullwidth .row, .boxed .lg_fullwidth .row { margin-left: 0; margin-right: 0; } .row_lg_bottom_offset_xlg { padding-bottom: 55px; } .row_lg_bottom_offset_lg { padding-bottom: 45px; } .row_lg_bottom_offset_md { padding-bottom: 35px; } .row_lg_bottom_offset_sm { padding-bottom: 25px; } .row_lg_bottom_offset_xsm { padding-bottom: 15px; } .row_lg_top_offset_xlg { padding-top: 55px; } .row_lg_top_offset_lg { padding-top: 45px; } .row_lg_top_offset_md { padding-top: 35px; } .row_lg_top_offset_sm { padding-top: 25px; } .row_lg_top_offset_xsm { padding-top: 15px; } .col_lg_no_offset { padding: 0 !important; } .col_lg_bottom_no_offset { padding-bottom: 0 !important; } .col_lg_left_no_offset { padding-left: 0 !important; } .col_lg_right_no_offset { padding-right: 0 !important; } .col_lg_top_no_offset { padding-top: 0 !important; } *[class*="grid_"] { padding: 15px; } .grid_lg_0 { display: none; } .grid_lg_1 { width: 8.33333333%; } .grid_lg_2 { width: 16.66666667%; } .grid_lg_3 { width: 25%; } .grid_lg_4 { width: 33.33333333%; } .grid_lg_5 { width: 41.66666667%; } .grid_lg_6 { width: 50%; } .grid_lg_7 { width: 58.33333333%; } .grid_lg_8 { width: 66.66666667%; } .grid_lg_9 { width: 75%; } .grid_lg_10 { width: 83.33333333%; } .grid_lg_11 { width: 91.66666667%; } .grid_lg_12 { width: 100%; } /* Media Query Ende */ } /* ====================================================================================== 1. Grid-System 1.3. Mittelgroßer Bildschirm ====================================================================================== */ /* Media Query Anfang */ @media screen and (max-width: 1039px) and (min-width: 780px) { .width_lg, .md_width_lg, .mod_cookiebar .inside { margin: 0 auto; width: 100%; } .boxed .width_lg, .boxed .md_width_lg, .boxed .mod_cookiebar .inside { width: 720px; } .width_md, .md_width_md { margin: 0 auto; width: 80%; } .boxed .width_md, .boxed .md_width_md { width: 576px; } .width_sm, .md_width_sm { margin: 0 auto; width: 60%; } .boxed .width_sm, .boxed .md_width_sm { width: 432px; } .fullwidth, .md_fullwidth { width: 100%; } .header-left #header, .header-right #header { height: 100%; position: fixed; width: 185px; } .header-right #header { left: auto; right: 0; } .column_both #container, .column_left #container, .column_right #container, .header-left #teaser, .header-left #container, .header-left #unterzeile, .header-left #footer { margin: 0 auto; padding-left: 185px; width: 100%; } .header-right #teaser, .header-right #container, .header-right #unterzeile, .header-right #footer { margin: 0 auto; padding-right: 185px; width: 100%; } .column_both.boxed #container, .column_left.boxed #container, .column_right.boxed #container { width: 740px; } .column_right.boxed #container { padding-left: 0; } .column_both #main, .column_left #main, .column_right #main { width: calc(100% - 185px); } .column_both.boxed #main { width: 370px; } .column_left.boxed #main, .column_right.boxed #main { width: 555px; } .column_both #left, .column_both #right, .column_left #left, .column_right #right { width: 185px; } .column_left #main, .column_left #left { float: right; } .column_both.boxed #main .width_lg, .column_both.boxed #main .fullwidth, .column_both.boxed #main .md_width_lg, .column_both.boxed #main .md_fullwidth, .column_left.boxed #main .width_lg, .column_right.boxed #main .width_lg, .column_left.boxed #main .fullwidth, .column_right.boxed #main .fullwidth, .column_left.boxed #main .md_width_lg, .column_right.boxed #main .md_width_lg, .column_left.boxed #main .md_fullwidth, .column_right.boxed #main .md_fullwidth { padding: 0 10px; width: 100%; } .column_both #main .width_md, .column_left #main .width_md, .column_right #main .width_md, .column_both #main .md_width_md, .column_left #main .md_width_md, .column_right #main .md_width_md { width: 80%; } .column_both #main .width_sm, .column_left #main .width_sm, .column_right #main .width_sm, .column_both #main .md_width_sm, .column_left #main .md_width_sm, .column_right #main .md_width_sm { width: 60%; } .column_both #left .width_lg, .column_left #left .width_lg, .column_right #left .width_lg, .column_both #right .width_lg, .column_left #right .width_lg, .column_right #right .width_lg, .column_both #left .md_width_lg, .column_left #left .md_width_lg, .column_right #left .md_width_lg, .column_both #right .md_width_lg, .column_left #right .md_width_lg, .column_right #right .md_width_lg, .column_both #left .width_md, .column_left #left .width_md, .column_right #left .width_md, .column_both #right .width_md, .column_left #right .width_md, .column_right #right .width_md, .column_both #left .md_width_md, .column_left #left .md_width_md, .column_right #left .md_width_md, .column_both #right .md_width_md, .column_left #right .md_width_md, .column_right #right .md_width_md, .column_both #left .width_sm, .column_left #left .width_sm, .column_right #left .width_sm, .column_both #right .width_sm, .column_left #right .width_sm, .column_right #right .width_sm, .column_both #left .md_width_sm, .column_left #left .md_width_sm, .column_right #left .md_width_sm, .column_both #right .md_width_sm, .column_left #right .md_width_sm, .column_right #right .md_width_sm, .column_both #left .fullwidth, .column_left #left .fullwidth, .column_right #left .fullwidth, .column_both #right .fullwidth, .column_left #right .fullwidth, .column_right #right .fullwidth, .column_both #left .md_fullwidth, .column_left #left .md_fullwidth, .column_right #left .md_fullwidth, .column_both #right .md_fullwidth, .column_left #right .md_fullwidth, .column_right #right .md_fullwidth { padding: 0 10px; width: 100%; } .boxed .row { margin-left: -10px; margin-right: -10px; } .boxed .fullwidth .row, .boxed .md_fullwidth .row { margin-left: 0; margin-right: 0; } .row_md_bottom_offset_xlg { padding-bottom: 55px; } .row_md_bottom_offset_lg { padding-bottom: 45px; } .row_md_bottom_offset_md { padding-bottom: 35px; } .row_md_bottom_offset_sm { padding-bottom: 25px; } .row_md_bottom_offset_xsm { padding-bottom: 15px; } .row_md_top_offset_xlg { padding-top: 55px; } .row_md_top_offset_lg { padding-top: 45px; } .row_md_top_offset_md { padding-top: 35px; } .row_md_top_offset_sm { padding-top: 25px; } .row_md_top_offset_xsm { padding-top: 15px; } .col_md_no_offset { padding: 0 !important; } .col_md_bottom_no_offset { padding-bottom: 0 !important; } .col_md_left_no_offset { padding-left: 0 !important; } .col_md_right_no_offset { padding-right: 0 !important; } .col_md_top_no_offset { padding-top: 0 !important; } *[class*="grid_"] { padding: 10px; } .grid_md_0 { display: none; } .grid_md_1 { width: 8.33333333%; } .grid_md_2 { width: 16.66666667%; } .grid_md_3 { width: 25%; } .grid_md_4 { width: 33.33333333%; } .grid_md_5 { width: 41.66666667%; } .grid_md_6 { width: 50%; } .grid_md_7 { width: 58.33333333%; } .grid_md_8 { width: 66.66666667%; } .grid_md_9 { width: 75%; } .grid_md_10 { width: 83.33333333%; } .grid_md_11 { width: 91.66666667%; } .grid_md_12 { width: 100%; } /* Media Query Ende */ } /* ====================================================================================== 1. Grid-System 1.4. Kleiner Bildschirm ====================================================================================== */ /* Media Query Anfang */ @media screen and (max-width: 779px) and (min-width: 520px) { .width_lg, .xsm_width_lg, .width_md, .xsm_width_md, .width_sm, .xsm_width_sm, .fullwidth, .xsm_fullwidth, .mod_cookiebar .inside { width: 100%; } #main, #left, #right { float: none; margin-left: 0; margin-right: 0; } .row_sm_bottom_offset_xlg { padding-bottom: 55px; } .row_sm_bottom_offset_lg { padding-bottom: 45px; } .row_sm_bottom_offset_md { padding-bottom: 35px; } .row_sm_bottom_offset_sm { padding-bottom: 25px; } .row_sm_bottom_offset_xsm { padding-bottom: 15px; } .row_sm_top_offset_xlg { padding-top: 55px; } .row_sm_top_offset_lg { padding-top: 45px; } .row_sm_top_offset_md { padding-top: 35px; } .row_sm_top_offset_sm { padding-top: 25px; } .row_sm_top_offset_xsm { padding-top: 15px; } .col_sm_no_offset { padding: 0 !important; } .col_sm_bottom_no_offset { padding-bottom: 0 !important; } .col_sm_left_no_offset { padding-left: 0 !important; } .col_sm_right_no_offset { padding-right: 0 !important; } .col_sm_top_no_offset { padding-top: 0 !important; } *[class*="grid_"] { padding: 10px; } .grid_sm_0 { display: none; } .grid_sm_1 { width: 8.33333333%; } .grid_sm_2 { width: 16.66666667%; } .grid_sm_3 { width: 25%; } .grid_sm_4 { width: 33.33333333%; } .grid_sm_5 { width: 41.66666667%; } .grid_sm_6 { width: 50%; } .grid_sm_7 { width: 58.33333333%; } .grid_sm_8 { width: 66.66666667%; } .grid_sm_9 { width: 75%; } .grid_sm_10 { width: 83.33333333%; } .grid_sm_11 { width: 91.66666667%; } .grid_sm_12 { width: 100%; } /* Media Query Ende */ } /* ====================================================================================== 1. Grid-System 1.5. Sehr kleiner Bildschirm ====================================================================================== */ /* Media Query Anfang */ @media screen and (max-width: 519px) { .width_lg, .xsm_width_lg, .width_md, .xsm_width_md, .width_sm, .xsm_width_sm, .fullwidth, .xsm_fullwidth, .mod_cookiebar .inside { width: 100%; } #main, #left, #right { float: none; margin-left: 0; margin-right: 0; } .row_xsm_bottom_offset_xlg { padding-bottom: 55px; } .row_xsm_bottom_offset_lg { padding-bottom: 45px; } .row_xsm_bottom_offset_md { padding-bottom: 35px; } .row_xsm_bottom_offset_sm { padding-bottom: 25px; } .row_xsm_bottom_offset_xsm { padding-bottom: 15px; } .row_xsm_top_offset_xlg { padding-top: 55px; } .row_xsm_top_offset_lg { padding-top: 45px; } .row_xsm_top_offset_md { padding-top: 35px; } .row_xsm_top_offset_sm { padding-top: 25px; } .row_xsm_top_offset_xsm { padding-top: 15px; } .col_xsm_no_offset { padding: 0 !important; } .col_xsm_bottom_no_offset { padding-bottom: 0 !important; } .col_xsm_left_no_offset { padding-left: 0 !important; } .col_xsm_right_no_offset { padding-right: 0 !important; } .col_xsm_top_no_offset { padding-top: 0 !important; } *[class*="grid_"] { padding: 10px; } .grid_xsm_0 { display: none; } .grid_xsm_1 { width: 8.33333333%; } .grid_xsm_2 { width: 16.66666667%; } .grid_xsm_3 { width: 25%; } .grid_xsm_4 { width: 33.33333333%; } .grid_xsm_5 { width: 41.66666667%; } .grid_xsm_6 { width: 50%; } .grid_xsm_7 { width: 58.33333333%; } .grid_xsm_8 { width: 66.66666667%; } .grid_xsm_9 { width: 75%; } .grid_xsm_10 { width: 83.33333333%; } .grid_xsm_11 { width: 91.66666667%; } .grid_xsm_12 { width: 100%; } /* Media Query Ende */ } /* ====================================================================================== Styleseet für das Basislayout. Keine Änderungen vornehmen! Datei: style.css Datum: 20.01.2025 Autor: Marco Dittmer, Agentur Zentral Aufbau: 1. Allgemeine Styles 1.1. Typografie 1.1.1. Webfonts 1.1.2. Textstrukturierung und Überschriften 1.1.3. Icon-Größen 1.2. Farben 1.2.1. Text 1.2.2. Hintergrund 1.2.3. Rahmen 1.2.4. Umrisse 1.2.5. Schatten 1.3. Ausrichtung 1.4. Buttons 1.5. Formularfelder 1.6. Radien 1.7. Rahmen 1.8. Umrisse 1.9. Transparenz 1.10. Overlays 1.11. Zoom 1.12. Übergang 2. Layout 2.1. Kopfzeile 2.2. Hauptzeile 2.2.1. Linke Spalte 2.2.2. Hauptspalte 2.2.3. Rechte Spalte 2.3. Unterzeile 2.4. Fußzeile 3. Core-Elemente 3.1. Text-Elemente 3.1.1. Überschrift 3.1.2. Text 3.1.3. Aufzählung 3.1.4. Tabelle 3.1.5. Code 3.1.6. Markdown 3.2. Akkordeon 3.3. Content-Slider 3.4. Link-Elemente 3.4.1. Hyperlink 3.4.2. Top-Link 3.5. Media-Elemente 3.5.1. Bild 3.5.2. Galerie 3.5.3. Video/Audio 3.5.4. YouTube 3.5.5. Vimeo 3.5.6. Colorbox 3.6. Datei-Elemente 3.6.1. Download 3.6.2. Downloads 3.7. Include-Elemente 3.7.1. Formulare 3.7.2. Kommentare 3.8. Elementgenerator 3.8.1. Teaserbild 3.8.2. Teaserbox 3.8.3. Text/Bild-Kachel 3.8.4. Hinweisbox 3.8.5. Teambox 3.8.6. Zitatbox 3.8.7. Preistabelle 3.8.8. Iconbox 3.8.9. Zeitstrahl 3.8.10. Landkarte 3.8.11. iframe-Element 3.8.12. Anker-Element 3.8.13. Umschaltumschlag 3.8.14. Tabs 3.8.15. Animierte Zahlen 4. Frontend-Module 4.1. Navigation 4.1.1. Umschaltnavigation 4.1.2. Kopfnavigation 4.1.3. Hauptnavigation 4.1.4. Lokale Navigation 4.1.5. Nachrichtenarchiv-Navigation 4.1.6. Fußnavigation 4.1.7. Navigationspfad 4.1.8. Seitennummerierung 4.1.9. HTML-Sitemap 4.1.10. Sprachenwechsler 4.2. Benutzer 4.3. Anwendungen 4.3.1. Suchmaschine 4.4. Verschiedenes 4.4.1. Cookiebar 4.5. Events 4.6. FAQ 4.7. Nachrichten 4.7.1 Nachrichtenarchiv und -liste 4.7.2 Nachrichtenleser 4.8. Newsletter 5. Wartungsmodus 6. Dark Mode 6.1. Switch-Button 6.2. Farben 6.2.1. Text 6.2.2. Hintergrund 6.2.3. Rahmen 6.2.4. Schatten 7. Eigene Klassen ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles ====================================================================================== */ * { /* keine Zuaddierung durch padding */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a, abbr, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, spanstrike, strong, sub, summary, sup, table, textarea, tbody, td, tfoot, th, thead, time, tr, tt, ul, var, video { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } #container::after, article::after, aside::after, blockquote::after, details::after, figcaption::after, figure::after, footer::after, header::after, hgroup::after, menu::after, nav::after, q::after, section::after, .custom::after { clear: both; content: ""; display: table; } *[class*="ce_"], *[class*="mod_"] { position: relative; z-index: 0; } html { min-height: 100%; overflow-y: scroll; position: relative; scroll-behavior: smooth; } html.active { overflow-y: hidden; } article, aside, figcaption, figure, footer, header, main, nav, section, .custom { /* Korrektur der Darstellung von HTML5-Elementen in IE */ display: block; } fieldset, img, iframe { border: 0; } img { border: 0; display: block; height: auto; width: 100%; vertical-align: bottom; } .invisible, .anker, .ce_anker_element { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .cover { -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } .block { overflow: hidden; } #clear, .clear { clear: both; } .fixed_on_top.fixed { position: fixed; } /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.1. Webfonts ====================================================================================== */ /* open-sans-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../../files/theme/fonts/webfonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../../files/theme/fonts/webfonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../../files/theme/fonts/webfonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.2. Textstrukturierung und Überschriften ====================================================================================== */ body, button, input:not([type="radio"]):not([type="checkbox"]), textarea, select { font-family: 'Open Sans', sans-serif; font-size: 16px; font-size: 1rem; font-style: normal; line-height: 1.25; word-wrap: break-word; } h1, h2, h3, h4, h5, h6, p, ul, ol { padding: 7px 0; } h1, h2, h3, h4, h5, h6, strong, .ce_headline.standard { font-weight: 700; } h1, .ce_headline.standard { font-size: 32px; font-size: 2rem; } h2 { font-size: 24px; font-size: 1.5rem; } h3 { font-size: 22px; font-size: 1.375rem; } h4 { font-size: 20px; font-size: 1.250rem; } h5 { font-size: 18px; font-size: 1.125rem; } h6 { font-size: 16px; font-size: 1rem; } small, .small, .mod_search .relevance { font-size: 65%; } button, p.button, input, select, textarea { font-family: inherit; font-size: 99%; font-weight: inherit; line-height: 1; } .uppercase { text-transform: uppercase; } /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.3. Icon-Größen ====================================================================================== */ .icon i, .icon svg, .icon span { border-color: transparent; border-style: solid; border-width: inherit; line-height: 1.25; overflow: visible; padding: 14px; } .icon span { display: inline-block; } .icon_xlg i, .icon_xlg svg, .icon_xlg span { font-size: 60px; font-size: 3.75rem; height: 94px; width: 94px; } .icon_lg i, .icon_lg svg, .icon_lg span { font-size: 50px; font-size: 3.125rem; height: 84px; width: 84px; } .icon_md i, .icon_md svg, .icon_md span { font-size: 40px; font-size: 2.5rem; height: 74px; width: 74px; } .icon_sm i, .icon_sm svg, .icon_sm span { font-size: 30px; font-size: 1.875rem; height: 64px; width: 64px; } .icon_xsm i, .icon_xsm svg, .icon_xsm span { font-size: 20px; font-size: 1.25rem; height: 54px; width: 54px; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben ====================================================================================== */ .colorbox { bottom: 0; display: block; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 0; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.1. Text ====================================================================================== */ /* Standardfarben */ .color_white, button.button_dark, .button_dark p.button a, .button_dark button.submit, .ce_toplink.button_dark a, .button_dark p.button a:hover, .ce_toplink.button_dark a:hover, button.button_success, .button_success p.button a, .button_success button.submit, .ce_toplink.button_success a, .button_success p.button a:hover, .ce_toplink.button_success a:hover, button.button_info, .button_info p.button a, .button_info button.submit, .ce_toplink.button_info a, .button_info p.button a:hover, .ce_toplink.button_info a:hover, button.button_danger, .button_danger p.button a, .button_danger button.submit, .ce_toplink.button_danger a, .button_danger p.button a:hover, .ce_toplink.button_danger a:hover, button.button_primary, .button_primary p.button a, .button_primary button.submit, .ce_toplink.button_primary a, .button_primary p.button a:hover, .ce_toplink.button_primary a:hover, button.button_secondary, .button_secondary p.button a, .button_secondary button.submit, .ce_toplink.button_secondary a, .button_secondary p.button a:hover, .ce_toplink.button_secondary a:hover, .icon_white i, i.icon_white, .ce_text abbr[title]:hover::before, .ce_text kbd, kbd a, kbd a:hover, #colorbox #cboxClose::after, #colorbox #cboxPrevious::after, #colorbox #cboxNext::after, #colorbox #cboxCurrent, #colorbox #cboxTitle, .ce_hinweisbox.hinweisbox_black, .ce_teaserbild .scrolldown.color_white a, .ce_zitatbox.icon_white blockquote::before, .pagination ul li strong, .mod_calendar .calendar_body .days.today .label { color: #fff; } .invert, .invert h1, .invert h1 a, .invert h2, .invert h2 a, .invert h3, .invert h3 a, .invert h4, .invert h4 a, .invert h5, .invert h5 a, .invert h6, .invert h6 a, .invert i, .invert i a, .invert li a, .invert p, .invert p:not(.button) a, .invert strong, .ce_teaserbox.button_link .invert a, .ce_teaserbox.button_link .invert a:hover, .ce_teaserbox.button_klammer_link .invert a, .ce_teaserbox.button_klammer_link .invert a:hover, .ce_teaserbox .box_outside .invert_outside, .ce_teaserbox .box_outside .invert_outside h1, .invert_outside h1 a, .ce_teaserbox .box_outside .invert_outside h2, .invert_outside h2 a, .ce_teaserbox .box_outside .invert_outside h3, .invert_outside h3 a, .ce_teaserbox .box_outside .invert_outside h4, .invert_outside h4 a, .ce_teaserbox .box_outside .invert_outside h5, .invert_outside h5 a, .ce_teaserbox .box_outside .invert_outside h6, .invert_outside h6 a, .ce_teaserbox .box_outside .invert_outside i, .invert_outside i a, .ce_teaserbox .box_outside .invert_outside li a, .ce_teaserbox .box_outside .invert_outside p, .invert_outside p:not(.button) a, .ce_teaserbox .box_outside .invert_outside strong, .ce_teaserbox.button_link .box_outside .invert_outside a, .ce_teaserbox.button_link .box_outside .invert_outside a:hover, .ce_teaserbox.button_klammer_link .box_outside .invert_outside a, .ce_teaserbox.button_klammer_link .box_outside .invert_outside a:hover, .ce_text_bild_kachel .invert a.button_link, .ce_text_bild_kachel .invert a.button_link:hover, .ce_text_bild_kachel .invert a.button_klammer_link, .ce_text_bild_kachel .invert a.button_klammer_link:hover { color: #fff !important; } /* Media Query Anfang */ @media screen and (min-width: 780px) { .invert_inside, .invert_inside h1, .invert_inside h1 a, .invert_inside h2, .invert_inside h2 a, .invert_inside h3, .invert_inside h3 a, .invert_inside h4, .invert_inside h4 a, .invert_inside h5, .invert_inside h5 a, .invert_inside h6, .invert_inside h6 a, .invert_inside i, .invert_inside i a, .invert_inside li a, .invert_inside p, .invert_inside p:not(.button) a, .invert_inside strong, .ce_teaserbox.button_link .invert_inside a, .ce_teaserbox.button_link .invert_inside a:hover, .ce_teaserbox.button_klammer_link .invert_inside a, .ce_teaserbox.button_klammer_link .invert_inside a:hover { color: #fff !important; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 780px) { .invert_outside, .invert_outside h1, .invert_outside h1 a, .invert_outside h2, .invert_outside h2 a, .invert_outside h3, .invert_outside h3 a, .invert_outside h4, .invert_outside h4 a, .invert_outside h5, .invert_outside h5 a, .invert_outside h6, .invert_outside h6 a, .invert_outside i, .invert_outside i a, .invert_outside li a, .invert_outside p, .invert_outside p:not(.button) a, .invert_outside strong, .ce_teaserbox.button_link .invert_outside a, .ce_teaserbox.button_link .invert_outside a:hover, .ce_teaserbox.button_klammer_link .invert_outside a, .ce_teaserbox.button_klammer_link .invert_outside a:hover { color: #fff !important; } /* Media Query Ende */ } .color_light, .icon_light i, i.icon_light, .ce_teaserbild .scrolldown.color_light a, .ce_zitatbox blockquote::before { color: #e9ecef; } .color_dark, body, input:not([type="radio"]):not([type="checkbox"]), textarea, select, button.button_light, .button_light p.button a, .button_light button.submit, .ce_toplink.button_light a, .button_light p.button a:hover, .ce_toplink.button_light a:hover, button.button_default, .button_default p.button a, .button_default button.submit, .ce_toplink.button_default a, .button_default p.button a:hover, .ce_toplink.button_default a:hover, button.button_warning, .button_warning p.button a, .button_warning button.submit, .ce_toplink.button_warning a, .button_warning p.button a:hover, .ce_toplink.button_warning a:hover, #nav-top a, #nav-top strong, #nav-main a, #nav-main strong, #nav-main ul.level_1 > li.submenu > a::after, #nav-main ul.level_1 > li.submenu > strong::after, .nav_sub a, .nav_sub strong, .ce_hinweisbox.hinweisbox_white, .icon_dark i, i.icon_dark, .ce_teambox .ce_headline a, .ce_teaserbild .scrolldown.color_dark a, .ce_teaserbox .ce_headline a, .ce_teaserbox .highlight, .ce_zitatbox.icon_dark blockquote::before, .mod_search h3 a, .mod_newsarchive h2 a, .mod_newslist h2 a { color: #343a40; } .color_black, .icon_black i, i.icon_black, .ce_teaserbild .scrolldown.color_black a, .ce_zitatbox.icon_black blockquote::before { color: #000; } /* Erweiterte Farben */ .color_success, .icon_success i, i.icon_success, .ce_teaserbild .scrolldown.color_success a, .ce_zitatbox.icon_success blockquote::before { color: #28a745; } .color_info, .icon_info i, i.icon_info, .ce_teaserbild .scrolldown.color_info a, .ce_zitatbox.icon_info blockquote::before { color: #17a2b8; } .color_warning, .icon_warning i, i.icon_warning, .ce_teaserbild .scrolldown.color_warning a, .ce_zitatbox.icon_warning blockquote::before { color: #ffc107; } .color_danger, .icon_danger i, i.icon_danger, .ce_teaserbild .scrolldown.color_danger a, .ce_zitatbox.icon_danger blockquote::before, span.mandatory { color: #dc3545; } .color_primary, a, button.button_link, .button_link p.button a, .button_link button.submit, .ce_toplink.button_link a, button.button_klammer_link, .button_klammer_link p.button a, .button_klammer_link button.submit, .ce_toplink.button_klammer_link a, .icon_primary i, i.icon_primary, .ce_teaserbild .scrolldown.color_primary a, .ce_zitatbox.icon_primary blockquote::before { color: #007bff; } .color_secondary, #nav-breadcrumb ul li, #nav-breadcrumb ul li + li::before, blockquote footer, .icon_secondary i, i.icon_secondary, .ce_download .size, .ce_downloads .size, .ce_preistabelle .preisinfo, .ce_preistabelle .services_list .item.deactivate, .ce_teaserbild .scrolldown.color_secondary a, .ce_zitatbox.icon_secondary blockquote::before, .mod_search .relevance { color: #6c757d; } /* Pastellfarben */ .hinweisbox_light, .ce_sliderStart .slider-control .slider-prev:hover::after, .ce_sliderStart .slider-control .slider-next:hover::after, .ce_sliderStart .slider-control .slider-menu b { color: #818182; } .hinweisbox_dark { color: #e4e4e4; } .hinweisbox_success, .ce_comments .tl_confirm, .mod_changePassword p.tl_confirm, .mod_lostPassword p.confirm, .mod_personalData p.tl_confirm, .mod_registration p.confirm, .mod_subscribe p.confirm { color: #155724; } .hinweisbox_info, .mod_search .info { color: #0c5460; } .hinweisbox_warning { color: #856404; } .hinweisbox_danger, .mod_changePassword p.error, .mod_login .error, .mod_lostPassword p.error, .mod_registration p.error, .mod_subscribe p.error, .mod_unsubscribe p.error { color: #721c24; } .hinweisbox_primary, a:hover, button.button_link:hover, .button_link p.button a:hover, .button_link button.submit:hover, .ce_toplink.button_link a:hover, button.button_klammer_link:hover, .button_klammer_link p.button a:hover, .button_klammer_link button.submit:hover, .ce_toplink.button_klammer_link a:hover { color: #004085; } .hinweisbox_secondary, .hinweisbox_secondary_light, .ce_sliderStart .slider-control .slider-prev::after, .ce_sliderStart .slider-control .slider-next::after, .ce_sliderStart .slider-control .slider-menu b.active, .mod_search .header { color: #383d41; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.2. Hintergrund ====================================================================================== */ mark { background: #ffff00; } /* Standardfarben */ .bg_white, button.button_default, .button_default p.button, .button_default button.submit, .ce_toplink.button_default, .ce_hinweisbox.hinweisbox_white, .bg_icon_white i, .bg_icon_white svg, #nav-main ul.level_2, #nav-main ul.level_4, .nav_sub ul.level_1, .nav_sub ul.level_3, .ce_download::before, .ce_downloads::before, .ce_text hr.bg_white, .ce_text_bild_kachel .box_img.arrow::before, .ce_text_bild_kachel.bg_white .box_img.arrow::before, .ce_zeitstrahl.timeline_white::before, .ce_zeitstrahl.timeline_white .box_text::before, .ce_zeitstrahl .box_date::before, .ce_zeitstrahl.bg_icon_white .box_date::before, .ce_zitatbox.zitatbox_3 blockquote::before, .ce_zitatbox.zitatbox_3.bg_icon_white blockquote::before, .layout_latest, .switch_dark_mode .slider::before { background: #fff; } .bg_light, button.button_light, .button_light p.button, .button_light button.submit, .ce_toplink.button_light, #nav-main ul.level_3, .nav_sub ul.level_2, #nav-breadcrumb ul, .filter_reset, .ce_accordion .toggler, .ce_code code.hljs, .ce_gallery figcaption, .ce_hinweisbox.hinweisbox_light, .ce_hinweisbox.hinweisbox_secondary_light, .bg_icon_light i, .bg_icon_light svg, .ce_image figcaption, .ce_sliderStart .slider-control, .ce_tabs > label, .ce_text hr, .ce_text hr.bg_light, .ce_text pre, .ce_text_bild_kachel.bg_light .box_img.arrow::before, .ce_zeitstrahl.bg_icon_light .box_date::before, .ce_zeitstrahl.timeline_light::before, .ce_zeitstrahl.timeline_light .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_light blockquote::before, .mod_calendar .calendar_head .days, .mod_calendar .calendar_body .days .label, .pagination ul li a:hover, tfoot td, th { background: #e9ecef; } .bg_dark, button.button_dark, .button_dark p.button, .button_dark button.submit, .ce_toplink.button_dark, .ce_hinweisbox.hinweisbox_dark, .bg_icon_dark i, .bg_icon_dark svg, .ce_text abbr[title]:hover::before, .ce_text hr.bg_dark, .ce_text kbd, .ce_text_bild_kachel.bg_dark .box_img.arrow::before, .ce_zeitstrahl.bg_icon_dark .box_date::before, .ce_zeitstrahl::before, .ce_zeitstrahl .box_text::before, .ce_zeitstrahl.timeline_dark::before, .ce_zeitstrahl.timeline_dark .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_dark blockquote::before, .mod_calendar .calendar_body .days.today .label, .switch_dark_mode .slider { background: #343a40; } .bg_black, .ce_hinweisbox.hinweisbox_black, .bg_icon_black i, .bg_icon_black svg, #colorbox #cboxClose::after, #colorbox #cboxPrevious::after, #colorbox #cboxNext::after, #colorbox #cboxTitle, .ce_text hr.bg_black, .ce_text_bild_kachel.bg_black .box_img.arrow::before, .ce_zeitstrahl.bg_icon_black .box_date::before, .ce_zeitstrahl.timeline_black::before, .ce_zeitstrahl.timeline_black .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_black blockquote::before { background: #000; } /* Erweiterte Farben */ .bg_success, button.button_success, .button_success p.button, .button_success button.submit, .ce_toplink.button_success, .bg_icon_success i, .bg_icon_success svg, .ce_text hr.bg_success, .ce_text_bild_kachel.bg_success .box_img.arrow::before, .ce_zeitstrahl.bg_icon_success .box_date::before, .ce_zeitstrahl.timeline_success::before, .ce_zeitstrahl.timeline_success .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_success blockquote::before { background: #28a745; } .bg_info, button.button_info, .button_info p.button, .button_info button.submit, .ce_toplink.button_info, .bg_icon_info i, .bg_icon_info svg, .ce_text hr.bg_info, .ce_text_bild_kachel.bg_info .box_img.arrow::before, .ce_zeitstrahl.bg_icon_info .box_date::before, .ce_zeitstrahl.timeline_info::before, .ce_zeitstrahl.timeline_info .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_info blockquote::before { background: #17a2b8; } .bg_warning, button.button_warning, .button_warning p.button, .button_warning button.submit, .ce_toplink.button_warning, .bg_icon_warning i, .bg_icon_warning svg, .ce_text hr.bg_warning, .ce_text_bild_kachel.bg_warning .box_img.arrow::before, .ce_zeitstrahl.bg_icon_warning .box_date::before, .ce_zeitstrahl.timeline_warning::before, .ce_zeitstrahl.timeline_warning .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_warning blockquote::before { background: #ffc107; } .bg_danger, button.button_danger, .button_danger p.button, .button_danger button.submit, .ce_toplink.button_danger, .bg_icon_danger i, .bg_icon_danger svg, .ce_text hr.bg_danger, .ce_text_bild_kachel.bg_danger .box_img.arrow::before, .ce_zeitstrahl.bg_icon_danger .box_date::before, .ce_zeitstrahl.timeline_danger::before, .ce_zeitstrahl.timeline_danger .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_danger blockquote::before { background: #dc3545; } .bg_primary, button.button_primary, .button_primary p.button, .button_primary button.submit, .ce_toplink.button_primary, .bg_icon_primary i, .bg_icon_primary svg, .ce_text hr.bg_primary, .ce_text_bild_kachel.bg_primary .box_img.arrow::before, .ce_zeitstrahl.bg_icon_primary .box_date::before, .ce_zeitstrahl.timeline_primary::before, .ce_zeitstrahl.timeline_primary .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_primary blockquote::before, .pagination ul li strong, .switch_dark_mode input:checked + .slider, [data-theme="dark"] .switch_dark_mode input + .slider { background: #007bff; } .bg_secondary, button.button_secondary, .button_secondary p.button, .button_secondary button.submit, .ce_toplink.button_secondary, .bg_icon_secondary i, .bg_icon_secondary svg, .ce_text hr.bg_secondary, .ce_text_bild_kachel.bg_secondary .box_img.arrow::before, .ce_zeitstrahl.bg_icon_secondary .box_date::before, .ce_zeitstrahl.timeline_secondary::before, .ce_zeitstrahl.timeline_secondary .box_text::before, .ce_zitatbox.zitatbox_3.bg_icon_secondary blockquote::before { background: #6c757d; } /* Pastellfarben */ .ce_hinweisbox.hinweisbox_success, .ce_comments .tl_confirm, .mod_changePassword p.tl_confirm, .mod_lostPassword p.confirm, .mod_personalData p.tl_confirm, .mod_registration p.confirm, .mod_subscribe p.confirm { background: #d4edda; } .ce_hinweisbox.hinweisbox_info, .mod_search .info { background: #d1ecf1; } .ce_hinweisbox.hinweisbox_warning { background: #fff3cd; } .ce_hinweisbox.hinweisbox_danger, .mod_changePassword p.error, .mod_login .error, .mod_lostPassword p.error, .mod_registration p.error, .mod_subscribe p.error, .mod_unsubscribe p.error { background: #f8d7da; } .ce_hinweisbox.hinweisbox_primary { background: #cce5ff; } .ce_hinweisbox.hinweisbox_secondary, .mod_search .header { background: #e2e3e5; } /* Hover-Farben */ button.button_default:hover, .button_default p.button:hover, .button_default button.submit:hover, .ce_toplink.button_default:hover, .ce_accordion:hover .toggler, .ce_tabs > label:hover { background: #e6e6e6; } button.button_light:hover, .button_light p.button:hover, .button_light button.submit:hover, .ce_toplink.button_light:hover { background: #e2e6ea; } button.button_dark:hover, .button_dark p.button:hover, .button_dark button.submit:hover, .ce_toplink.button_dark:hover { background: #23272b; } button.button_success:hover, .button_success p.button:hover, .button_success button.submit:hover, .ce_toplink.button_success:hover { background: #218838; } button.button_info:hover, .button_info p.button:hover, .button_info button.submit:hover, .ce_toplink.button_info:hover { background: #138496; } button.button_warning:hover, .button_warning p.button:hover, .button_warning button.submit:hover, .ce_toplink.button_warning:hover { background: #e0a800; } button.button_danger:hover, .button_danger p.button:hover, .button_danger button.submit:hover, .ce_toplink.button_danger:hover { background: #c82333; } button.button_primary:hover, .button_primary p.button:hover, .button_primary button.submit:hover, .ce_toplink.button_primary:hover { background: #0069d9; } button.button_secondary:hover, .button_secondary p.button:hover, .button_secondary button.submit:hover, .ce_toplink.button_secondary:hover { background: #5a6268; } /* Media Query Anfang */ @media screen and (max-width: 779px) { #nav-main, #nav-main ul.level_3 { background: #fff; } #nav-main ul.level_2, #nav-main ul.level_4 { background: #e9ecef; } /* Media Query Ende */ } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.3. Rahmen ====================================================================================== */ /* Standardfarben */ .border_default, button.button_default, .button_default p.button, .button_default button.submit, .ce_toplink.button_default, th, td, input, textarea, select, .ce_accordion .toggler, .ce_code code, .ce_gallery a img, .ce_gallery figcaption, .ce_hinweisbox .border_default i, .ce_hinweisbox .border_default svg, .ce_iconbox .border_default i, .ce_iconbox .border_default svg, .ce_tabs > label, .ce_teambox.border_default, .ce_teambox .img_default .ce_image .image_container img, .ce_text pre, .ce_zitatbox .img_default .ce_image .image_container img, .mod_calendar .days, .pagination ul li a { border-color: #ccc; } .border_white, .ce_hinweisbox .border_white i, .ce_hinweisbox .border_white svg, .ce_iconbox .border_white i, .ce_iconbox .border_white svg, .ce_teambox.border_white, .ce_teambox .img_white .ce_image .image_container img, .ce_zeitstrahl.icon_white .box_date::after, .ce_zitatbox .img_white .ce_image .image_container img, .ce_zitatbox.border_white blockquote { border-color: #fff; } .border_light, button.button_light, .button_light p.button, .button_light button.submit, .ce_toplink.button_light, .ce_comments .reply, .ce_hinweisbox.hinweisbox_light, .ce_hinweisbox .border_light i, .ce_hinweisbox .border_light svg, .ce_iconbox .border_light i, .ce_iconbox .border_light svg, .ce_teambox.border_light, .ce_teambox .img_light .ce_image .image_container img, .ce_zeitstrahl.icon_light .box_date::after, .ce_zitatbox .img_light .ce_image .image_container img, .ce_zitatbox.border_light blockquote, .ce_download, .ce_downloads, .ce_download::before, .ce_downloads::before, blockquote { border-color: #e9ecef; } .border_dark, button.button_dark, .button_dark p.button, .button_dark button.submit, .ce_toplink.button_dark, .ce_hinweisbox.hinweisbox_white, .ce_hinweisbox.hinweisbox_dark, .ce_hinweisbox .border_dark i, .ce_hinweisbox .border_dark svg, .ce_iconbox .border_dark i, .ce_iconbox .border_dark svg, .ce_teambox.border_dark, .ce_teambox .img_dark .ce_image .image_container img, .ce_zeitstrahl.icon_dark .box_date::after, .ce_zeitstrahl .box_date::after, .ce_zitatbox .img_dark .ce_image .image_container img, .ce_zitatbox.border_dark blockquote { border-color: #343a40; } .border_black, .ce_hinweisbox.hinweisbox_black, .ce_hinweisbox .border_black i, .ce_hinweisbox .border_black svg, .ce_iconbox .border_black i, .ce_iconbox .border_black svg, .ce_teambox.border_black, .ce_teambox .img_black .ce_image .image_container img, .ce_zeitstrahl.icon_black .box_date::after, .ce_zitatbox .img_black .ce_image .image_container img, .ce_zitatbox.border_black blockquote { border-color: #000; } /* Erweiterte Farben */ .border_success, button.button_success, .button_success p.button, .button_success button.submit, .ce_toplink.button_success, .ce_hinweisbox .border_success i, .ce_hinweisbox .border_success svg, .ce_iconbox .border_success i, .ce_iconbox .border_success svg, .ce_teambox.border_success, .ce_teambox .img_success .ce_image .image_container img, .ce_zeitstrahl.icon_success .box_date::after, .ce_zitatbox .img_success .ce_image .image_container img, .ce_zitatbox.border_success blockquote { border-color: #28a745; } .border_info, button.button_info, .button_info p.button, .button_info button.submit, .ce_toplink.button_info, .ce_hinweisbox .border_info i, .ce_hinweisbox .border_info svg, .ce_iconbox .border_info i, .ce_iconbox .border_info svg, .ce_teambox.border_info, .ce_teambox .img_info .ce_image .image_container img, .ce_zeitstrahl.icon_info .box_date::after, .ce_zitatbox .img_info .ce_image .image_container img, .ce_zitatbox.border_info blockquote { border-color: #17a2b8; } .border_warning, button.button_warning, .button_warning p.button, .button_warning button.submit, .ce_toplink.button_warning, .ce_hinweisbox .border_warning i, .ce_hinweisbox .border_warning svg, .ce_iconbox .border_warning i, .ce_iconbox .border_warning svg, .ce_teambox.border_warning, .ce_teambox .img_warning .ce_image .image_container img, .ce_zeitstrahl.icon_warning .box_date::after, .ce_zitatbox .img_warning .ce_image .image_container img, .ce_zitatbox.border_warning blockquote { border-color: #ffc107; } .border_danger, button.button_danger, .button_danger p.button, .button_danger button.submit, .ce_toplink.button_danger, .ce_hinweisbox .border_danger i, .ce_hinweisbox .border_danger svg, .ce_iconbox .border_danger i, .ce_iconbox .border_danger svg, .ce_teambox.border_danger, .ce_teambox .img_danger .ce_image .image_container img, .ce_zeitstrahl.icon_danger .box_date::after, .ce_zitatbox .img_danger .ce_image .image_container img, .ce_zitatbox.border_danger blockquote { border-color: #dc3545; } .border_primary, button.button_primary, .button_primary p.button, .button_primary button.submit, .ce_toplink.button_primary, div .border_primary i, div .border_primary svg, .ce_teambox.border_primary, .ce_teambox .img_primary .ce_image .image_container img, .ce_zeitstrahl.icon_primary .box_date::after, .ce_zitatbox .img_primary .ce_image .image_container img, .ce_zitatbox.border_primary blockquote, .pagination ul li strong { border-color: #007bff; } .border_secondary, button.button_secondary, .button_secondary p.button, .button_secondary button.submit, .ce_toplink.button_secondary, .ce_hinweisbox .border_secondary i, .ce_hinweisbox .border_secondary svg, .ce_iconbox .border_secondary i, .ce_iconbox .border_secondary svg, .ce_teambox.border_secondary, .ce_teambox .img_secondary .ce_image .image_container img, .ce_zeitstrahl.icon_secondary .box_date::after, .ce_zitatbox .img_secondary .ce_image .image_container img, .ce_zitatbox.border_secondary blockquote { border-color: #6c757d; } /* Pastellfarben */ .ce_hinweisbox.hinweisbox_success, .ce_comments .tl_confirm, .mod_changePassword p.tl_confirm, .mod_lostPassword p.confirm, .mod_personalData p.tl_confirm, .mod_registration p.confirm, .mod_subscribe p.confirm { border-color: #c3e6cb; } .ce_hinweisbox.hinweisbox_info, .mod_search .info { border-color: #bee5eb; } .ce_hinweisbox.hinweisbox_warning { border-color: #ffeeba; } .ce_hinweisbox.hinweisbox_danger, .mod_changePassword p.error, .mod_login .error, .mod_lostPassword p.error, .mod_registration p.error, .mod_subscribe p.error, .mod_unsubscribe p.error { border-color: #f5c6cb; } .ce_hinweisbox.hinweisbox_primary, input:focus, textarea:focus { border-color: #b8daff; } .ce_hinweisbox.hinweisbox_secondary, .ce_hinweisbox.hinweisbox_secondary_light, .mod_search .header { border-color: #d6d8db; } /* Hover-Farben */ button.button_default:hover, .button_default p.button:hover, .button_default button.submit:hover, .ce_toplink.button_default:hover { border-color: #adadad; } button.button_light:hover, .button_light p.button:hover, .button_light button.submit:hover, .ce_toplink.button_light:hover { border-color: #dae0e5; } button.button_dark:hover, .button_dark p.button:hover, .button_dark button.submit:hover, .ce_toplink.button_dark:hover { border-color: #1d2124; } button.button_success:hover, .button_success p.button:hover, .button_success button.submit:hover, .ce_toplink.button_success:hover { border-color: #1e7e34; } button.button_info:hover, .button_info p.button:hover, .button_info button.submit:hover, .ce_toplink.button_info:hover { border-color: #117a8b; } button.button_warning:hover, .button_warning p.button:hover, .button_warning button.submit:hover, .ce_toplink.button_warning:hover { border-color: #d39e00; } button.button_danger:hover, .button_danger p.button:hover, .button_danger button.submit:hover, .ce_toplink.button_danger:hover { border-color: #bd2130; } button.button_primary:hover, .button_primary p.button:hover, .button_primary button.submit:hover, .ce_toplink.button_primary:hover { border-color: #0062cc; } button.button_secondary:hover, .button_secondary p.button:hover, .button_secondary button.submit:hover, .ce_toplink.button_secondary:hover { border-color: #545b62; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.4. Umrisse ====================================================================================== */ /* Standardfarben */ .outline_default i, .outline_default svg, .outline_default span { outline-color: #ccc; } .outline_white i, .outline_white svg, .outline_white span { outline-color: #fff; } .outline_light i, .outline_light svg, .outline_light span { outline-color: #e9ecef; } .outline_dark i, .outline_dark svg, .outline_dark span { outline-color: #343a40; } .outline_black i, .outline_black svg, .outline_black span { outline-color: #000; } /* Erweiterte Farben */ .outline_success i, .outline_success svg, .outline_success span { outline-color: #28a745; } .outline_info i, .outline_info svg, .outline_info span { outline-color: #17a2b8; } .outline_warning i, .outline_warning svg, .outline_warning span { outline-color: #ffc107; } .outline_danger i, .outline_danger svg, .outline_danger span { outline-color: #dc3545; } .outline_primary i, .outline_primary svg, .outline_primary span { outline-color: #007bff; } .outline_secondary i, .outline_secondary svg, .outline_secondary span { outline-color: #6c757d; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.5. Schatten ====================================================================================== */ .contao-cookiebar .cc-inner { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } input:hover, textarea:hover, input:focus, textarea:focus { -webkit-box-shadow: 0 0 2px #cce5ff; -moz-box-shadow: 0 0 2px #cce5ff; box-shadow: 0 0 2px #cce5ff; } /* ====================================================================================== 1. Allgemeine Styles 1.3. Ausrichtung ====================================================================================== */ .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .justify { text-align: justify; } .vwrapper { display: table; height: 100%; width: 100%; } .vtop { display: table-cell; vertical-align: top; } .vcenter { display: table-cell; vertical-align: middle; } .vbottom { display: table-cell; vertical-align: bottom; } .float_left { float: left; } .float_right { float: right; } /* ====================================================================================== 1. Allgemeine Styles 1.4. Buttons ====================================================================================== */ button, p.button { background: transparent; border-color: transparent; border-style: solid; border-width: 1px; cursor: pointer; display: inline-block; height: 32px; margin: 7px 0; text-align: center; text-decoration: none; white-space: nowrap; } button, .button a { display: block; padding: 0 12px; } button:hover, .button:hover, p.button:hover a { text-decoration: none !important; } button.button_link, .button_link p.button, .button_link p.button a, .button_link button.submit, .ce_toplink.button_link a, button.button_klammer_link, .button_klammer_link p.button, .button_klammer_link p.button a, .button_klammer_link button.submit, .ce_toplink.button_klammer_link a { padding: 0; } button.button_link:hover, .button_link p.button a:hover, .button_link button.submit:hover, .ce_toplink.button_link a:hover, button.button_klammer_link:hover, .button_klammer_link p.button a:hover, .button_klammer_link button.submit:hover, .ce_toplink.button_klammer_link a:hover { text-decoration: underline !important; } button.button_klammer_link::before, button.button_klammer_link::after, .button_klammer_link p.button a::before, .button_klammer_link p.button a::after, .button_klammer_link button.submit::before, .button_klammer_link button.submit::after, .ce_toplink.button_klammer_link a::before, .ce_toplink.button_klammer_link a::after, a.klammer_link::before, a.klammer_link::after { content: "["; font-size: 125%; } button.button_klammer_link::after, .button_klammer_link p.button a::after, .button_klammer_link button.submit::after, .ce_toplink.button_klammer_link a::after, a.klammer_link::after { content: "]"; } button.button_link, button.button_klammer_link, .button_link p.button, .button_klammer_link p.button { height: auto; } /* ====================================================================================== 1. Allgemeine Styles 1.5. Formularfelder ====================================================================================== */ input:not([type="radio"]):not([type="checkbox"]):not(.submit), input[class*="grid_"], textarea, select { border-style: solid; border-width: 1px; padding: 6px 12px; width: 100%; } input.text { height: 32px; } .radio_container span { display: block; margin: 7px 0; } /* ====================================================================================== 1. Allgemeine Styles 1.6. Radien ====================================================================================== */ .ce_hinweisbox .icon.circle i, .ce_hinweisbox .icon.circle svg, .ce_iconbox .icon.circle i, .ce_iconbox .icon.circle svg, .ce_iconbox .icon.circle span, .ce_teambox .circle .ce_image .image_container img, .ce_zitatbox .circle .ce_image .image_container img, .zitatbox_3 blockquote::before, .ce_zeitstrahl .box_date::before, .ce_zeitstrahl .box_date::after, .switch_dark_mode .slider::before { -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } .switch_dark_mode .slider { -moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; } /* ====================================================================================== 1. Allgemeine Styles 1.7. Rahmen ====================================================================================== */ .ce_count_up.border_style_solid, .ce_hinweisbox .border_style_solid i, .ce_hinweisbox .border_style_solid svg, .ce_iconbox.border_style_solid, .ce_iconbox .border_style_solid i, .ce_iconbox .border_style_solid svg, .ce_landkarte .iframe[class*="border_"].border_style_solid, .ce_teambox.border_style_solid, .ce_teambox .border_style_solid .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_style_solid, .ce_zitatbox .border_style_solid .ce_image .image_container img { border-style: solid; } .ce_count_up.border_style_dotted, .ce_hinweisbox .border_style_dotted i, .ce_hinweisbox .border_style_dotted svg, .ce_iconbox.border_style_dotted, .ce_iconbox .border_style_dotted i, .ce_iconbox .border_style_dotted svg, .ce_landkarte .iframe[class*="border_"].border_style_dotted, .ce_teambox.border_style_dotted, .ce_teambox .border_style_dotted .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_style_dotted, .ce_zitatbox .border_style_dotted .ce_image .image_container img { border-style: dotted; } .ce_count_up.border_style_dashed, .ce_hinweisbox .border_style_dashed i, .ce_hinweisbox .border_style_dashed svg, .ce_iconbox.border_style_dashed, .ce_iconbox .border_style_dashed i, .ce_iconbox .border_style_dashed svg, .ce_landkarte .iframe[class*="border_"].border_style_dashed, .ce_teambox.border_style_dashed, .ce_teambox .border_style_dashed .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_style_dashed, .ce_zitatbox .border_style_dashed .ce_image .image_container img { border-style: dashed; } .ce_count_up.border_style_double, .ce_hinweisbox .border_style_double i, .ce_hinweisbox .border_style_double svg, .ce_iconbox.border_style_double, .ce_iconbox .border_style_double i, .ce_iconbox .border_style_double svg, .ce_landkarte .iframe[class*="border_"].border_style_double, .ce_teambox.border_style_double, .ce_teambox .border_style_double .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_style_double, .ce_zitatbox .border_style_double .ce_image .image_container img { border-style: double; } .ce_count_up.border_width_1, .ce_hinweisbox .border_width_1 i, .ce_hinweisbox .border_width_1 svg, .ce_iconbox.border_width_1, .ce_iconbox .border_width_1 i, .ce_iconbox .border_width_1 svg, .ce_landkarte .iframe[class*="border_"].border_width_1, .ce_teambox.border_width_1, .ce_teambox .border_width_1 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_1, .ce_zitatbox .border_width_1 .ce_image .image_container img { border-width: 1px; } .ce_count_up.border_width_2, .ce_hinweisbox .border_width_2 i, .ce_hinweisbox .border_width_2 svg, .ce_iconbox.border_width_2, .ce_iconbox .border_width_2 i, .ce_iconbox .border_width_2 svg, .ce_landkarte .iframe[class*="border_"].border_width_2, .ce_teambox.border_width_2, .ce_teambox .border_width_2 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_2, .ce_zitatbox .border_width_2 .ce_image .image_container img { border-width: 2px; } .ce_count_up.border_width_3, .ce_hinweisbox .border_width_3 i, .ce_hinweisbox .border_width_3 svg, .ce_iconbox.border_width_3, .ce_iconbox .border_width_3 i, .ce_iconbox .border_width_3 svg, .ce_landkarte .iframe[class*="border_"].border_width_3, .ce_teambox.border_width_3, .ce_teambox .border_width_3 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_3, .ce_zitatbox .border_width_3 .ce_image .image_container img { border-width: 3px; } .ce_count_up.border_width_5, .ce_hinweisbox .border_width_5 i, .ce_hinweisbox .border_width_5 svg, .ce_iconbox.border_width_5, .ce_iconbox .border_width_5 i, .ce_iconbox .border_width_5 svg, .ce_landkarte .iframe[class*="border_"].border_width_5, .ce_teambox.border_width_5, .ce_teambox .border_width_5 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_5, .ce_zitatbox .border_width_5 .ce_image .image_container img { border-width: 5px; } .ce_count_up.border_width_7, .ce_hinweisbox .border_width_7 i, .ce_hinweisbox .border_width_7 svg, .ce_iconbox.border_width_7, .ce_iconbox .border_width_7 i, .ce_iconbox .border_width_7 svg, .ce_landkarte .iframe[class*="border_"].border_width_7, .ce_teambox.border_width_7, .ce_teambox .border_width_7 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_7, .ce_zitatbox .border_width_7 .ce_image .image_container img { border-width: 7px; } .ce_count_up.border_width_9, .ce_hinweisbox .border_width_9 i, .ce_hinweisbox .border_width_9 svg, .ce_iconbox.border_width_9, .ce_iconbox .border_width_9 i, .ce_iconbox .border_width_9 svg, .ce_landkarte .iframe[class*="border_"].border_width_9, .ce_teambox.border_width_9, .ce_teambox .border_width_9 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_9, .ce_zitatbox .border_width_9 .ce_image .image_container img { border-width: 9px; } .ce_count_up.border_width_14, .ce_hinweisbox .border_width_14 i, .ce_hinweisbox .border_width_14 svg, .ce_iconbox.border_width_14, .ce_iconbox .border_width_14 i, .ce_iconbox .border_width_14 svg, .ce_landkarte .iframe[class*="border_"].border_width_14, .ce_teambox.border_width_14, .ce_teambox .border_width_14 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_14, .ce_zitatbox .border_width_14 .ce_image .image_container img { border-width: 14px; } .ce_count_up.border_width_21, .ce_hinweisbox .border_width_21 i, .ce_hinweisbox .border_width_21 svg, .ce_iconbox.border_width_21, .ce_iconbox .border_width_21 i, .ce_iconbox .border_width_21 svg, .ce_landkarte .iframe[class*="border_"].border_width_21, .ce_teambox.border_width_21, .ce_teambox .border_width_21 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_21, .ce_zitatbox .border_width_21 .ce_image .image_container img { border-width: 21px; } .ce_count_up.border_width_28, .ce_hinweisbox .border_width_28 i, .ce_hinweisbox .border_width_28 svg, .ce_iconbox.border_width_28, .ce_iconbox .border_width_28 i, .ce_iconbox .border_width_28 svg, .ce_landkarte .iframe[class*="border_"].border_width_28, .ce_teambox.border_width_28, .ce_teambox .border_width_28 .ce_image .image_container img, .ce_teaserbox[class*="border_"]:not(.border_sm).border_width_28, .ce_zitatbox .border_width_28 .ce_image .image_container img { border-width: 28px; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_teaserbox[class*="border_"].border_sm.border_style_solid { border-style: solid; } .ce_teaserbox[class*="border_"].border_sm.border_style_dotted { border-style: dotted; } .ce_teaserbox[class*="border_"].border_sm.border_style_dashed { border-style: dashed; } .ce_teaserbox[class*="border_"].border_sm.border_style_double { border-style: double; } .ce_teaserbox[class*="border_"].border_sm.border_width_1 { border-width: 1px; } .ce_teaserbox[class*="border_"].border_sm.border_width_2 { border-width: 2px; } .ce_teaserbox[class*="border_"].border_sm.border_width_3 { border-width: 3px; } .ce_teaserbox[class*="border_"].border_sm.border_width_5 { border-width: 5px; } .ce_teaserbox[class*="border_"].border_sm.border_width_7 { border-width: 7px; } .ce_teaserbox[class*="border_"].border_sm.border_width_9 { border-width: 9px; } .ce_teaserbox[class*="border_"].border_sm.border_width_14 { border-width: 14px; } .ce_teaserbox[class*="border_"].border_sm.border_width_21 { border-width: 21px; } .ce_teaserbox[class*="border_"].border_sm.border_width_28 { border-width: 28px; } /* Media Query Ende */ } /* ====================================================================================== 1. Allgemeine Styles 1.8. Umrisse ====================================================================================== */ .ce_hinweisbox .outline_style_solid i, .ce_hinweisbox .outline_style_solid svg, .ce_iconbox .outline_style_solid i, .ce_iconbox .outline_style_solid svg, .ce_iconbox .outline_style_solid span { outline-style: solid; } .ce_hinweisbox .outline_style_dotted i, .ce_hinweisbox .outline_style_dotted svg, .ce_iconbox .outline_style_dotted i, .ce_iconbox .outline_style_dotted svg, .ce_iconbox .outline_style_dotted span { outline-style: dotted; } .ce_hinweisbox .outline_style_dashed i, .ce_hinweisbox .outline_style_dashed svg, .ce_iconbox .outline_style_dashed i, .ce_iconbox .outline_style_dashed svg, .ce_iconbox .outline_style_dashed span { outline-style: dashed; } .ce_hinweisbox .outline_style_double i, .ce_hinweisbox .outline_style_double svg, .ce_iconbox .outline_style_double i, .ce_iconbox .outline_style_double svg, .ce_iconbox .outline_style_double span { outline-style: double; } .ce_hinweisbox .outline_width_1 i, .ce_hinweisbox .outline_width_1 svg, .ce_iconbox .outline_width_1 i, .ce_iconbox .outline_width_1 svg, .ce_iconbox .outline_width_1 span { outline-width: 1px; } .ce_hinweisbox .outline_width_2 i, .ce_hinweisbox .outline_width_2 svg, .ce_iconbox .outline_width_2 i, .ce_iconbox .outline_width_2 svg, .ce_iconbox .outline_width_2 span { outline-width: 2px; } .ce_hinweisbox .outline_width_3 i, .ce_hinweisbox .outline_width_3 svg, .ce_iconbox .outline_width_3 i, .ce_iconbox .outline_width_3 svg, .ce_iconbox .outline_width_3 span { outline-width: 3px; } .ce_hinweisbox .outline_width_5 i, .ce_hinweisbox .outline_width_5 svg, .ce_iconbox .outline_width_5 i, .ce_iconbox .outline_width_5 svg, .ce_iconbox .outline_width_5 span { outline-width: 5px; } .ce_hinweisbox .outline_width_7 i, .ce_hinweisbox .outline_width_7 svg, .ce_iconbox .outline_width_7 i, .ce_iconbox .outline_width_7 svg, .ce_iconbox .outline_width_7 span { outline-width: 7px; } .ce_hinweisbox .outline_width_9 i, .ce_hinweisbox .outline_width_9 svg, .ce_iconbox .outline_width_9 i, .ce_iconbox .outline_width_9 svg, .ce_iconbox .outline_width_9 span { outline-width: 9px; } .ce_hinweisbox .outline_width_14 i, .ce_hinweisbox .outline_width_14 svg, .ce_iconbox .outline_width_14 i, .ce_iconbox .outline_width_14 svg, .ce_iconbox .outline_width_14 span { outline-width: 14px; } .ce_hinweisbox .outline_width_21 i, .ce_hinweisbox .outline_width_21 svg, .ce_iconbox .outline_width_21 i, .ce_iconbox .outline_width_21 svg, .ce_iconbox .outline_width_21 span { outline-width: 21px; } .ce_hinweisbox .outline_width_28 i, .ce_hinweisbox .outline_width_28 svg, .ce_iconbox .outline_width_28 i, .ce_iconbox .outline_width_28 svg, .ce_iconbox .outline_width_28 span { outline-width: 28px; } /* ====================================================================================== 1. Allgemeine Styles 1.9. Transparenz ====================================================================================== */ .opacity_5 { opacity: 0.05; filter: alpha(opacity=5); } .opacity_10 { opacity: 0.1; filter: alpha(opacity=10); } .opacity_15 { opacity: 0.15; filter: alpha(opacity=15); } .opacity_25 { opacity: 0.25; filter: alpha(opacity=25); } .opacity_35 { opacity: 0.35; filter: alpha(opacity=35); } .opacity_50 { opacity: 0.5; filter: alpha(opacity=50); } .opacity_65 { opacity: 0.65; filter: alpha(opacity=65); } .opacity_75 { opacity: 0.75; filter: alpha(opacity=75); } .opacity_85 { opacity: 0.85; filter: alpha(opacity=85); } .opacity_95 { opacity: 0.95; filter: alpha(opacity=90); } .opacity_after_5::after { opacity: 0.05; filter: alpha(opacity=5); } .opacity_after_10::after { opacity: 0.1; filter: alpha(opacity=10); } .opacity_after_15::after { opacity: 0.15; filter: alpha(opacity=15); } .opacity_after_25::after { opacity: 0.25; filter: alpha(opacity=25); } .opacity_after_35::after { opacity: 0.35; filter: alpha(opacity=35); } .opacity_after_50::after { opacity: 0.5; filter: alpha(opacity=50); } .opacity_after_65::after { opacity: 0.65; filter: alpha(opacity=65); } .opacity_after_75::after { opacity: 0.75; filter: alpha(opacity=75); } .opacity_after_85::after { opacity: 0.85; filter: alpha(opacity=85); } .opacity_after_95::after { opacity: 0.95; filter: alpha(opacity=95); } /* ====================================================================================== 1. Allgemeine Styles 1.10. Overlays ====================================================================================== */ .overlay::after { background-repeat: repeat; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: -1; } .overlay_01::after { background: url(../../files/theme/img/overlays/01.webp); } .overlay_02::after { background: url(../../files/theme/img/overlays/02.webp); } .overlay_03::after { background: url(../../files/theme/img/overlays/03.webp); } .overlay_04::after { background: url(../../files/theme/img/overlays/04.webp); } .overlay_05::after { background: url(../../files/theme/img/overlays/05.webp); } .overlay_06::after { background: url(../../files/theme/img/overlays/06.webp); } .overlay_07::after { background: url(../../files/theme/img/overlays/07.webp); } .overlay_08::after { background: url(../../files/theme/img/overlays/08.webp); } .overlay_09::after { background: url(../../files/theme/img/overlays/09.webp); } .overlay_white::after { background: url(../../files/theme/img/overlays/white.webp); } .overlay_grey::after { background: url(../../files/theme/img/overlays/grey.webp); } .overlay_black::after { background: url(../../files/theme/img/overlays/black.webp); } .overlay_red::after { background: url(../../files/theme/img/overlays/red.webp); } .overlay_darkred::after { background: url(../../files/theme/img/overlays/darkred.webp); } .overlay_green::after { background: url(../../files/theme/img/overlays/green.webp); } .overlay_darkgreen::after { background: url(../../files/theme/img/overlays/darkgreen.webp); } .overlay_blue::after { background: url(../../files/theme/img/overlays/blue.webp); } .overlay_darkblue::after { background: url(../../files/theme/img/overlays/darkblue.webp); } .overlay_cyan::after { background: url(../../files/theme/img/overlays/cyan.webp); } .overlay_darkcyan::after { background: url(../../files/theme/img/overlays/darkcyan.webp); } .overlay_magenta::after { background: url(../../files/theme/img/overlays/magenta.webp); } .overlay_darkmagenta::after { background: url(../../files/theme/img/overlays/darkmagenta.webp); } .overlay_yellow::after { background: url(../../files/theme/img/overlays/yellow.webp); } .overlay_darkyellow::after { background: url(../../files/theme/img/overlays/darkyellow.webp); } .overlay_bluegreen::after { background: url(../../files/theme/img/overlays/bluegreen.webp); } .overlay_skyblue::after { background: url(../../files/theme/img/overlays/skyblue.webp); } .overlay_purple::after { background: url(../../files/theme/img/overlays/purple.webp); } .overlay_rose::after { background: url(../../files/theme/img/overlays/rose.webp); } .overlay_orange::after { background: url(../../files/theme/img/overlays/orange.webp); } .overlay_yellowgreen::after { background: url(../../files/theme/img/overlays/yellowgreen.webp); } .overlay_noise::after { background: url(../../files/theme/img/overlays/noise.webp); } /* ====================================================================================== 1. Allgemeine Styles 1.11. Zoom ====================================================================================== */ .zoom_05:hover img { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .zoom_10:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .zoom_15:hover img { -moz-transform: scale(1.15); -webkit-transform: scale(1.15); -o-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } .zoom_20:hover img { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .zoom_25:hover img { -moz-transform: scale(1.25); -webkit-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } .zoom_30:hover img { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } .zoom_35:hover img { -moz-transform: scale(1.35); -webkit-transform: scale(1.35); -o-transform: scale(1.35); -ms-transform: scale(1.35); transform: scale(1.35); } .zoom_40:hover img { -moz-transform: scale(1.4); -webkit-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } .zoom_45:hover img { -moz-transform: scale(1.45); -webkit-transform: scale(1.45); -o-transform: scale(1.45); -ms-transform: scale(1.45); transform: scale(1.45); } .zoom_50:hover img { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } *[class*="zoom_neg"]:hover img { transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .zoom_neg95 img { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .zoom_neg90 img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .zoom_neg85 img { transform: scale(1.15); -moz-transform: scale(1.15); -webkit-transform: scale(1.15); -o-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } .zoom_neg80 img { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .zoom_neg75 img { -moz-transform: scale(1.25); -webkit-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } .zoom_neg70 img { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } .zoom_neg65 img { -moz-transform: scale(1.35); -webkit-transform: scale(1.35); -o-transform: scale(1.35); -ms-transform: scale(1.35); transform: scale(1.35); } .zoom_neg60 img { -moz-transform: scale(1.4); -webkit-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } .zoom_neg55 img { -moz-transform: scale(1.45); -webkit-transform: scale(1.45); -o-transform: scale(1.45); -ms-transform: scale(1.45); transform: scale(1.45); } .zoom_neg50 img { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } /* ====================================================================================== 1. Allgemeine Styles 1.12. Übergang ====================================================================================== */ .transition_linear_15 img { -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -ms-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; } .transition_linear_25 img { -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -ms-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear; } .transition_linear_50 img, .switch_dark_mode .slider, .switch_dark_mode .slider::before { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .transition_ease_in_15 img { -webkit-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; -ms-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .transition_ease_in_25 img { -webkit-transition: all 0.25s ease-in; -moz-transition: all 0.25s ease-in; -ms-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in; transition: all 0.25s ease-in; } .transition_ease_in_50 img { -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .transition_ease_out_15 img { -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; -ms-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .transition_ease_out_25 img { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .transition_ease_out_50 img { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .transition_ease_in_out_15 img { -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .transition_ease_in_out_25 img { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .transition_ease_in_out_50 img { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* ====================================================================================== 2. Layout ====================================================================================== */ #wrapper { padding-bottom: 78px; padding-top: 112px; } /* Media Query Anfang */ @media screen and (min-width: 780px) { .header-left #wrapper, .header-right #wrapper { padding-top: 0; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #wrapper { padding-bottom: 72px; padding-top: 82px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #wrapper { padding-bottom: 105px; padding-top: 89px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { #wrapper { padding-bottom: 120px; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.1. Kopfzeile ====================================================================================== */ #header { height: 112px; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 99; } #header .logo { width: 325px; } #nav-main-bar, #nav-main-bar .ce_spaltenumschlag { overflow: visible; } /* Media Query Anfang */ @media screen and (min-width: 780px) { .header-left #header .logo, .header-right #header .logo { width: 230px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #header { height: 82px; } #header .logo { width: 200px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #header { height: 89px; } #header .logo { margin: 14px 0; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.2. Hauptzeile ====================================================================================== */ #container, #teaser, .inside { position: relative; } /* ====================================================================================== 2. Layout 2.2. Hauptzeile 2.2.1. Linke Spalte ====================================================================================== */ #left { margin-left: -100%; } /* Media Query Anfang */ @media screen and (max-width: 779px) { #left { margin-left: 0; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.2. Hauptzeile 2.2.2. Hauptspalte ====================================================================================== */ #main { width: 100%; } #main .inside { min-height: 1px; } /* ====================================================================================== 2. Layout 2.2. Hauptzeile 2.2.3. Rechte Spalte ====================================================================================== */ #right { margin-right: -100%; } /* Media Query Anfang */ @media screen and (max-width: 779px) { #right { margin-right: 0; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.3. Unterzeile ====================================================================================== */ /* ====================================================================================== 2. Layout 2.4. Fußzeile ====================================================================================== */ #footer { bottom: 0; clear: both; height: 78px; left: 0; overflow: hidden; position: absolute; right: 0; } #footer .copyright { font-size: 14px; font-size: 0.875rem; } #footer .ce_toplink { clear: both; display: block; margin: 0 auto; padding: 0; width: 34px; } #footer .ce_toplink a { display: block; height: 32px; padding: 6px 9px; text-decoration: none; width: 100%; } #footer .ce_toplink a::before { font-size: 18px; font-size: 1.125rem; line-height: 1; margin: 0; position: relative; } #footer .ce_toplink span { display: none; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #footer { height: 72px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #footer { height: 105px; } #footer .copyright { float: none; margin: auto; text-align: center; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { #footer { height: 120px; } #footer .copyright .footer_rechte { display: block; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.1. Überschrift ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.2. Text ====================================================================================== */ .ce_text { word-break: break-word; } .ce_text abbr { cursor: help; position: relative; } .ce_text code, .ce_table code { font-family: "Lucida Console", Monaco, monospace; font-size: 14px; font-size: 0.875rem; } .ce_text del { text-decoration: line-through; } .ce_text em { font-style: italic; } .ce_text hr { border: none; height: 2px; } .ce_text kbd { -webkit-box-decoration-break: clone; box-decoration-break: clone; font-family: "Lucida Console", Monaco, monospace; font-size: 14px; font-size: 0.875rem; padding: 4px 4px 2px; } .ce_text mark { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 5px; } .ce_text pre { border-style: solid; border-width: 1px; display: block; font-family: "Lucida Console", Monaco, monospace; font-size: 14px; font-size: 0.875rem; overflow: auto; margin: 7px 0; padding: 14px; white-space: pre; word-break: break-all; word-wrap: break-word; } .ce_text sub, .ce_text sup { font-size: 12px; font-size: 0.75rem; position: relative; top: -3px; vertical-align: text-top; } .ce_text sub { top: 3px; vertical-align: text-bottom; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_text abbr[title]:hover::before { content: attr(title); left: -7px; padding: 3px 5px; position: absolute; text-decoration: none; top: -26px; white-space: nowrap; } .ce_text abbr[title]:hover::after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #343a40; clear: both; content: ""; left: 0; position: absolute; top: -2px; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.3. Aufzählung ====================================================================================== */ ul { list-style-type: none; } .ce_list ol, .ce_table ol, .ce_text ol { counter-reset: item; list-style: none; } .ce_list ol > li, .ce_table ol > li, .ce_text ol > li { counter-increment: item; padding-left: 41px; } .ce_list ol > li::before, .ce_table ol > li::before, .ce_text ol > li::before { content: counters(item, ".") "."; margin-left: -20.5px; margin-right: 7px; } .ce_list ol ol > li, .ce_table ol ol > li, .ce_text ol ol > li { padding-left: 53px; } .ce_list ol ol > li::before, .ce_table ol ol > li::before, .ce_text ol ol > li::before { margin-left: -33.5px; } .ce_list ol ol ol > li, .ce_table ol ol ol > li, .ce_text ol ol ol > li { padding-left: 66px; } .ce_list ol ol ol > li::before, .ce_table ol ol ol > li::before, .ce_text ol ol ol > li::before { margin-left: -47px; } .ce_list ol ol ol ol > li, .ce_table ol ol ol ol > li, .ce_text ol ol ol ol > li { padding-left: 80px; } .ce_list ol ol ol ol > li::before, .ce_table ol ol ol ol > li::before, .ce_text ol ol ol ol > li::before { margin-left: -60px; } .ce_list ul, .ce_table ul, .ce_text ul, .mod_newsletterlist ul { list-style-type: disc; padding-left: 35px; } .ce_list ul ul, .ce_table ul ul, .ce_text ul ul { list-style-type: circle; } .ce_list ul ul ul, .ce_table ul ul ul, .ce_text ul ul ul { list-style-type: square; } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.4. Tabelle ====================================================================================== */ table { border-collapse: collapse; border-spacing: 0; display: block; font-size: inherit; overflow: auto; width: 100%; } caption { padding: 7px 0; } caption, th, td { text-align: left; text-align: start; vertical-align: middle; } th, td { border-style: solid; border-width: 1px; padding: 7px; } .sortable th { padding-right: 14px; } th { font-weight: 700; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .sortable th { padding-right: 21px; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.5. Code ====================================================================================== */ .ce_code code { border-style: solid; border-width: 1px; font-family: "Lucida Console", Monaco, monospace; font-size: 14px; font-size: 0.875rem; padding: 14px; } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.6. Markdown ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.2. Akkordeon ====================================================================================== */ .ce_accordion { margin-bottom: 2px; } .ce_accordion .toggler { border-style: solid; border-width: 1px; cursor: pointer; font-weight: 700; padding: 12px; } .ce_accordion .ui-icon::before { content: "\f0da"; display: inline-block; font-family: "Font Awesome 6 Free"; font-size: 16px; font-size: 1rem; font-weight: 700; width: 15px; text-align: center; } .ce_accordion .ui-accordion-header-active .ui-icon::before { content: "\f0d7"; } .ce_accordion .ui-accordion-content { padding: 7px 11px; } /* ====================================================================================== 3. Core-Elemente 3.3. Content-Slider ====================================================================================== */ .ce_sliderStart .slider-control { height: 50px; } .ce_sliderStart.no_nav_slider .slider-control { /* Slider-Navigation ausbldenden */ display: none; } .ce_sliderStart .slider-wrapper { display: -webkit-flex; display: -ms-flex; display: flex; } .ce_sliderStart .slider-control .slider-menu { font-size: 48px; font-size: 3rem; line-height: 1; } .ce_sliderStart .slider-control .slider-prev::after, .ce_sliderStart .slider-control .slider-next::after { content: "\f104"; font-family: "Font Awesome 6 Free"; font-size: 32px; font-size: 2rem; font-weight: 700; left: 15px; position: absolute; top: -3px; } .ce_sliderStart .slider-control .slider-next::after { content: "\f105"; left: auto; right: 15px; } .ce_sliderStart .slider-control .slider-prev span, .ce_sliderStart .slider-control .slider-next span { display: none; } /* ====================================================================================== 3. Core-Elemente 3.4. Link-Elemente 3.4.1. Hyperlink ====================================================================================== */ a { text-decoration: none; } a:hover { text-decoration: underline; } p:not(.button) a[target="_blank"]::after, .button_link p.button a[target="_blank"]::after, .ce_hyperlink a[target="_blank"]::after { content: "\f35d"; font-family: "Font Awesome 6 Free"; font-size: 12px; font-size: 0.75rem; font-weight: 700; margin-left: 3px; } .ce_hyperlink { padding: 7px 0; } /* ====================================================================================== 3. Core-Elemente 3.4. Link-Elemente 3.4.2. Top-Link ====================================================================================== */ .ce_toplink { padding: 7px 0 7px 12px; } .ce_toplink a::before { content: "\f102"; font-family: "Font Awesome 6 Free"; font-size: 12px; font-size: 0.75rem; font-weight: 700; margin: 4px 0 0 -12px; position: absolute; } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.1. Bild ====================================================================================== */ .image_container { position: relative; } .ce_image a + figcaption, .ce_gallery a + figcaption, .ce_text .image_container a + figcaption { margin-top: -7px; } .ce_image figcaption, .ce_gallery figcaption, .ce_text .image_container figcaption { margin-top: -4px; padding: 7px; position: relative; } .ce_text .image_container.float_left, .ce_text .image_container.float_right { margin: 11px 21px 11px 0; width: 33.33333333%; } .ce_text .image_container.float_right { margin: 11px 0 11px 21px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_text .image_container.float_left, .ce_text .image_container.float_right { width: 50%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { .ce_text .image_container.float_left, .ce_text .image_container.float_right { margin: 7px 0 14px 0; width: 100%; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.2. Galerie ====================================================================================== */ .ce_gallery > ul { margin: 0 -7px; overflow: hidden; padding: 0; width: calc(100% + 14px); } .ce_gallery > ul li { float: left; padding: 7px; width: 100%; } .ce_gallery > ul.cols_2 li { width: 50%; } .ce_gallery > ul.cols_3 li { width: 33.33333333%; } .ce_gallery > ul.cols_4 li { width: 25%; } .ce_gallery > ul.cols_5 li { width: 20%; } .ce_gallery > ul.cols_6 li { width: 16.66%; } .ce_gallery > ul.cols_7 li { width: 14.28%; } .ce_gallery > ul.cols_8 li { width: 12.5%; } .ce_gallery > ul.cols_9 li { width: 11.11%; } .ce_gallery > ul.cols_10 li { width: 10%; } .ce_gallery > ul.cols_11 li { width: 9.09%; } .ce_gallery > ul.cols_12 li { width: 8.33333333%; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_gallery > ul.cols_5 li, .ce_gallery > ul.cols_6 li { width: 25%; } .ce_gallery > ul.cols_7 li, .ce_gallery > ul.cols_8 li, .ce_gallery > ul.cols_9 li { width: 20%; } .ce_gallery > ul.cols_10 li, .ce_gallery > ul.cols_11 li, .ce_gallery > ul.cols_12 li { width: 16.66%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_gallery > ul.cols_7 li, .ce_gallery > ul.cols_8 li, .ce_gallery > ul.cols_9 li, .ce_gallery > ul.cols_10 li, .ce_gallery > ul.cols_11 li, .ce_gallery > ul.cols_12 li { width: 25%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { .ce_gallery > ul.cols_3 li, .ce_gallery > ul.cols_4 li { width: 50%; } .ce_gallery > ul.cols_5 li, .ce_gallery > ul.cols_6 li, .ce_gallery > ul.cols_7 li, .ce_gallery > ul.cols_8 li, .ce_gallery > ul.cols_9 li, .ce_gallery > ul.cols_10 li, .ce_gallery > ul.cols_11 li, .ce_gallery > ul.cols_12 li { width: 33.33333333%; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.3. Video/Audio ====================================================================================== */ .ce_player audio { width: 100%; } .ce_player video { height: 100%; width: 100%; } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.4. YouTube ====================================================================================== */ .ce_youtube .video_container { height: auto; padding-bottom: 56.25%; position: relative; width: 100%; } .ce_youtube iframe { bottom: 0; height: 100% !important; left: 0; position: absolute; right: 0; top: 0; width: 100% !important; } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.5. Vimeo ====================================================================================== */ .ce_vimeo .video_container { height: auto; padding-bottom: 56.25%; position: relative; width: 100%; } .ce_vimeo iframe { bottom: 0; height: 100% !important; left: 0; position: absolute; right: 0; top: 0; width: 100% !important; } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.6. Colorbox ====================================================================================== */ #colorbox #cboxClose, #colorbox #cboxPrevious, #colorbox #cboxNext { background: transparent; } #colorbox #cboxClose::after { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-size: 32px; font-size: 2rem; font-weight: 700; height: 40px; left: 0; line-height: 1.25; position: absolute; text-indent: 0; top: 0; width: 40px; } #colorbox #cboxPrevious::after, #colorbox #cboxNext::after { content: "\f104"; font-family: "Font Awesome 6 Free"; font-size: 32px; font-size: 2rem; font-weight: 700; height: 65px; left: -2px; line-height: 2; position: absolute; text-indent: 0; top: 0; width: 30px; } #colorbox #cboxNext::after { content: "\f105"; left: 2px; } #colorbox #cboxTitle { bottom: 0; left: 0; padding: 7px 5px; right: 0; top: auto; width: 100%; } /* ====================================================================================== 3. Core-Elemente 3.6. Datei-Elemente 3.6.1. Download ====================================================================================== */ .ce_download, .ce_downloads { border-style: solid; border-width: 1px; overflow: visible; padding: 14px 7px 7px; } .ce_download::before, .ce_downloads::before { border-style: solid; border-width: 1px; content: "Download"; font-weight: 700; margin-top: -25px; padding: 0 7px; position: absolute; } .ce_download .size, .ce_downloads .size { font-size: 10px; font-size: 0.625rem; } /* ====================================================================================== 3. Core-Elemente 3.6. Datei-Elemente 3.6.2. Downloads ====================================================================================== */ .ce_downloads::before { content: "Downloads"; } /* ====================================================================================== 3. Core-Elemente 3.7. Include-Elemente 3.7.1. Formulare ====================================================================================== */ .ce_form .widget { padding: 7px 2px; } .ce_form .widget-text label, .ce_form .widget-textarea label, .ce_form .widget-select label, .ce_form .widget-password label, .ce_form .widget-upload label, .ce_form .widget-range label, .ce_form .widget-captcha label, .ce_form .widget-radio legend, .ce_form .widget-checkbox legend, fieldset legend { font-weight: 700; } .ce_form .checkbox_container label, .ce_form .radio_container label { display: block; margin: -21px 0 0 21px; } .ce_form .widget[class*="grid_"] label, .ce_form .widget[class*="grid_"] legend { padding: 0; width: 100%; } /* ====================================================================================== 3. Core-Elemente 3.7. Include-Elemente 3.7.2. Kommentare ====================================================================================== */ .ce_comments { margin-top: 21px; width: 100%; } .ce_comments .widget { padding: 7px 2px; } .ce_comments .widget-text label, .ce_comments .widget-textarea label { font-weight: 700; } .ce_comments .widget-text.mandatory { float: left; width: 50%; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_comments .widget-text.mandatory { float: none; width: 100%; } /* Media Query Ende */ } .ce_comments .comment_default:not(.last) { margin-bottom: 28px; } .ce_comments p.info { font-weight: 700; } .ce_comments p.date { font-size: 12px; font-size: 0.75rem; margin-top: -14px; } .ce_comments .reply { border-left-style: solid; border-left-width: 3px; margin: 7px 0 7px 14px; padding-left: 21px; } .ce_comments .tl_confirm { border-style: solid; border-width: 1px; padding: 7px 11px; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.1. Teaserbild ====================================================================================== */ .ce_teaserbild { padding: 35px 0; width: 100%; } .ce_teaserbild > div { position: relative; } .ce_teaserbild .height_lg { height: 430px; } .ce_teaserbild .height_md { height: 280px; } .ce_teaserbild .height_sm { height: 130px; } .ce_teaserbild .fullheight { height: calc(100vh - 182px); } .ce_teaserbild .box_width_85 { padding: 0 7.5%; } .ce_teaserbild .box_width_50 { padding: 0 25%; } .ce_teaserbild .box_width_35 { padding: 0 32.5%; } .ce_teaserbild .left.box_width_85 { padding: 0 15% 0 0; } .ce_teaserbild .left.box_width_50 { padding: 0 50% 0 0; } .ce_teaserbild .left.box_width_35 { padding: 0 65% 0 0; } .ce_teaserbild .right.box_width_85 { padding: 0 0 0 15%; } .ce_teaserbild .right.box_width_50 { padding: 0 0 0 50%; } .ce_teaserbild .right.box_width_35 { padding: 0 0 0 65%; } .ce_teaserbild .inside { display: inline-block; padding: 0 14px; } .ce_teaserbild .wrapperpadding { padding-bottom: 35px; } .ce_teaserbild .contentpadding { padding: 7px 14px; } .ce_teaserbild .inside:last-of-type { margin-top: 7px; } .boxed .ce_teaserbild .left .inside, .ce_teaserbild .left .nobox .ce_headline { margin-left: -15px; } .boxed .ce_teaserbild .right .inside, .ce_teaserbild .right .nobox .ce_headline { margin-right: -15px; } .ce_teaserbild .fullwidth .left .inside { margin-left: 0; } .ce_teaserbild .fullwidth .right .inside { margin-right: 0; } .ce_teaserbild .ce_headline, .ce_teaserbild .ce_text { display: block; position: relative; z-index: 1; } .ce_teaserbild .fullwidth .ce_headline, .ce_teaserbild .fullwidth .ce_text { margin: auto 0; } .ce_teaserbild .scrolldown { bottom: -25px; left: 0; position: absolute; right: 0; text-align: center; width: 100%; } .ce_teaserbild .scrolldown a { font-size: 32px; font-size: 2rem; } .ce_teaserbild .scrolldown a:hover { text-decoration: none; } .ce_teaserbild .scrolldown a::after { content: "\f103"; font-family: "Font Awesome 6 Free"; font-weight: 700; position: relative; } .ce_teaserbild .nobox { width: 100%; } .ce_teaserbild .nobox .ce_headline { -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; line-height: 2; padding: 7px 14px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_teaserbild { padding: 25px 0; } .ce_teaserbild .height_lg { height: 350px; } .ce_teaserbild .height_md { height: 200px; } .ce_teaserbild .height_sm { height: 100px; } .ce_teaserbild .fullheight { height: calc(100vh - 132px); } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_teaserbild .height_lg { height: 250px; } .ce_teaserbild .height_md { height: 150px; } .ce_teaserbild .height_sm { height: auto; } .ce_teaserbild .fullheight { height: calc(100vh - 140px); } .ce_teaserbild .box_width_85, .ce_teaserbild .box_width_50, .ce_teaserbild .box_width_35, .ce_teaserbild .left.box_width_85, .ce_teaserbild .left.box_width_50, .ce_teaserbild .left.box_width_35, .ce_teaserbild .right.box_width_85, .ce_teaserbild .right.box_width_50, .ce_teaserbild .right.box_width_35 { padding-left: 0; padding-right: 0; } .ce_teaserbild .inside { padding: 0 10px; } .boxed .ce_teaserbild .left .inside, .ce_teaserbild .fullwidth .left .inside { margin-left: 0; } .boxed .ce_teaserbild .right .inside, .ce_teaserbild .fullwidth .right .inside { margin-right: 0; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { .ce_teaserbild .ce_headline, .ce_teaserbild .ce_text { margin: auto 0; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.2. Teaserbox ====================================================================================== */ .ce_teaserbox { width: 100%; } .ce_teaserbox .height_lg { height: 430px; } .ce_teaserbox .height_md { height: 280px; } .ce_teaserbox .height_sm { height: 130px; } .ce_teaserbox .fullheight { height: calc(100vh - 112px); } .ce_teaserbox.overlay::after { z-index: 0; } .ce_teaserbox .inside { height: 100%; padding: 15px; position: absolute; top: 0; width: 100%; z-index: 1; } .ce_teaserbox .inside.relative { height: auto; position: relative; } .ce_teaserbox .inside.no_padding { padding: 0; } .ce_teaserbox .item { padding: 7px 11px; position: relative; } .ce_teaserbox .box_outside .colorbox { opacity: 1 !important; } .ce_teaserbox .ce_headline, .ce_teaserbox .ce_text, .ce_teaserbox .button { position: relative; z-index: 1; } .ce_teaserbox .image_container { height: 100%; } .ce_teaserbox .image_container img { height: 100%; object-fit: cover; } .ce_teaserbox .ce_image a img { border-style: none; border-width: 0; padding: 0; } .ce_teaserbox .highlight { font-weight: 700; line-height: 1.25; padding: 3px; position: absolute; right: -28px; text-align: center; top: 10px; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 100px; z-index: 1; } /* Media Query Anfang */ @media screen and (min-width: 1040px) { .ce_teaserbox .inside.no_padding_lg { padding: 0; } .ce_teaserbox .box_width_lg_85 { margin: 0 7.5%; } .ce_teaserbox .box_width_lg_50 { margin: 0 25%; } .ce_teaserbox .box_width_lg_35 { margin: 0 32.5%; } .ce_teaserbox .left .box_width_lg_85 { margin: 0 15% 0 0; } .ce_teaserbox .left .box_width_lg_50 { margin: 0 50% 0 0; } .ce_teaserbox .left .box_width_lg_35 { margin: 0 65% 0 0; } .ce_teaserbox .right .box_width_lg_85 { margin: 0 0 0 15%; } .ce_teaserbox .right .box_width_lg_50 { margin: 0 0 0 50%; } .ce_teaserbox .right .box_width_lg_35 { margin: 0 0 0 65%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) and (min-width: 780px) { .ce_teaserbox .inside.no_padding_md { padding: 0; } .ce_teaserbox .box_width_md_85 { margin: 0 7.5%; } .ce_teaserbox .box_width_md_50 { margin: 0 25%; } .ce_teaserbox .box_width_md_35 { margin: 0 32.5%; } .ce_teaserbox .left .box_width_md_85 { margin: 0 15% 0 0; } .ce_teaserbox .left .box_width_md_50 { margin: 0 50% 0 0; } .ce_teaserbox .left .box_width_md_35 { margin: 0 65% 0 0; } .ce_teaserbox .right .box_width_md_85 { margin: 0 0 0 15%; } .ce_teaserbox .right .box_width_md_50 { margin: 0 0 0 50%; } .ce_teaserbox .right .box_width_md_35 { margin: 0 0 0 65%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_teaserbox .height_lg { height: 350px; } .ce_teaserbox .height_md { height: 200px; } .ce_teaserbox .height_sm { height: 100px; } .ce_teaserbox .fullheight { height: calc(100vh - 62px); } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (min-width: 780px) { .ce_teaserbox .bg_outside .colorbox { background: transparent !important; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_teaserbox .height_lg { height: 250px; } .ce_teaserbox .height_md { height: 150px; } .ce_teaserbox .height_sm { height: auto; } .ce_teaserbox .fullheight { height: calc(100vh - 140px); } .ce_teaserbox .inside { height: auto; padding: 0; position: relative; } .ce_teaserbox .item { margin: 0 !important; } .ce_teaserbox .colorbox { opacity: 1 !important; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.3. Text/Bild-Kachel ====================================================================================== */ .ce_text_bild_kachel { width: 100%; } .ce_text_bild_kachel .box_img.overlay::after { z-index: 0; } .ce_text_bild_kachel .box_img { bottom: 0; height: 100%; position: absolute; right: 0; top: 0; width: 50%; } .ce_text_bild_kachel .box_img.arrow::before { content: ""; height: 20px; margin-left: -10px; margin-top: -10px; position: absolute; top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 20px; z-index: 1; } .ce_text_bild_kachel.text_right .box_img { left: 0; right: auto; } .ce_text_bild_kachel.text_right .box_img.arrow::before { right: -10px; } .ce_text_bild_kachel .height_lg { height: 80vh; } .ce_text_bild_kachel .height_md { height: 60vh; } .ce_text_bild_kachel .height_sm { height: 40vh; } .ce_text_bild_kachel .fullheight { height: calc(100vh - 112px); } .ce_text_bild_kachel .box_text .inside:not(.no_padding) { padding: 35px 0; } .ce_text_bild_kachel.text_left .box_text > .inside > .inserttags, .ce_text_bild_kachel.text_left .box_text > .inside > .ce_headline, .ce_text_bild_kachel.text_left .box_text > .inside > .ce_text, .ce_text_bild_kachel.text_left .box_text > .inside > .button { margin-right: calc(50% + 25px); } .ce_text_bild_kachel.text_right .box_text > .inside > .inserttags, .ce_text_bild_kachel.text_right .box_text > .inside > .ce_headline, .ce_text_bild_kachel.text_right .box_text > .inside > .ce_text, .ce_text_bild_kachel.text_right .box_text > .inside > .button { margin-left: calc(50% + 25px); } .ce_text_bild_kachel.text_left .box_text.fullwidth .ce_headline, .ce_text_bild_kachel.text_left .box_text.fullwidth .ce_text, .ce_text_bild_kachel.text_left .box_text.fullwidth .button, .ce_text_bild_kachel.text_left .box_text.width_lg .ce_headline, .ce_text_bild_kachel.text_left .box_text.width_lg .ce_text, .ce_text_bild_kachel.text_left .box_text.width_lg .button { margin-left: 14px; } .boxed .ce_text_bild_kachel.text_left .box_text.width_lg .ce_headline, .boxed .ce_text_bild_kachel.text_left .box_text.width_lg .ce_text, .boxed .ce_text_bild_kachel.text_left .box_text.width_lg .button { margin-left: 0; } .ce_text_bild_kachel.text_right .box_text.fullwidth .ce_headline, .ce_text_bild_kachel.text_right .box_text.fullwidth .ce_text, .ce_text_bild_kachel.text_right .box_text.fullwidth .button, .ce_text_bild_kachel.text_right .box_text.width_lg .ce_headline, .ce_text_bild_kachel.text_right .box_text.width_lg .ce_text, .ce_text_bild_kachel.text_right .box_text.width_lg .button { margin-right: 14px; } .boxed .ce_text_bild_kachel.text_right .box_text.width_lg .ce_headline, .boxed .ce_text_bild_kachel.text_right .box_text.width_lg .ce_text, .boxed .ce_text_bild_kachel.text_right .box_text.width_lg .button { margin-right: 0; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_text_bild_kachel .box_text .inside:not(.no_padding) { padding: 25px 0; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_text_bild_kachel .box_img { height: 50vh; position: relative; width: 100%; } .ce_text_bild_kachel .box_img.arrow::before, .ce_text_bild_kachel .box_img.arrow::before { bottom: -10px; left: 50%; right: auto; top: auto; } .ce_text_bild_kachel .height_lg, .ce_text_bild_kachel .height_md, .ce_text_bild_kachel .height_sm, .ce_text_bild_kachel .fullheight { height: auto; } .ce_text_bild_kachel .box_text { display: block; padding: 0 10px; } .ce_text_bild_kachel .box_text.no_padding { padding: 0; } .ce_text_bild_kachel .box_text .inside { display: block; padding: 15px 0; } .ce_text_bild_kachel .box_text .inside.no_padding { padding: 0; } .ce_text_bild_kachel.text_left .box_text > .inside > .inserttags, .ce_text_bild_kachel.text_left .box_text > .inside > .ce_headline, .ce_text_bild_kachel.text_left .box_text > .inside > .ce_text, .ce_text_bild_kachel.text_left .box_text > .inside > .button, .ce_text_bild_kachel.text_right .box_text > .inside > .inserttags, .ce_text_bild_kachel.text_right .box_text > .inside > .ce_headline, .ce_text_bild_kachel.text_right .box_text > .inside > .ce_text, .ce_text_bild_kachel.text_right .box_text > .inside > .button , .ce_text_bild_kachel.text_left .box_text.fullwidth .ce_headline, .ce_text_bild_kachel.text_left .box_text.fullwidth .ce_text, .ce_text_bild_kachel.text_left .box_text.fullwidth .button, .ce_text_bild_kachel.text_left .box_text.width_lg .ce_headline, .ce_text_bild_kachel.text_left .box_text.width_lg .ce_text, .ce_text_bild_kachel.text_left .box_text.width_lg .button .ce_text_bild_kachel.text_right .box_text.fullwidth .ce_headline, .ce_text_bild_kachel.text_right .box_text.fullwidth .ce_text, .ce_text_bild_kachel.text_right .box_text.fullwidth .button, .ce_text_bild_kachel.text_right .box_text.width_lg .ce_headline, .ce_text_bild_kachel.text_right .box_text.width_lg .ce_text, .ce_text_bild_kachel.text_right .box_text.width_lg .button { margin-left: 0; margin-right: 0; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.4. Hinweisbox ====================================================================================== */ .ce_hinweisbox { border-style: solid; border-width: 1px; margin: 7px 0; width: 100%; } .ce_hinweisbox.no_border { border-style: none; border-width: 0; } .ce_hinweisbox.no_margin { margin: 0; } .ce_hinweisbox .inside { padding: 7px 11px; width: 100%; } .ce_hinweisbox .icon { border-color: transparent; outline-color: transparent; text-align: center; } .ce_hinweisbox .icon.left.icon_xlg, .ce_hinweisbox .icon.right.icon_xlg { width: 120px; } .ce_hinweisbox .icon.left.icon_lg, .ce_hinweisbox .icon.right.icon_lg { width: 110px; } .ce_hinweisbox .icon.left.icon_md, .ce_hinweisbox .icon.right.icon_md { width: 100px; } .ce_hinweisbox .icon.left.icon_sm, .ce_hinweisbox .icon.right.icon_sm { width: 90px; } .ce_hinweisbox .icon.left.icon_xsm, .ce_hinweisbox .icon.right.icon_xsm { width: 80px; } .ce_hinweisbox .icon.left i, .ce_hinweisbox .icon.left svg { margin: 0 7px 0 0; } .ce_hinweisbox .icon.right i, .ce_hinweisbox .icon.right svg { margin: 0 0 0 7px; } .ce_hinweisbox .item.before, .ce_hinweisbox .item.after { display: table-row; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.5. Teambox ====================================================================================== */ .ce_teambox { border-color: transparent; padding: 7px 11px; width: 100%; } .ce_teambox .ce_image img { margin: 7px 0; width: 180px; } .ce_teambox .img_center .ce_image .image_container img { margin: 7px auto; } .ce_teambox .img_left .ce_image .image_container img { float: left; } .ce_teambox .img_right .ce_image .image_container img { float: right; } .ce_teambox p.ce_headline { font-size: 20px; font-size: 1.250rem; font-weight: 700; } .ce_teambox p.function { font-size: 12px; font-size: 0.75rem; margin-top: -21px; } .ce_teambox .ce_text .email.icon::before, .ce_teambox .ce_text .phone.icon::before, .ce_teambox .ce_text .mobile.icon::before { content: ""; font-family: "Font Awesome 6 Free"; font-size: 16px; font-size: 1rem; font-weight: 700; margin-right: 7px; } .ce_teambox .ce_text .email.icon::before { content: "\f0e0"; } .ce_teambox .ce_text .phone.icon::before { content: "\f095"; } .ce_teambox .ce_text .mobile.icon::before { content: "\f3cd"; } .ce_teambox ul.socials_list { list-style-type: none; padding: 0; } .ce_teambox ul.socials_list li { display: inline-block; margin: 0 3px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_teambox .ce_image img { width: 165px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_teambox .ce_image img { width: 150px; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.6. Zitatbox ====================================================================================== */ .ce_zitatbox { width: 100%; } .ce_zitatbox .inside > div:not(.ce_text) { width: 0; } .ce_zitatbox .img_left .ce_image { padding: 0 21px 0 0; } .ce_zitatbox .img_right .ce_image { padding: 0 0 0 21px; } .ce_zitatbox .offset_sm blockquote { margin: 7px 0; } .ce_zitatbox .offset_md blockquote { margin: 21px 0; } .ce_zitatbox .offset_lg blockquote { margin: 28px 0; } blockquote { border-left-style: solid; border-left-width: 3px; margin: 14px 0; padding-left: 21px; position: relative; quotes: none; } blockquote::before, blockquote::after { content: ""; content: none; } blockquote footer { font-size: 75%; padding: 7px 0; } blockquote footer::before { content: "\2014 \00A0"; } .zitatbox_2 blockquote { border-left: none; } .zitatbox_2 blockquote::before { content: "\f10d"; font-family: "Font Awesome 6 Free"; font-size: 48px; font-size: 3rem; font-weight: 700; left: 1px; position: absolute; top: 14px; z-index: -1; } .zitatbox_3 blockquote { border-bottom-style: solid; border-bottom-width: 3px; border-left: none; border-top-style: solid; border-top-width: 3px; padding: 14px 21px 7px; } .zitatbox_3 blockquote::before { content: "\f10d"; display: block; font-family: "Font Awesome 6 Free"; font-size: 32px; font-size: 2rem; font-weight: 700; height: 42px; line-height: 48px; margin: -36px auto -7px; text-align: center; width: 42px; } /* Media Query Anfang */ @media screen and (min-width: 1300px) { .ce_zitatbox .box_xlg_width_lg { margin: 0 10%; width: 80%; } .ce_zitatbox .box_xlg_width_md { margin: 0 17.5%; width: 65%; } .ce_zitatbox .box_xlg_width_sm { margin: 0 25%; width: 50%; } .ce_zitatbox .box_left.box_xlg_width_lg { margin: 0 20% 0 0; width: 80%; } .ce_zitatbox .box_left.box_xlg_width_md { margin: 0 35% 0 0; width: 65%; } .ce_zitatbox .box_left.box_xlg_width_sm { margin: 0 50% 0 0; width: 50%; } .ce_zitatbox .box_right.box_xlg_width_lg { margin: 0 0 0 20%; width: 80%; } .ce_zitatbox .box_right.box_xlg_width_md { margin: 0 0 0 35%; width: 65%; } .ce_zitatbox .box_right.box_xlg_width_sm { margin: 0 0 0 50%; width: 50%; } .ce_zitatbox .ce_image img { width: 150px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1299px) and (min-width: 1040px) { .ce_zitatbox .box_lg_width_lg { margin: 0 10%; width: 80%; } .ce_zitatbox .box_lg_width_md { margin: 0 17.5%; width: 65%; } .ce_zitatbox .box_lg_width_sm { margin: 0 25%; width: 50%; } .ce_zitatbox .box_left.box_lg_width_lg { margin: 0 20% 0 0; width: 80%; } .ce_zitatbox .box_left.box_lg_width_md { margin: 0 35% 0 0; width: 65%; } .ce_zitatbox .box_left.box_lg_width_sm { margin: 0 50% 0 0; width: 50%; } .ce_zitatbox .box_right.box_lg_width_lg { margin: 0 0 0 20%; width: 80%; } .ce_zitatbox .box_right.box_lg_width_md { margin: 0 0 0 35%; width: 65%; } .ce_zitatbox .box_right.box_lg_width_sm { margin: 0 0 0 50%; width: 50%; } .ce_zitatbox .ce_image img { width: 150px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) and (min-width: 780px) { .ce_zitatbox .box_md_width_lg { margin: 0 5%; width: 90%; } .ce_zitatbox .box_md_width_md { margin: 0 10%; width: 80%; } .ce_zitatbox .box_md_width_sm { margin: 0 15%; width: 70%; } .ce_zitatbox .box_left.box_md_width_lg { margin: 0 10% 0 0; width: 90%; } .ce_zitatbox .box_left.box_md_width_md { margin: 0 20% 0 0; width: 80%; } .ce_zitatbox .box_left.box_md_width_sm { margin: 0 30% 0 0; width: 70%; } .ce_zitatbox .box_right.box_md_width_lg { margin: 0 0 0 10%; width: 90%; } .ce_zitatbox .box_right.box_md_width_md { margin: 0 0 0 20%; width: 80%; } .ce_zitatbox .box_right.box_md_width_sm { margin: 0 0 0 30%; width: 70%; } .ce_zitatbox .img_left .ce_image { padding: 0 14px 0 0; } .ce_zitatbox .img_right .ce_image { padding: 0 0 0 14px; } .ce_zitatbox .ce_image img { width: 130px; } blockquote { padding-left: 14px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) and (min-width: 520px) { .ce_zitatbox .box_sm_width_lg { margin: 0 5%; width: 90%; } .ce_zitatbox .box_sm_width_md { margin: 0 10%; width: 80%; } .ce_zitatbox .box_sm_width_sm { margin: 0 15%; width: 70%; } .ce_zitatbox .box_left.box_sm_width_lg { margin: 0 10% 0 0; width: 90%; } .ce_zitatbox .box_left.box_sm_width_md { margin: 0 20% 0 0; width: 80%; } .ce_zitatbox .box_left.box_sm_width_sm { margin: 0 30% 0 0; width: 70%; } .ce_zitatbox .box_right.box_sm_width_lg { margin: 0 0 0 10%; width: 90%; } .ce_zitatbox .box_right.box_sm_width_md { margin: 0 0 0 20%; width: 80%; } .ce_zitatbox .box_right.box_sm_width_sm { margin: 0 0 0 30%; width: 70%; } .ce_zitatbox .img_left .ce_image { padding: 0 14px 0 0; } .ce_zitatbox .img_right .ce_image { padding: 0 0 0 14px; } .ce_zitatbox .ce_image img { width: 130px; } blockquote { padding-left: 14px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { .ce_zitatbox .box_md_width_lg, .ce_zitatbox .box_md_width_md, .ce_zitatbox .box_md_width_sm, .ce_zitatbox .box_left.box_md_width_lg, .ce_zitatbox .box_left.box_md_width_md, .ce_zitatbox .box_left.box_md_width_sm, .ce_zitatbox .box_right.box_md_width_lg, .ce_zitatbox .box_right.box_md_width_md, .ce_zitatbox .box_right.box_md_width_sm { margin: 0; } .ce_zitatbox .img_left .ce_image { padding: 0 7px 0 0; } .ce_zitatbox .img_right .ce_image { padding: 0 0 0 7px; } .ce_zitatbox .ce_image img { width: 100px; } .ce_zitatbox .img_left .image_container { margin-left: -15px; } .ce_zitatbox .img_right .image_container { margin-right: -15px; } blockquote { padding-left: 7px; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.7. Preistabelle ====================================================================================== */ .ce_preistabelle { width: 100%; } .ce_preistabelle .ce_headline i { margin-right: 7px; } .ce_preistabelle .preisbox .currency, .ce_preistabelle .preisbox .price, .ce_preistabelle .preisbox .unit { display: inline-block; font-weight: 700; } .ce_preistabelle .preisbox .currency { position: relative; top: -21px; } .ce_preistabelle .preisbox .price { font-size: 48px; font-size: 3rem; } .ce_preistabelle .preisbox .unit { font-weight: inherit; } .ce_preistabelle .ce_text { font-size: 12px; font-size: 0.75rem; } .ce_preistabelle ul.services_list { padding-left: 35px; } .ce_preistabelle ul.services_list li.item { line-height: 2; } .ce_preistabelle ul.services_list li.item i { margin: 7px 0 0 -22px; position: absolute; } .ce_preistabelle ul.services_list li.item.highlight { font-weight: 700; } .ce_preistabelle ul.services_list li.item.crossout { text-decoration: line-through; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.8. Iconbox ====================================================================================== */ .ce_iconbox, .ce_iconbox .inside { width: 100%; } .ce_iconbox[class*="border_"], .ce_iconbox[class*="bg_"], .ce_iconbox.padding { padding: 7px 11px; } .ce_iconbox .icon { margin: 7px 0; text-align: center; } .ce_iconbox .icon a { display: block; } .ce_iconbox .icon.left i, .ce_iconbox .icon.left svg { margin: 0 7px 0 0; } .ce_iconbox .icon.right i, .ce_iconbox .icon.right svg { margin: 0 0 0 7px; } .ce_iconbox .icon.left.outline_width_1 i, .ce_iconbox .icon.left.outline_width_1 svg, .ce_iconbox .icon.left.outline_width_1 span { margin: 1px 7px 1px 1px; } .ce_iconbox .icon.left.outline_width_2 i, .ce_iconbox .icon.left.outline_width_2 svg, .ce_iconbox .icon.left.outline_width_2 span { margin: 2px 9px 2px 2px; } .ce_iconbox .icon.left.outline_width_3 i, .ce_iconbox .icon.left.outline_width_3 svg, .ce_iconbox .icon.left.outline_width_3 span { margin: 3px 10px 3px 3px; } .ce_iconbox .icon.left.outline_width_5 i, .ce_iconbox .icon.left.outline_width_5 svg, .ce_iconbox .icon.left.outline_width_5 span { margin: 5px 12px 5px 5px; } .ce_iconbox .icon.left.outline_width_7 i, .ce_iconbox .icon.left.outline_width_7 svg, .ce_iconbox .icon.left.outline_width_7 span { margin: 7px 14px 7px 7px; } .ce_iconbox .icon.left.outline_width_9 i, .ce_iconbox .icon.left.outline_width_9 svg, .ce_iconbox .icon.left.outline_width_9 span { margin: 9px 16px 9px 9px; } .ce_iconbox .icon.left.outline_width_14 i, .ce_iconbox .icon.left.outline_width_14 svg, .ce_iconbox .icon.left.outline_width_14 span { margin: 14px 21px 14px 14px; } .ce_iconbox .icon.left.outline_width_21 i, .ce_iconbox .icon.left.outline_width_21 svg, .ce_iconbox .icon.left.outline_width_21 span { margin: 21px 28px 21px 21px; } .ce_iconbox .icon.left.outline_width_28 i, .ce_iconbox .icon.left.outline_width_28 svg, .ce_iconbox .icon.left.outline_width_28 span { margin: 28px 35px 28px 28px; } .ce_iconbox .icon.right.outline_width_1 i, .ce_iconbox .icon.right.outline_width_1 svg, .ce_iconbox .icon.right.outline_width_1 span { margin: 1px 1px 1px 8px; } .ce_iconbox .icon.right.outline_width_2 i, .ce_iconbox .icon.right.outline_width_2 svg, .ce_iconbox .icon.right.outline_width_2 span { margin: 2px 2px 2px 9px; } .ce_iconbox .icon.right.outline_width_3 i, .ce_iconbox .icon.right.outline_width_3 svg, .ce_iconbox .icon.right.outline_width_3 span { margin: 3px 3px 3px 10px; } .ce_iconbox .icon.right.outline_width_5 i, .ce_iconbox .icon.right.outline_width_5 svg, .ce_iconbox .icon.right.outline_width_5 span { margin: 5px 5px 5px 12px; } .ce_iconbox .icon.right.outline_width_7 i, .ce_iconbox .icon.right.outline_width_7 svg, .ce_iconbox .icon.right.outline_width_7 span { margin: 7px 7px 7px 14px; } .ce_iconbox .icon.right.outline_width_9 i, .ce_iconbox .icon.right.outline_width_9 svg, .ce_iconbox .icon.right.outline_width_9 span { margin: 9px 9px 9px 16px; } .ce_iconbox .icon.right.outline_width_14 i, .ce_iconbox .icon.right.outline_width_14 svg, .ce_iconbox .icon.right.outline_width_14 span { margin: 14px 14px 14px 21px; } .ce_iconbox .icon.right.outline_width_21 i, .ce_iconbox .icon.right.outline_width_21 svg, .ce_iconbox .icon.right.outline_width_21 span { margin: 21px 21px 21px 28px; } .ce_iconbox .icon.right.outline_width_28 i, .ce_iconbox .icon.right.outline_width_28 svg, .ce_iconbox .icon.right.outline_width_28 span { margin: 28px 28px 28px 35px; } .ce_iconbox .item.before, .ce_iconbox .item.after { display: table-row; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.9. Zeitstrahl ====================================================================================== */ .ce_zeitstrahl { width: 100%; } .ce_zeitstrahl::before { content: ""; height: 100%; left: 50%; margin-left: -3px; position: absolute; width: 5px; } .ce_zeitstrahl .box_date::before { content: ""; height: 39px; position: absolute; right: -19px; width: 39px; z-index: 1; } .ce_zeitstrahl .box_date { font-size: 20px; font-size: 1.25rem; text-align: right; } .ce_zeitstrahl .box_date::after { border-style: solid; border-width: 5px; content: ""; height: 21px; position: absolute; right: -15px; width: 21px; top: 32px; z-index: 2; } .ce_zeitstrahl .box_date, .ce_zeitstrahl .box_text { float: left; padding: 28px 70px; position: relative; width: 50%; } .ce_zeitstrahl .box_text::before { content: ""; height: 5px; left: 0; position: absolute; top: 45px; width: 42px; } .ce_zeitstrahl .box_text { float: right; } .ce_zeitstrahl .box_text .img_after { margin-top: 7px; } .ce_zeitstrahl .box_text .inside[class*="bg_"] { padding: 7px 11px; } .ce_zeitstrahl .box_text .inside[class*="bg_"] .img_before { margin: -7px -11px 0; } .ce_zeitstrahl .box_text .inside[class*="bg_"] .img_after { margin: 7px -11px -7px; } .ce_zeitstrahl.text_left .box_date:before { left: -20px; right: auto; } .ce_zeitstrahl.text_left .box_date { float: right; text-align: left; } .ce_zeitstrahl.text_left .box_date:after { left: -16px; right: auto; } .ce_zeitstrahl.text_left .box_text:before { left: auto; right: 0; } .ce_zeitstrahl.text_left .box_text { float: left; } .column_both .ce_zeitstrahl::before { left: 65px; } .column_both .ce_zeitstrahl .box_date { padding: 16px 0; text-align: left; width: 65px; } .column_both .ce_zeitstrahl .box_date::after { top: 20px; } .column_both .ce_zeitstrahl .box_text::before { width: 20px; top: 33px; } .column_both .ce_zeitstrahl .box_text { padding: 12px 0 12px 30px; width: calc(100% - 82px); } .column_both .ce_zeitstrahl.text_left .box_date::before { left: auto; right: -19px; } .column_both .ce_zeitstrahl.text_left .box_date { float: left; } .column_both .ce_zeitstrahl.text_left .box_date::after { left: auto; right: -15px; } .column_both .ce_zeitstrahl.text_left .box_text::before { left: 0; right: auto; } .column_both .ce_zeitstrahl.text_left .box_text { float: right; text-align: left; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_zeitstrahl .box_date, .ce_zeitstrahl .box_text { padding: 14px 48px; } .ce_zeitstrahl .box_date::after { top: 18px; } .ce_zeitstrahl .box_text::before { width: 36px; top: 31px; } .column_left .ce_zeitstrahl::before, .column_right .ce_zeitstrahl::before { left: 65px; } .column_left .ce_zeitstrahl .box_date, .column_right .ce_zeitstrahl .box_date { padding: 16px 0; text-align: left; width: 65px; } .column_left .ce_zeitstrahl .box_date::after, .column_right .ce_zeitstrahl .box_date::after { top: 20px; } .column_left .ce_zeitstrahl .box_text::before, .column_right .ce_zeitstrahl .box_text::before { width: 20px; top: 33px; } .column_left .ce_zeitstrahl .box_text, .column_right .ce_zeitstrahl .box_text { padding: 12px 0 12px 30px; width: calc(100% - 82px); } .column_left .ce_zeitstrahl.text_left .box_date::before, .column_right .ce_zeitstrahl.text_left .box_date::before { left: auto; right: -19px; } .column_left .ce_zeitstrahl.text_left .box_date, .column_right .ce_zeitstrahl.text_left .box_date { float: left; } .column_left .ce_zeitstrahl.text_left .box_date::after, .column_right .ce_zeitstrahl.text_left .box_date::after { left: auto; right: -15px; } .column_left .ce_zeitstrahl.text_left .box_text::before, .column_right .ce_zeitstrahl.text_left .box_text::before { left: 0; right: auto; } .column_left .ce_zeitstrahl.text_left .box_text, .column_right .ce_zeitstrahl.text_left .box_text { float: right; text-align: left; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_zeitstrahl::before { left: 65px; } .ce_zeitstrahl .box_date { padding: 16px 0; text-align: left !important; width: 65px; } .ce_zeitstrahl .box_date::after { top: 20px; } .ce_zeitstrahl .box_text::before { width: 20px; top: 33px; } .ce_zeitstrahl .box_text { padding: 12px 0 12px 30px; width: calc(100% - 82px); } .ce_zeitstrahl.text_left .box_date::before { left: auto; right: -19px; } .ce_zeitstrahl.text_left .box_date { float: left; } .ce_zeitstrahl.text_left .box_date::after { left: auto; right: -15px; } .ce_zeitstrahl.text_left .box_text::before { left: 0; right: auto; } .ce_zeitstrahl.text_left .box_text { float: right; } .ce_zeitstrahl.text_left .box_text .right { text-align: left; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.10. Landkarte ====================================================================================== */ .ce_landkarte { width: 100%; } .ce_landkarte iframe { border: none !important; display: block; width: 100%; } /* Media Query Anfang */ @media screen and (min-width: 1300px) { .ce_landkarte.xlg_map_height_vh iframe { height: calc(100vh - 112px); } .ce_landkarte.xlg_map_height_lg iframe { height: 430px; } .ce_landkarte.xlg_map_height_md iframe { height: 280px; } .ce_landkarte.xlg_map_height_sm iframe { height: 130px; } .ce_landkarte.xlg_map_width_lg { width: 75%; } .ce_landkarte.xlg_map_width_md { width: 50%; } .ce_landkarte.xlg_map_width_sm { width: 25%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1299px) and (min-width: 1040px) { .ce_landkarte.lg_map_height_lg iframe { height: calc(100vh - 112px); } .ce_landkarte.lg_map_height_lg iframe { height: 430px; } .ce_landkarte.lg_map_height_md iframe { height: 280px; } .ce_landkarte.lg_map_height_sm iframe { height: 130px; } .ce_landkarte.lg_map_width_lg { width: 75%; } .ce_landkarte.lg_map_width_md { width: 50%; } .ce_landkarte.lg_map_width_sm { width: 25%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) and (min-width: 780px) { .ce_landkarte.md_map_height_lg iframe { height: calc(100vh - 112px); } .ce_landkarte.md_map_height_lg iframe { height: 430px; } .ce_landkarte.md_map_height_md iframe { height: 280px; } .ce_landkarte.md_map_height_sm iframe { height: 130px; } .ce_landkarte.md_map_width_lg { width: 75%; } .ce_landkarte.md_map_width_md { width: 50%; } .ce_landkarte.md_map_width_sm { width: 25%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) and (min-width: 520px) { .ce_landkarte.sm_map_height_lg iframe { height: calc(100vh - 112px); } .ce_landkarte.sm_map_height_lg iframe { height: 430px; } .ce_landkarte.sm_map_height_md iframe { height: 280px; } .ce_landkarte.sm_map_height_sm iframe { height: 130px; } .ce_landkarte.sm_map_width_lg { width: 75%; } .ce_landkarte.sm_map_width_md { width: 50%; } .ce_landkarte.sm_map_width_sm { width: 25%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { .ce_landkarte.xsm_map_height_lg iframe { height: calc(100vh - 112px); } .ce_landkarte.xsm_map_height_lg iframe { height: 430px; } .ce_landkarte.xsm_map_height_md iframe { height: 280px; } .ce_landkarte.xsm_map_height_sm iframe { height: 130px; } .ce_landkarte.xsm_map_width_lg { width: 75%; } .ce_landkarte.xsm_map_width_md { width: 50%; } .ce_landkarte.xsm_map_width_sm { width: 25%; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.11. iframe-Element ====================================================================================== */ .ce_iframe .map_container iframe { width: 100%; } .ce_iframe .video_container { height: auto; padding-bottom: 56.25%; position: relative; width: 100%; } .ce_iframe .video_container iframe { bottom: 0; height: 100% !important; left: 0; position: absolute; right: 0; top: 0; width: 100% !important; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.12. Anker-Element ====================================================================================== */ .ce_anker_element, .anker { margin-top: -110px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_anker_element, .anker { margin-top: -80px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_anker_element, .anker { margin-top: -87px; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.13. Umschaltumschlag ====================================================================================== */ /* max-height: in custom.css angeben */ .ce_umschaltumschlag { overflow: hidden; width: 100%; } .ce_umschaltumschlag.show { max-height: 100% !important; } #toggler-button .button > a.less, #toggler-button .button.active > a.more { display: none; } #toggler-button .button.active > a.less { display: inline; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.14. Tabs ====================================================================================== */ .ce_tabs > input[type="radio"] { display: none; } .ce_tabs > input:checked + label::before { content: "\f0d7"; display: inline-block; font-family: "Font Awesome 6 Free"; font-size: 16px; font-size: 1rem; font-weight: 700; margin-right: 7px; width: 15px; } .ce_tabs > label { border-style: solid; border-width: 1px; cursor: pointer; display: inline-block; font-weight: 700; padding: 12px; margin: 3px 0; } .ce_tabs .tab_panel { display: none; } .ce_tabs > input:first-child:checked ~ .tab_panels > .tab_panel:first-child, .ce_tabs > input:nth-child(3):checked ~ .tab_panels > .tab_panel:nth-child(2), .ce_tabs > input:nth-child(5):checked ~ .tab_panels > .tab_panel:nth-child(3), .ce_tabs > input:nth-child(7):checked ~ .tab_panels > .tab_panel:nth-child(4), .ce_tabs > input:nth-child(9):checked ~ .tab_panels > .tab_panel:nth-child(5), .ce_tabs > input:nth-child(11):checked ~ .tab_panels > .tab_panel:nth-child(6), .ce_tabs > input:nth-child(13):checked ~ .tab_panels > .tab_panel:nth-child(7), .ce_tabs > input:nth-child(15):checked ~ .tab_panels > .tab_panel:nth-child(8), .ce_tabs > input:nth-child(17):checked ~ .tab_panels > .tab_panel:nth-child(9), .ce_tabs > input:nth-child(19):checked ~ .tab_panels > .tab_panel:nth-child(10), .ce_tabs > input:nth-child(21):checked ~ .tab_panels > .tab_panel:nth-child(11), .ce_tabs > input:nth-child(23):checked ~ .tab_panels > .tab_panel:nth-child(12), .ce_tabs > input:nth-child(25):checked ~ .tab_panels > .tab_panel:nth-child(13), .ce_tabs > input:nth-child(27):checked ~ .tab_panels > .tab_panel:nth-child(14), .ce_tabs > input:nth-child(29):checked ~ .tab_panels > .tab_panel:nth-child(15), .ce_tabs > input:nth-child(31):checked ~ .tab_panels > .tab_panel:nth-child(16), .ce_tabs > input:nth-child(33):checked ~ .tab_panels > .tab_panel:nth-child(17), .ce_tabs > input:nth-child(35):checked ~ .tab_panels > .tab_panel:nth-child(18), .ce_tabs > input:nth-child(37):checked ~ .tab_panels > .tab_panel:nth-child(19), .ce_tabs > input:nth-child(39):checked ~ .tab_panels > .tab_panel:nth-child(20) { display: block; } .ce_tabs > input:first-child:checked ~ .tab_panels > .tab_panel.flexbox:first-child, .ce_tabs > input:nth-child(3):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(2), .ce_tabs > input:nth-child(5):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(3), .ce_tabs > input:nth-child(7):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(4), .ce_tabs > input:nth-child(9):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(5), .ce_tabs > input:nth-child(11):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(6), .ce_tabs > input:nth-child(13):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(7), .ce_tabs > input:nth-child(15):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(8), .ce_tabs > input:nth-child(17):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(9), .ce_tabs > input:nth-child(19):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(10), .ce_tabs > input:nth-child(21):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(11), .ce_tabs > input:nth-child(23):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(12), .ce_tabs > input:nth-child(25):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(13), .ce_tabs > input:nth-child(27):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(14), .ce_tabs > input:nth-child(29):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(15), .ce_tabs > input:nth-child(31):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(16), .ce_tabs > input:nth-child(33):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(17), .ce_tabs > input:nth-child(35):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(18), .ce_tabs > input:nth-child(37):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(19), .ce_tabs > input:nth-child(39):checked ~ .tab_panels > .tab_panel.flexbox:nth-child(20) { display: -webkit-flex; display: -ms-flex; display: flex; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.15. Animierte Zahlen ====================================================================================== */ .ce_count_up { padding: 7px 14px; width: 100%; } .ce_count_up span.counter { font-size: 24px; font-size: 1.5rem; font-weight: 700; } .ce_count_up span.add { display: block; } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.1. Umschaltnavigation ====================================================================================== */ #toggle-nav { background: transparent; border-style: none; border-width: 0; display: none; font-size: 24px; font-size: 1.5rem; height: 47px; position: absolute; right: 2px; text-align: center; width: 47px; } #toggle-nav::after { content: "\f0c9"; font-family: "Font Awesome 6 Free"; font-weight: 700; } #toggle-nav.active::after { content: "\f00d"; } ul.nav_toggle:not(.level_1) { display: none; } ul.nav_toggle li { position: relative; } ul.nav_toggle li.active > ul, ul.nav_toggle li.trail > ul { display: block; } #nav-main .toggle, .nav_sub .toggle { background: transparent; border: none; margin: 0; padding: 5.5px 10px; position: absolute; right: 0; top: 0; } #nav-main .toggle::after, .nav_sub .toggle::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-size: 14px; font-size: 0.875rem; font-weight: 700; } #nav-main .toggle.active::after, #nav-main .toggle.trail::after, .nav_sub .toggle.active::after, .nav_sub .toggle.trail::after { content: "\f068"; } /* Media Query Anfang */ @media screen and (min-width: 780px) { #nav-main ul.level_1 > li > .toggle { display: none; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #toggle-nav { display: block; } #nav-main ul li .toggle { height: 48px; right: 0; width: 50px; } #nav-main ul li .toggle::after { font-size: 18px; font-size: 1.125rem; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.2. Kopfnavigation ====================================================================================== */ #nav-top ul { padding: 0; } #nav-top ul li { display: inline-block; } #nav-top a, #nav-top strong { display: block; font-size: 12px; font-size: 0.75rem; font-weight: normal; text-decoration: none; padding: 7px; } /* Media Query Anfang */ @media screen and (min-width: 780px) { .header-left #nav-top, .header-right #nav-top { bottom: 10px; position: fixed; } .header-left #nav-top ul li, .header-right #nav-top ul li { display: block; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #nav-top { margin-right: 3px; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.3. Hauptnavigation ====================================================================================== */ #nav-main { position: unset; } #nav-main ul { padding: 0; } #nav-main a, #nav-main strong { display: block; font-weight: normal; text-decoration: none; } /* Media Query Anfang */ @media screen and (min-width: 780px) { .header-left #nav-main, .header-right #nav-main { width: 100%; } #nav-main ul.level_1 > li { display: inline-block; position: unset; } .header-left #nav-main ul.level_1 > li, .header-right #nav-main ul.level_1 > li { display: block; } #nav-main ul.level_1 > li.submenu > a::after, #nav-main ul.level_1 > li.submenu > strong::after { content: "\f0d7"; font-family: "Font Awesome 6 Free"; font-size: 14px; font-size: 0.875rem; font-weight: 700; margin-left: 7px; } .header-left #nav-main ul.level_1 > li.submenu > a::after, .header-left #nav-main ul.level_1 > li.submenu > strong::after { content: "\f0da"; } .header-right #nav-main ul.level_1 > li.submenu > a::before, .header-right #nav-main ul.level_1 > li.submenu > strong::before { content: "\f0d9"; font-family: "Font Awesome 6 Free"; font-size: 14px; font-size: 0.875rem; font-weight: 700; margin-right: 7px; } .header-right #nav-main ul.level_1 > li.submenu > a::after, .header-right #nav-main ul.level_1 > li.submenu > strong::after { content: ""; } #nav-main ul.level_1 > li:last-child > ul { left: auto; right: 15px; } #nav-main ul.level_1 > li:hover > ul { display: block; max-height: 80vh; overflow-x: hidden; overflow-y: scroll; } #nav-main ul.level_1 > li > a, #nav-main ul.level_1 > li > strong { font-weight: 700; padding: 17px 10px; } #nav-main ul.level_2 { display: none; overflow: hidden; position: absolute; z-index: 99; } .header-left #nav-main ul.level_2 { left: calc(100% - 15px); top: 0; } .header-right #nav-main ul.level_2 { right: calc(100% - 15px); top: 0; } #nav-main ul.level_2 li a, #nav-main ul.level_2 li strong { border-bottom: 0; padding: 7px 10px; } #nav-main ul.level_2 li a.submenu, #nav-main ul.level_2 li strong.submenu { padding: 7px 30px 7px 10px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) and (min-width: 780px) { #nav-main ul.level_1 > li > a, #nav-main ul.level_1 > li > strong { padding: 7px; } #nav-main ul.level_1 > li:last-child > ul { right: 10px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #nav-main { bottom: 0; display: none; height: calc(100% - 89px); left: 0; overflow-x: hidden; overflow-y: scroll; position: fixed; top: 89px; width: 100%; } #nav-main.active { display: block; } #nav-main ul.level_1 li { position: relative; } #nav-main ul.level_1 li a, #nav-main ul.level_1 li strong { padding: 14px 10px; } #nav-main ul.level_1 li.active > ul, #nav-main ul.level_1 li.trail > ul { display: block; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.4. Lokale Navigation ====================================================================================== */ .no_nav_sub .nav_sub { /* Lokale Navigation ausblenden */ display: none; } .nav_sub { margin: 15px; } .nav_sub ul { padding: 0; } .nav_sub a, .nav_sub strong { border-bottom: 0; display: block; font-weight: normal; padding: 7px 10px; text-decoration: none; } .nav_sub a.submenu, .nav_sub strong.submenu { padding: 7px 30px 7px 10px; } .nav_sub ul.level_1 { overflow: hidden; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .nav_sub { margin: 10px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .nav_sub_headline, .nav_sub { display: none; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.5. Nachrichtenarchiv-Navigation ====================================================================================== */ .mod_newsmenu ul { padding: 0; } .mod_newsmenu a, .mod_newsmenu strong { border-bottom: 0; display: block; font-weight: normal; padding: 7px 10px; text-decoration: none; } .mod_newsmenu ul.level_2 > li > a, .mod_newsmenu ul.level_2 > li > strong { padding-left: 21px; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .mod_newsmenu { display: none; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.6. Fußnavigation ====================================================================================== */ #nav-footer ul { padding: 0; } #nav-footer ul li { display: inline-block; text-align: left; } #nav-footer a, #nav-footer strong { display: block; font-size: 14px; font-size: 0.875rem; font-weight: normal; text-decoration: none; padding: 7px; } /* Media Query Anfang */ @media screen and (max-width: 779px) { #nav-footer { float: none; margin: auto; text-align: center; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.7. Navigationspfad ====================================================================================== */ .no_nav_breadcrumb #nav-breadcrumb { display: none; } .column_left #nav-breadcrumb, .boxed #nav-breadcrumb { margin: 25px auto 0; } .boxed #nav-breadcrumb { max-width: 1270px; } #nav-breadcrumb ul { list-style: none; overflow: hidden; padding: 7px 15px; } #nav-breadcrumb ul li { float: left; } #nav-breadcrumb ul li + li::before { content: "/"; padding: 0 5px; } #nav-breadcrumb ul li a { text-decoration: none; } /* Media Query Anfang */ @media screen and (max-width: 1299px) { .boxed #nav-breadcrumb { max-width: 1010px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .boxed #nav-breadcrumb { max-width: 740px; } #nav-breadcrumb ul { padding: 7px 10px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .column_left #nav-breadcrumb, .boxed #nav-breadcrumb { margin-top: 0; max-width: 100%; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.8. Seitennummerierung ====================================================================================== */ .pagination p { display: none; } .pagination ul li { float: left; margin: 3px 0; } .pagination ul li a, .pagination ul li strong { border-style: solid; border-width: 1px; display: block; padding: 5px 10px; text-decoration: none; } .pagination ul li:not(:last-of-type) a, .pagination ul li:not(:last-of-type) strong { border-right-width: 0; } .pagination ul li strong { font-weight: normal; } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.9. HTML-Sitemap ====================================================================================== */ .mod_sitemap ul { line-height: 2; margin: 0 0 0 20px; padding: 0; } .mod_sitemap ul li i::before { content: ""; } .mod_sitemap ul li::before { content: "\f07b"; display: inline-block; font-family: "Font Awesome 6 Free"; font-size: 32px; font-size: 2rem; font-weight: 700; margin: -18px 0 0 -38px; position: absolute; } .mod_sitemap ul li:hover::before { font-weight: 400; } .mod_sitemap ul li { margin-left: 20px; padding: 7px 0; } .mod_sitemap ul li.submenu::before { content: "\f07c"; } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.10. Sprachenwechsler ====================================================================================== */ .mod_changelanguage > ul { padding: 5px 0; } .mod_changelanguage > ul li { display: inline-block; } .mod_changelanguage > ul li img { width: 16px; } /* ====================================================================================== 4. Frontend-Module 4.2. Benutzer ====================================================================================== */ .mod_changePassword .widget, .mod_closeAccount .widget, .mod_login .widget, .mod_lostPassword .widget, .mod_personalData .widget, .mod_registration .widget { padding: 7px 2px; } .mod_changePassword .widget-text label, .mod_closeAccount .widget-text label, .mod_login .widget-text label, .mod_lostPassword .widget-text label, .mod_personalData .widget-text label, .mod_registration .widget-text label, .mod_changePassword .widget-password label, .mod_login .widget-password label, .mod_lostPassword .widget-password label, .mod_registration .widget-password label, .mod_lostPassword .widget-captcha label, .mod_login .widget-checkbox legend, .mod_registration .widget-checkbox legend { font-weight: 700; } .mod_login .checkbox_container label { display: block; margin: -21px 0 0 21px; } .mod_changePassword p.tl_confirm, .mod_changePassword p.error, .mod_login .error, .mod_lostPassword p.confirm, .mod_lostPassword p.error, .mod_personalData p.tl_confirm, .mod_registration p.confirm, .mod_registration p.error, .mod_subscribe p.confirm, .mod_subscribe p.error, .mod_unsubscribe p.error { border-style: solid; border-width: 1px; margin: 7px 0; padding: 7px 11px; } p.button.lost_passwort { margin-left: 14px; } /* ====================================================================================== 4. Frontend-Module 4.3. Anwendungen 4.3.1. Suchmaschine ====================================================================================== */ .mod_search .widget-text { padding: 7px 2px; } .mod_search .widget-submit { margin-top: -7px; } .mod_search .widget-text input.text { float: left; width: calc(100% - 85px); } .mod_search .widget-submit button { float: right; margin: 0; } .mod_search .widget-radio { clear: both; } .mod_search .radio_container label { display: block; margin: -21px 0 0 21px; } .mod_search .header, .mod_search .info { border-style: solid; border-width: 1px; margin: 7px 0; padding: 7px 11px; } .mod_search .even:not(.last), .mod_search .odd:not(.last) { margin-bottom: 28px; } .mod_search h3 > a { display: block; } .mod_search h3 > a:hover { text-decoration: none; } .mod_search .relevance { font-weight: 400; } /* ====================================================================================== 4. Frontend-Module 4.4. Verschiedenes 4.4.1. Cookiebar ====================================================================================== */ .contao-cookiebar .cc-btn { line-height: 1; } .contao-cookiebar .cc-groups .cc-group > label { margin: 5px 10px; } /* Media Query Anfang */ @media screen and (min-width: 520px) { .contao-cookiebar .cc-inner { max-width: 500px; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.5. Events ====================================================================================== */ .mod_calendar .calendar_head.months { display: table; height: 61px; padding: 7px; position: relative; text-align: center; width: 100%; } .mod_calendar .calendar_head .current { display: table-cell; font-size: 24px; font-size: 1.5rem; font-weight: 700; vertical-align: middle; } .mod_calendar .calendar_head .previous, .mod_calendar .calendar_head .next { left: 0; position: absolute; } .mod_calendar .calendar_head .next { left: auto; right: 0; } .mod_calendar .calendar_head.days { font-weight: 700; overflow: hidden; position: relative; text-align: center; } .mod_calendar .calendar_head .days, .mod_calendar .calendar_body .days { border-style: solid; border-width: 1px; float: left; padding: 7px; width: 14.28%; } .mod_calendar .calendar_head .days:not(.col_first), .mod_calendar .calendar_body .days:not(.col_first) { border-left-style: none; } .mod_calendar .calendar_body div[class*="week_"] { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; float: left; width: 100%; } .mod_calendar .calendar_body .days { border-top-style: none; min-height: 100px; } .mod_calendar .calendar_body .days .label, .mod_calendar .calendar_body .days .event { font-size: 14px; font-size: 0.875rem; } .mod_calendar .calendar_body .days .label { padding-left: 3px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .column_both .mod_calendar .calendar_head .days span, .column_left .mod_calendar .calendar_head .days span, .column_right .mod_calendar .calendar_head .days span { display: none; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .mod_calendar .calendar_head .current, .mod_calendar .calendar_head .previous, .mod_calendar .calendar_head .next { display: block; position: relative; } .mod_calendar .calendar_head .days span { display: none; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.6. FAQ ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.7. Nachrichten 4.7.1 Nachrichtenarchiv und -liste ====================================================================================== */ .mod_newsarchive .news_article, .mod_newslist .news_article { margin: -14px; overflow: hidden; width: calc(100% + 28px); } .mod_newsarchive:not(.masonry) .news_article, .mod_newslist:not(.masonry) .news_article { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mod_newsarchive .layout_latest, .mod_newslist .layout_latest { float: left; margin: 14px; position: relative; width: calc(100% - 28px); } .mod_newsarchive .layout_latest h2 > a:hover, .mod_newslist .layout_latest h2 > a:hover { text-decoration: none; } .mod_newsarchive .layout_latest h3, .mod_newslist .layout_latest h3 { margin-top: -14px; font-size: 18px; font-size: 1.125rem; font-weight: 400; } .mod_newsarchive .layout_latest .image_container img, .mod_newslist .layout_latest .image_container img { height: 100%; object-fit: cover; object-position: 50%; } .mod_newsarchive .layout_latest p.info, .mod_newslist .layout_latest p.info { font-size: 12px; font-size: 0.75rem; margin-top: -14px; } .mod_newsarchive .layout_latest time, .mod_newslist .layout_latest time { display: block; } .mod_newsarchive:not([class*="button_"]) .layout_latest p.button, .mod_newslist:not([class*="button_"]) .layout_latest p.button { padding: 0; } .mod_newsarchive .layout_latest .more, .mod_newslist .layout_latest .more { margin: 0 -14px; padding: 7px 11px; } /* ====================================================================================== 4. Frontend-Module 4.7. Nachrichten 4.7.2 Nachrichtenleser ====================================================================================== */ .mod_newsreader .layout_full p.info { font-size: 12px; font-size: 0.75rem; margin-top: -14px; } .mod_newsreader .layout_full time { display: block; } /* ====================================================================================== 4. Frontend-Module 4.8. Newsletter ====================================================================================== */ .mod_subscribe.activate form { display: none; } .mod_unsubscribe .widget-text input.text { float: left; width: calc(100% - 101px); } .mod_unsubscribe .widget-submit button { float: right; margin: 0; } /* ====================================================================================== 5. Wartungsmodus ====================================================================================== */ .wartungsmodus .logo { margin: 0 auto; width: 325px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .wartungsmodus .logo { width: 200px; } /* Media Query Ende */ } /* ====================================================================================== 6. Dark Mode 6.1. Switch-Button ====================================================================================== */ .switch_dark_mode { float: left; margin: 4px 0 -4px; } .switch_dark_mode p { float: right; font-size: 12px; font-size: 0.75rem; padding: 4px 7px; } .switch_dark_mode .switch { display: inline-block; height: 22px; position: relative; width: 42px; } .switch_dark_mode input { display: none; } .switch_dark_mode .slider { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; } .switch_dark_mode .slider::before { bottom: 4px; content: ""; height: 14px; left: 4px; position: absolute; width: 14px; } .switch_dark_mode input:checked + .slider::before, [data-theme="dark"] .switch_dark_mode input + .slider::before { -webkit-transform: translateX(21px); -ms-transform: translateX(21px); transform: translateX(21px); } /* Media Query Anfang */ @media screen and (min-width: 780px) { .header-left .switch_dark_mode, .header-right .switch_dark_mode { margin: 4px 0 0; } /* Media Query Ende */ } /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.1. Text ====================================================================================== */ [data-theme="dark"] #toggle-nav::after, [data-theme="dark"] #nav-main .toggle, [data-theme="dark"] .nav_sub .toggle, [data-theme="dark"] #nav-breadcrumb ul li a { color: #fff !important; } [data-theme="dark"] body, [data-theme="dark"] .color_dark, [data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]), [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] #nav-top a, [data-theme="dark"] #nav-top strong, [data-theme="dark"] #nav-main a, [data-theme="dark"] #nav-main strong { color: #bebebe !important; } /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.2. Hintergrund ====================================================================================== */ [data-theme="dark"] body, [data-theme="dark"] .bg_white, [data-theme="dark"] #nav-main ul.level_2, [data-theme="dark"] #nav-main ul.level_4, [data-theme="dark"] .nav_sub ul.level_1, [data-theme="dark"] .nav_sub ul.level_3, [data-theme="dark"] .ce_download::before, [data-theme="dark"] .ce_downloads::before { background-color: #222 !important; } [data-theme="dark"] .bg_light, [data-theme="dark"] #nav-main ul.level_3, [data-theme="dark"] .nav_sub ul.level_2, [data-theme="dark"] #nav-breadcrumb ul, [data-theme="dark"] .filter_reset, [data-theme="dark"] .ce_accordion .toggler, [data-theme="dark"] .ce_gallery figcaption, [data-theme="dark"] .ce_image figcaption, [data-theme="dark"] .ce_sliderStart .slider-control, [data-theme="dark"] .ce_text hr, [data-theme="dark"] .ce_text pre, [data-theme="dark"] .ce_text_bild_kachel.bg_light .box_img.arrow::before, [data-theme="dark"] .ce_zeitstrahl.bg_icon_light .box_date::before, [data-theme="dark"] .ce_zeitstrahl.timeline_light::before, [data-theme="dark"] .ce_zeitstrahl.timeline_light .box_text::before, [data-theme="dark"] .ce_zitatbox.zitatbox_3.bg_icon_light blockquote::before, [data-theme="dark"] .mod_calendar .calendar_head .days, [data-theme="dark"] .mod_calendar .calendar_body .days .label, [data-theme="dark"] .pagination ul li a:hover, [data-theme="dark"] tfoot td, [data-theme="dark"] th { background-color: #181818 !important; } [data-theme="dark"] .ce_code code.hljs { background-color: #282c34 !important; } /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.3. Rahmen ====================================================================================== */ /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.4. Schatten ====================================================================================== */ /* ====================================================================================== 7. Eigene Klassen ====================================================================================== */ .agentur_zentral_impressum { line-height: 1; } .agentur_zentral_impressum a[target="_blank"]::after { content: "" !important; } /* ====================================================================================== Styleseet für BikeMetrics. Individuelle Änderungen vornehmen! Datei: custom.css Datum: 18.06.2025 Autor: Marco Dittmer, Agentur Zentral Aufbau: 1. Allgemeine Styles 1.1. Typografie 1.1.1. Webfonts 1.1.2. Textstrukturierung und Überschriften 1.1.3. Icon-Größen 1.2. Farben 1.2.1. Text 1.2.2. Hintergrund 1.2.3. Rahmen 1.2.4. Umrisse 1.2.5. Schatten 1.3. Ausrichtung 1.4. Buttons 1.5. Formularfelder 1.6. Radien 1.7. Rahmen 1.8. Umrisse 1.9. Transparenz 1.10. Overlays 1.11. Zoom 1.12. Übergang 2. Layout 2.1. Kopfzeile 2.2. Hauptzeile 2.2.1. Linke Spalte 2.2.2. Hauptspalte 2.2.3. Rechte Spalte 2.3. Unterzeile 2.4. Fußzeile 3. Core-Elemente 3.1. Text-Elemente 3.1.1. Überschrift 3.1.2. Text 3.1.3. Aufzählung 3.1.4. Tabelle 3.1.5. Code 3.1.6. Markdown 3.2. Akkordeon 3.3. Content-Slider 3.4. Link-Elemente 3.4.1. Hyperlink 3.4.2. Top-Link 3.5. Media-Elemente 3.5.1. Bild 3.5.2. Galerie 3.5.3. Video/Audio 3.5.4. YouTube 3.5.5. Vimeo 3.5.6. Colorbox 3.6. Datei-Elemente 3.6.1. Download 3.6.2. Downloads 3.7. Include-Elemente 3.7.1. Formulare 3.7.2. Kommentare 3.8. Elementgenerator 3.8.1. Teaserbild 3.8.2. Teaserbox 3.8.3. Text/Bild-Kachel 3.8.4. Hinweisbox 3.8.5. Teambox 3.8.6. Zitatbox 3.8.7. Preistabelle 3.8.8. Iconbox 3.8.9. Zeitstrahl 3.8.10. Landkarte 3.8.11. iframe-Element 3.8.12. Anker-Element 3.8.13. Umschaltumschlag 3.8.14. Tabs 3.8.15. Animierte Zahlen 4. Frontend-Module 4.1. Navigation 4.1.1. Umschaltnavigation 4.1.2. Kopfnavigation 4.1.3. Hauptnavigation 4.1.4. Lokale Navigation 4.1.5. Nachrichtenarchiv-Navigation 4.1.6. Fußnavigation 4.1.7. Navigationspfad 4.1.8. Seitennummerierung 4.1.9. HTML-Sitemap 4.1.10. Sprachenwechsler 4.2. Benutzer 4.3. Anwendungen 4.3.1. Suchmaschine 4.4. Verschiedenes 4.4.1. Cookiebar 4.4.2. RockSolid Slider 4.5. Events 4.6. FAQ 4.7. Nachrichten 4.7.1 Nachrichtenarchiv und -liste 4.7.2 Nachrichtenleser 4.8. Newsletter 5. Wartungsmodus 6. Dark Mode 6.1. Switch-Button 6.2. Farben 6.2.1. Text 6.2.2. Hintergrund 6.2.3. Rahmen 6.2.4. Schatten 7. Eigene Klassen ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles ====================================================================================== */ ::selection, ::-moz-selection { background: #e4b96c; color: #000; } /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.1. Webfonts ====================================================================================== */ /* mohave-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Mohave'; font-style: normal; font-weight: 300; src: url('../../files/theme/fonts/webfonts/mohave-v8-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* mohave-300italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Mohave'; font-style: italic; font-weight: 300; src: url('../../files/theme/fonts/webfonts/mohave-v8-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* mohave-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Mohave'; font-style: normal; font-weight: 700; src: url('../../files/theme/fonts/webfonts/mohave-v8-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.2. Textstrukturierung und Überschriften ====================================================================================== */ body, button, input:not([type="radio"]):not([type="checkbox"]), textarea, select { font-family: 'Mohave'; font-size: 20px; font-size: 1.25rem; line-height: 1.75; } h1 { font-size: 48px; font-size: 3rem; } h2 { font-size: 32px; font-size: 2rem; } .ce_teaserbild .ce_headline.standard { font-size: 80px; font-size: 5rem; line-height: 1.25; text-transform: uppercase; } h2.highlight { overflow: hidden; } h2.highlight span { display: inline-block; max-width: 80%; padding-right: 21px; position: relative; } h2.highlight span::before { left: -10000px; } h2.highlight span::after { left: 100%; } h2.highlight span::before, h2.highlight span::after { border-bottom-style: solid; border-bottom-width: 4px; content: ""; position: absolute; top: 45%; width: 10000px; } /* Media Query Anfang */ @media screen and (max-width: 779px) { h1 { font-size: 32px; font-size: 2rem; } h2 { font-size: 24px; font-size: 1.5rem; } .ce_teaserbild .ce_headline.standard { font-size: 44px; font-size: 2.75rem; } /* Media Query Ende */ } /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.3. Icon-Größen ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.1. Text ====================================================================================== */ ::placeholder { color: #999; } body, a:hover, button.button_corporate:hover, .button_corporate p.button a:hover, .button_corporate button.submit:hover, #nav-main ul.level_1 li a, #nav-main ul.level_1 li strong, #nav-main ul.level_1 > li.submenu > a::after, #nav-main ul.level_1 > li.submenu > strong::after, #nav-main ul.level_1 button.toggle, #nav-footer ul.level_1 li a:hover, #nav-footer ul.level_1 li strong:hover, #nav-footer ul li:not(.last) a::after, #nav-footer ul li:not(.last) strong::after, #toggle-nav, input:not([type="radio"]):not([type="checkbox"]), textarea, .mod_newslist .layout_latest h2 a, .mod_rocksolid_slider a.rsts-prev::after, .mod_rocksolid_slider a.rsts-next::after, .contao-cookiebar .cc-head p { color: #fff; } #nav-main ul.level_2 > li > a:hover, #nav-main ul.level_2 > li > strong:hover, .ce_hinweisbox.hinweisbox_white { color: #000; } a, button.button_corporate, .button_corporate p.button a, .button_corporate button.submit, #nav-main ul.level_1 li a:hover, #nav-main ul.level_1 li strong:hover, #nav-footer ul.level_1 li a, #nav-footer ul.level_1 li strong, ul li.check::before, .mod_newslist .layout_latest h3, .mod_newsreader .layout_full h2.sub { color: #e4b96c; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.2. Hintergrund ====================================================================================== */ #nav-main ul.level_2 > li > a:hover, #nav-main ul.level_2 > li > strong:hover { background: #fff; } th, .contao-cookiebar .cc-inner { background: #161616; } body, [type="checkbox"] + label::before, #nav-main, #nav-main ul.level_3, .ce_form .widget input, .ce_form .widget textarea, .mod_subscribe .widget input, .mod_unsubscribe .widget input { background: #000; } #nav-main ul.level_2 { background: rgba(0, 0, 0, 0.6); } input[type="checkbox"]:checked+label::before, #nav-main ul.level_1 > li > a::before, #nav-main ul.level_1 > li > strong::before, .ce_text_bild_kachel .box_img.arrow::before, .mod_newslist .layout_latest .image_container::after { background: #e4b96c; } /* Hover-Farben */ .mod_rocksolid_slider a.rsts-prev:hover::before, .mod_rocksolid_slider a.rsts-next:hover::before { background: rgba(0, 0, 0, 0.25); } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.3. Rahmen ====================================================================================== */ .ce_form .widget.explanation.mandatory::before { border-color: #fff; } .ce_form .widget input, .ce_form .widget textarea, [type="checkbox"] + label::before, .mod_subscribe .widget input, .mod_unsubscribe .widget input { border-color: #3d3d3d; } th, td, h2.highlight span::before, h2.highlight span::after, .mod_newslist .layout_latest .image_container, .mod_newslist .layout_latest .image_container::before { border-color: #e4b96c; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.4. Umrisse ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.5. Schatten ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.3. Ausrichtung ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.4. Buttons ====================================================================================== */ button, p.button { height: 45px; } button.button_corporate, .button_corporate .button a, .button_corporate button.submit { padding: 0 0 0 21px; } button.button_corporate::before, .button_corporate .button a::before, .button_corporate button.submit::before { content: "\f101"; font-family: "Font Awesome 6 Free"; font-weight: 700; position: absolute; margin-left: -21px; } button.button_corporate:hover::before, .button_corporate .button a:hover::before, .button_corporate button.submit:hover::before { margin-left: -20px; } button.button_corporate, .button_corporate p.button a, .button_corporate button.submit { font-size: 20px; font-size: 1.250rem; font-weight: 700; } /* ====================================================================================== 1. Allgemeine Styles 1.5. Formularfelder ====================================================================================== */ .ce_form input:not([type="radio"]):not([type="checkbox"]):not(.submit), .ce_form input[class*="grid_"], .ce_form textarea, .ce_form select { padding: 6px 12px 3px; } .ce_form input.text { height: 45px; } .ce_form .widget-checkbox input[type="checkbox"] { height: 0; left: 27px; position: relative; top: 11px; width: 0; } .ce_form input[type="checkbox"] + label::before { border-style: solid; border-width: 1px; content: ""; display: block; float: left; height: 15px; margin: 8px 7px 0 -1px; position: relative; width: 15px; } .ce_form span.mandatory { display: none; } /* ====================================================================================== 1. Allgemeine Styles 1.6. Radien ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.7. Rahmen ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.8. Umrisse ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.9. Transparenz ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.10. Overlays ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.11. Zoom ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.12. Übergang ====================================================================================== */ #nav-main ul.level_1 > li > a, #nav-main ul.level_1 > li > strong { -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -ms-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } #nav-main ul.level_2 > li > a, #nav-main ul.level_2 > li > strong, .mod_rocksolid_slider a.rsts-prev::before, .mod_rocksolid_slider a.rsts-next::before { -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } #nav-main ul.level_1 > li > a::before, #nav-main ul.level_1 > li > strong::before { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } /* ====================================================================================== 2. Layout ====================================================================================== */ #wrapper { padding-bottom: 60px; padding-top: 70px; } /* Media Query Anfang */ @media screen and (max-width: 779px) { #wrapper { padding-bottom: 80px; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.1. Kopfzeile ====================================================================================== */ #header { height: 70px; } #header .logo { margin: 15px 0; width: 280px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #header .logo { margin: 25px 0; width: 145px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #header .logo { margin: 21px 0; width: 200px; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.2. Hauptzeile ====================================================================================== */ /* ====================================================================================== 2. Layout 2.2. Hauptzeile 2.2.1. Linke Spalte ====================================================================================== */ /* ====================================================================================== 2. Layout 2.2. Hauptzeile 2.2.2. Hauptspalte ====================================================================================== */ /* ====================================================================================== 2. Layout 2.2. Hauptzeile 2.2.3. Rechte Spalte ====================================================================================== */ /* ====================================================================================== 2. Layout 2.3. Unterzeile ====================================================================================== */ /* ====================================================================================== 2. Layout 2.4. Fußzeile ====================================================================================== */ #footer { height: 60px; } #footer a[target="_blank"]::after { content: ""; } /* Media Query Anfang */ @media screen and (max-width: 779px) { #footer { height: 80px; } #footer .copyright .footer_rechte { display: block; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.1. Überschrift ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.2. Text ====================================================================================== */ .ce_text.highlight p { font-size: 80px; font-size: 5rem; } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.3. Aufzählung ====================================================================================== */ .ce_text ul li.check::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 700; margin: 0 5px 0 -22px; } .ce_text ul li.check { list-style: none; } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.4. Tabelle ====================================================================================== */ .ce_table caption { font-style: italic; } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.5. Code ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.6. Markdown ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.2. Akkordeon ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.3. Content-Slider ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.4. Link-Elemente 3.4.1. Hyperlink ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.4. Link-Elemente 3.4.2. Top-Link ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.1. Bild ====================================================================================== */ .ce_image.columns { margin: 28px auto 35px; width: 250px; } .ce_image.columns.partner { margin: 28px auto 7px; } #start-section-perfect-balance .ce_text .image_container.float_right, #start-section-perfect-ride .ce_text .image_container.float_right, #start-section-perfect-ride-plus .ce_text .image_container.float_right { width: 150px; } .ce_image figcaption, .ce_gallery figcaption, .ce_text .image_container figcaption { background: transparent; font-style: italic; } /* Media Query Anfang */ @media screen and (max-width: 1299px) { .ce_image.columns { width: 185px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_image.columns { width: 155px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_image.columns { width: 125px; } .ce_image.columns.partner { width: 50%; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { .ce_image.columns { width: 85%; } #start-section-perfect-balance .ce_text .image_container.float_right, #start-section-perfect-ride .ce_text .image_container.float_right, #start-section-perfect-ride-plus .ce_text .image_container.float_right { width: 100px; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.2. Galerie ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.3. Video/Audio ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.4. YouTube ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.5. Vimeo ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.6. Colorbox ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.6. Datei-Elemente 3.6.1. Download ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.6. Datei-Elemente 3.6.2. Downloads ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.7. Include-Elemente 3.7.1. Formulare ====================================================================================== */ .ce_form .widget input, .ce_form .widget textarea { border-style: solid; border-width: 1px; } .ce_form .widget.explanation.mandatory::before { border-top-style: solid; border-top-width: 1px; content: ""; display: block; width: 50px; } .ce_form .checkbox_container label, .ce_form .radio_container label { display: block; margin: -14px 0 0 21px; } /* ====================================================================================== 3. Core-Elemente 3.7. Include-Elemente 3.7.2. Kommentare ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.1. Teaserbild ====================================================================================== */ .ce_teaserbild .fullheight { height: calc(100vh - 140px); } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .ce_teaserbild .fullheight { height: calc(100vh - 120px); } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { .ce_teaserbild .fullheight .vcenter { padding-bottom: 35px; text-align: center; vertical-align: bottom; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.2. Teaserbox ====================================================================================== */ .ce_teaserbox .fullheight { height: calc(100vh - 70px); } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.3. Text/Bild-Kachel ====================================================================================== */ .ce_text_bild_kachel { margin-top: 28px; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.4. Hinweisbox ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.5. Teambox ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.6. Zitatbox ====================================================================================== */ .ce_zitatbox.zitatbox_2 blockquote { padding-left: 56px; } .ce_zitatbox.zitatbox_2 blockquote::before { top: -18px; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.7. Preistabelle ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.8. Iconbox ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.9. Zeitstrahl ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.10. Landkarte ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.11. iframe-Element ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.12. Anker-Element ====================================================================================== */ .ce_anker_element, .anker { margin-top: -70px; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.13. Umschaltumschlag ====================================================================================== */ .ce_umschaltumschlag { max-height: 185px; } .ce_umschaltumschlag:not(.show)::after { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0)); bottom: 0; content: ""; height: 50%; position: absolute; width: 100%; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.14. Tabs ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.15. Animierte Zahlen ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.1. Umschaltnavigation ====================================================================================== */ #toggle-nav { margin: 12px 0; } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.2. Kopfnavigation ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.3. Hauptnavigation ====================================================================================== */ #nav-main a, #nav-main strong { text-transform: uppercase; } /* Media Query Anfang */ @media screen and (min-width: 780px) { #nav-main { margin-right: -10px; } #nav-main ul.level_1 > li { display: block; float: left; margin-left: -1px; } #nav-main ul.level_1 > li > a, #nav-main ul.level_1 > li > strong { line-height: 1.25; padding: 25px 15px 20px; position: relative; } #nav-main ul.level_1 > li > a::before, #nav-main ul.level_1 > li > strong::before { content: ""; height: 0; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; z-index: -1; } #nav-main ul.level_1 > li > a:hover::before, #nav-main ul.level_1 > li > strong:hover::before { height: 100%; } #nav-main ul.level_1 > li.submenu > a::after, #nav-main ul.level_1 > li.submenu > strong::after { content: "\f107"; font-size: 20px; font-size: 1.25rem; line-height: 1.05; } #nav-main ul.level_2 { width: 215px; } #nav-main ul.level_2 li a, #nav-main ul.level_2 li strong { padding: 7px 14px 3px 28px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #nav-main ul.level_1 > li > a, #nav-main ul.level_1 > li > strong { font-size: 18px; font-size: 1.125rem; padding: 27px 10px 20px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #nav-main { height: calc(100% - 70px); top: 70px; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.4. Lokale Navigation ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.5. Nachrichtenarchiv-Navigation ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.6. Fußnavigation ====================================================================================== */ #nav-footer { margin-right: -7px; } #nav-footer ul li:not(.last) a::after, #nav-footer ul li:not(.last) strong::after { content: "|"; margin-left: 7px; position: absolute; } /* Media Query Anfang */ @media screen and (max-width: 779px) { #nav-footer { margin-right: 0; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.7. Navigationspfad ====================================================================================== */ #nav-breadcrumb { display: none; } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.8. Seitennummerierung ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.9. HTML-Sitemap ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.10. Sprachenwechsler ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.2. Benutzer ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.3. Anwendungen 4.3.1. Suchmaschine ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.4. Verschiedenes 4.4.1. Cookiebar ====================================================================================== */ .contao-cookiebar .cc-head strong { font-size: 24px; font-size: 1.5rem; text-transform: uppercase; } .contao-cookiebar .cc-btn { padding: 3px 7px 0; text-transform: uppercase; } /* ====================================================================================== 4. Frontend-Module 4.4. Verschiedenes 4.4.2. RockSolid Slider ====================================================================================== */ .mod_rocksolid_slider { padding: 25px 0; } .mod_rocksolid_slider a.rsts-prev::before, .mod_rocksolid_slider a.rsts-next::before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 50px; } .mod_rocksolid_slider a.rsts-next::before { left: auto; right: 0; } .mod_rocksolid_slider a.rsts-prev::after, .mod_rocksolid_slider a.rsts-next::after { content: "\f104"; font-family: "Font Awesome 6 Free"; font-size: 32px; font-size: 2rem; font-weight: 700; left: 15px; position: absolute; top: calc(50% - 25px); } .mod_rocksolid_slider a.rsts-next::after { content: "\f105"; left: auto; right: 15px; } .mod_rocksolid_slider a.rsts-prev span, .mod_rocksolid_slider a.rsts-next span { display: none; } /* ====================================================================================== 4. Frontend-Module 4.5. Events ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.6. FAQ ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.7. Nachrichten 4.7.1 Nachrichtenarchiv und -liste ====================================================================================== */ .mod_newslist .layout_latest { background: transparent; padding: 0 21px; width: calc(50% - 28px); } .mod_newslist .layout_latest .image_container::before { border-style: solid; border-width: 4px; bottom: 0; content: ""; display: block; height: calc(100% - 21px); left: 0; position: absolute; right: 0; top: 0; width: calc(100% - 8px); z-index: -1; } .mod_newslist .layout_latest .image_container { border-style: solid; border-width: 4px; border-bottom-style: none; border-bottom-width: 0; margin: 0 -21px; position: initial; } .mod_newslist .layout_latest .image_container::after { content: ""; height: 20px; left: calc(50% - 10px); position: absolute; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); width: 20px; z-index: 1; } .mod_newslist .layout_latest h2 { line-height: 1.25; margin-top: 21px; } .mod_newslist .layout_latest h3 { font-size: 16px; font-size: 1rem; font-weight: 700; margin-top: -14px; } .mod_newslist .layout_latest p.info { padding: 14px 0; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .mod_newslist .layout_latest { width: calc(100% - 28px); } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.7. Nachrichten 4.7.2 Nachrichtenleser ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.8. Newsletter ====================================================================================== */ .mod_subscribe .widget input, .mod_unsubscribe .widget input { border-style: solid; border-width: 1px; } /* ====================================================================================== 5. Wartungsmodus ====================================================================================== */ .wartungsmodus .logo { width: 125px; } /* ====================================================================================== 6. Dark Mode 6.1. Switch-Button ====================================================================================== */ .switch_dark_mode { display: none; } /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.2. Text ====================================================================================== */ /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.2. Hintergrund ====================================================================================== */ /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.3. Rahmen ====================================================================================== */ /* ====================================================================================== 6. Dark Mode 6.2. Farben 6.2.4. Schatten ====================================================================================== */ /* ====================================================================================== 7. Eigene Klassen ====================================================================================== */