.mod_changelanguage { margin-right: 16px; } @media screen and (max-width: 1039px) { .mod_changelanguage { margin-right: 12px; } } .mod_changelanguage > ul { padding: 5px 0; } .mod_changelanguage > ul li { display: inline-block; } .mod_changelanguage > ul li img { width: 16px; } .mod_changelanguage > ul li img.language-flag { display: inline-block; width: 16px; height: 12px; line-height: 1; vertical-align: middle; } /* SBS 4.4.2: preserve the established customer appearance with Bootstrap. */ @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/bundles/themeultimate/fonts/webfonts/open-sans-v44-latin-regular.woff2') format('woff2')} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/bundles/themeultimate/fonts/webfonts/open-sans-v44-latin-700.woff2') format('woff2')} @font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/bundles/themeultimate/fonts/webfonts/open-sans-v44-latin-italic.woff2') format('woff2')} :root{--bs-body-font-family:'Open Sans',sans-serif;--bs-body-line-height:1.25;--bs-body-color:#343a40;--bs-body-color-rgb:52,58,64;--bs-link-color:#0078cc;--bs-link-color-rgb:0,120,204;--bs-light:#e9ecef;--bs-light-rgb:233,236,239;--bs-dark:#343a40;--bs-dark-rgb:52,58,64;--bs-tertiary-bg:#e9ecef;--bs-tertiary-bg-rgb:233,236,239} html{scrollbar-gutter:auto} a{text-decoration:none}a:hover{text-decoration:underline} #wrapper{padding-top:112px;padding-bottom:0!important} #header{position:fixed;inset:0 0 auto;width:100%;height:112px;z-index:99} #nav-top-bar .content-column-wrapper,#nav-main-bar .content-column-wrapper,#footer .content-column-wrapper{display:block} #header .media--right{float:right}#header .media--left{float:left} #nav-top ul{gap:0} .mod_changelanguage ul{margin-bottom:0} #nav-main>ul{column-gap:.259765625rem} #footer nav ul.level_1{margin-top:7px} .contao-cookiebar .cc-inner{border:0;color:#444} .contao-cookiebar .cc-inner p{color:#868686} .contao-cookiebar .cc-inner .cc-btn{padding-inline:14px;color:#444;background:#f5f5f5;border-color:#cfcfcf} .ce_form .formbody{display:block;margin:0} .ce_form .formbody>.widget{width:100%;padding:7px 2px;margin:0} .ce_form .widget>label,.ce_form legend{font-size:1rem;font-weight:700;margin:0;float:none;width:auto} .ce_form .widget label .mandatory,.ce_form .widget legend .mandatory{color:#dc3545} .ce_form input.text,.ce_form textarea{display:inline-block;border:1px solid #ccc;border-radius:0;padding:6px 12px;width:100%;background:#fff;min-height:0;line-height:1.25} .ce_form input.text{height:32px} .ce_form textarea{height:auto;min-block-size:0} .ce_form .checkbox_container>span{display:block;margin:0} .ce_form .checkbox_container label,.ce_form .radio_container label{display:block;margin:-21px 0 0 21px;font-weight:400} .ce_form input[type=checkbox],.ce_form input[type=radio]{appearance:auto;width:auto;height:auto;border:0;border-radius:0;margin:0;padding:0;float:none;background:none} .ce_form input[type=checkbox]{vertical-align:baseline} .ce_form .widget .alert{padding:7px 11px;border-radius:0;margin:7px 0;border:1px solid #bee5eb;background:#d1ecf1;color:#0c5460} .ce_form .widget .alert p{margin:7px 0} .ce_form .widget-submit .btn{border-radius:8px;background:#0078cc;border-color:transparent;line-height:1;font-size:99%;height:32px;margin:7px 0} .ce_form .content-notice-box.notice-box-info{padding:0;border:1px solid #bee5eb;background:#d1ecf1;color:#0c5460;border-radius:0;margin:7px 0} .ce_form .widget-explanation .mandatory{color:#dc3545} #nav-top a,#nav-top strong{padding:7px;font-size:.75rem;line-height:1.25} #nav-main a,#nav-main strong{font-weight:700} #nav-main-bar #nav-main li.active>strong{color:#0078cc} .content-page-wrapper>.inside{padding-inline:0} #header .content-page-wrapper>.inside{padding-inline:var(--tu-column-padding)} figure{margin:0} .content-teaser-image .width-fluid .left .inside{margin-inline-start:0} .content-teaser-image .width-fluid .right .inside{margin-inline-end:0} .content-teaser-image>.vwrapper.height-lg{height:430px;block-size:430px;min-height:430px;min-block-size:430px} .content-teaser-image>.vwrapper.height-md{height:280px;block-size:280px;min-height:280px;min-block-size:280px} .content-teaser-image>.vwrapper.height-sm{height:130px;block-size:130px;min-height:130px;min-block-size:130px} .contao-cookiebar .cc-inner{box-shadow:none} .contao-cookiebar .cc-btn{line-height:1;background:#f5f5f5;color:#6c757d} .contao-cookiebar .cc-groups .cc-group>label{margin:5px 10px} .contao-cookiebar .cc-close{right:18px} @media(min-width:520px){.contao-cookiebar .cc-inner{max-width:500px}} @media(max-width:779px){.content-page-wrapper>.inside{padding-inline:var(--tu-column-padding)}#nav-top-bar{display:block}#footer .copyright{text-align:center}} @media(max-width:519px){#footer .copyright .footer-rechte{display:block}} @media(min-width:780px){#nav-main ul.level_1>li.submenu>a::after,#nav-main ul.level_1>li.submenu>strong::after{content:'\f0d7';font-family:'Font Awesome 7 Free';font-size:.875rem;font-weight:900;margin-left:7px}} .text-invert p:not(.button) a,.text-invert li a{color:#fff} #footer nav ul{margin:0;padding:0;list-style:none} #footer .copyright,#footer .copyright a{font-size:.875rem} #footer .content-column-wrapper{text-align:left} #footer{overflow:visible} @media(min-width:780px){#footer{overflow:hidden}} #footer .content-toplink span{display:none} #footer .content-toplink a::before{content:'\f062';font-family:'Font Awesome 7 Free';font-weight:900} .content-teaser-image .fullwidth .left .inside{margin-inline-start:0} .content-teaser-image .fullwidth .right .inside{margin-inline-end:0} body,button,input:not([type=radio]):not([type=checkbox]),textarea,select{font-family:'Open Sans',sans-serif;font-size:1rem;font-style:normal;line-height:1.25;word-wrap:break-word} h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:700;line-height:1.25} strong,.content-headline.standard{font-weight:700} h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.375rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem} button,p.button{border-color:transparent;border-style:solid;border-width:1px;cursor:pointer;display:inline-block;font-family:inherit;font-size:99%;font-weight:inherit;height:32px;line-height:1;margin:7px 0;text-align:center;text-decoration:none;white-space:nowrap} button,.button a{display:block;padding:0 12px} .mod_article{position:relative} *[class*='ce_'],*[class*='content-'],*[class*='mod_']{position:relative;z-index:0} #nav-main-bar .logo{padding-block:0} #nav-main-bar .logo img{block-size:auto;inline-size:100%} #nav-main>ul{gap:0} #nav-main>ul{column-gap:.259765625rem} #nav-main-bar #nav-main li.active>strong,#nav-main-bar #nav-main li.trail>a{background:transparent} .row>.formatierung-bild{width:auto;max-width:100%;padding:0} .formatierung-bild img{width:auto;inline-size:auto;max-width:100%;height:auto} .mod_newsarchive .news_article,.mod_newslist .news_article{display:flex;flex-wrap:wrap;gap:0;margin:-14px;overflow:hidden;width:calc(100% + 28px)} .mod_newsarchive,.mod_newslist{overflow:hidden} .mod_newsarchive .layout_latest,.mod_newslist .layout_latest{display:block;float:left;margin:14px;min-inline-size:auto;position:relative;width:calc(33.33333333% - 28px)} .mod_newsarchive .layout_latest figure img,.mod_newslist .layout_latest figure img{aspect-ratio:auto;display:block;height:auto;object-fit:cover;object-position:50%} .mod_newsarchive .layout_latest h3,.mod_newslist .layout_latest h3{margin-top:-14px} .mod_newsarchive .layout_latest .more,.mod_newslist .layout_latest .more{margin:0 -14px;padding:7px 11px} @media(max-width:1039px){.mod_newsarchive .layout_latest,.mod_newslist .layout_latest{width:calc(50% - 28px)}} @media(max-width:519px){.mod_newsarchive .layout_latest,.mod_newslist .layout_latest{width:calc(100% - 28px)}} @media(max-width:1039px){#nav-top-bar{display:block}.content-teaser-image>.vwrapper.height-lg{height:350px;block-size:350px;min-height:350px;min-block-size:350px}.content-teaser-image>.vwrapper.height-md{height:200px;block-size:200px;min-height:200px;min-block-size:200px}.content-teaser-image>.vwrapper.height-sm{height:100px;block-size:100px;min-height:100px;min-block-size:100px}} @media(max-width:779px){.content-teaser-image>.vwrapper.height-lg{height:250px;block-size:250px;min-height:250px;min-block-size:250px}.content-teaser-image>.vwrapper.height-md{height:150px;block-size:150px;min-height:150px;min-block-size:150px}.content-teaser-image>.vwrapper.height-sm{height:auto;block-size:auto;min-height:0;min-block-size:0}} #footer .content-toplink{padding:7px 0 7px 12px} #footer .content-toplink a{background:transparent;color:#343a40;border:0} #footer .content-toplink a::before{content:'\f102';font-size:1.25rem;margin:4px 0 0 -12px;position:absolute} @media(min-width:780px) and (max-width:1039px){#toggle-nav{display:none}#nav-main{position:relative;inset:auto;display:block;block-size:auto;inline-size:auto;padding:0;overflow:visible;background:transparent}#nav-main>ul{display:flex;flex-direction:row;align-items:center}#nav-main>ul>li>.toggle{display:none}#nav-main ul ul{position:absolute;top:100%;left:0;margin:0;padding:0;min-width:175px;background:#fff}#nav-main li:hover>ul,#nav-main li:focus-within>ul{display:block!important}} .content-accordion .handorgel__header{margin-bottom:2px} .content-accordion .handorgel__header__button{display:block;height:32px;margin:7px 0;line-height:1;font-weight:700} #main .ce_form .widget>label{display:inline} #main .ce_form legend{font-size:1rem;font-weight:700;margin:0;float:none;width:auto;line-height:1.55} #main .ce_form legend .mandatory{display:inline;margin:0} #main .ce_form textarea{font-size:99%;line-height:1;display:inline-block;border:1px solid #ccc;border-radius:0;padding:6px 12px;height:auto;min-height:0} #main .ce_form .widget-submit button{display:block;line-height:1;font-size:99%;height:32px;padding:0 12px;border:1px solid transparent;vertical-align:baseline} .content-teaser-image>.vwrapper>.box-width-50{inline-size:100%;padding-inline:25%} .content-teaser-image>.vwrapper>.left.box-width-50{padding-inline:0 50%} .content-teaser-image>.vwrapper>.right.box-width-50{padding-inline:50% 0} @media(max-width:779px){.content-teaser-image>.vwrapper>.box-width-50{padding-inline:0}} .content-text.media.media--left>figure,.content-text.media.media--right>figure{inline-size:33.33333333%;max-inline-size:none;margin:11px 21px 11px 0} .content-text.media.media--right>figure{margin:11px 0 11px 21px} @media(max-width:1039px){.content-text.media.media--left>figure,.content-text.media.media--right>figure{inline-size:50%}} @media(max-width:519px){.content-text.media.media--left>figure,.content-text.media.media--right>figure{inline-size:100%;margin:7px 0 14px}} #main .content-accordion .handorgel__header__button{height:auto;margin:0;padding:15px 12px;line-height:1;border:0;border-radius:0;background:#f8f9fa;position:static;text-align:left} #main .content-accordion .handorgel__header__button::before{position:static;display:inline-block;font-family:'Font Awesome 7 Free';font-weight:900;font-size:1rem;width:15px;margin:0 5px 0 0;text-align:center;transform:none} #main .content-accordion .handorgel__header__button::after{display:none} #main .content-accordion .handorgel__content{padding:7px 11px;border:0;background:none} #main .content-accordion .handorgel__content__inner{padding:0} @media(max-width:779px){.boxed .content-teaser-image .left .inside{margin-inline-start:0}.boxed .content-teaser-image .right .inside{margin-inline-end:0}.content-teaser-image .inside{padding-inline:10px}#toggle-nav{position:absolute;background:transparent;border:0;border-radius:0;font-size:1.5rem;height:47px;width:47px;padding:0;margin:0;right:2px}#footer .content-toplink a{background:#fff;border-radius:50%}#footer .copyright{line-height:1.25}} .content-team-box p.function{font-size:.75rem;margin-bottom:0} .content-team-box img{vertical-align:bottom} .bg-icon-corporate{--tu-icon-bg:#0078cc} .content-icon-box .icon.icon-lg>a{padding:21px} .btn.button-corporate{color:#fff;background:#0078cc;border:1px solid transparent;border-radius:8px;font-size:99%;line-height:1;height:32px;padding:7px 12px;vertical-align:baseline} .btn.button-corporate:hover{color:#fff;background:#005b9b} #main .content-accordion .handorgel__header,#main .content-accordion .handorgel__header__button{background:#e9ecef;border-radius:0} .content-notice-box.alert-secondary-light{--bs-alert-bg:#e9ecef;--bs-alert-color:#383d41;--bs-alert-border-color:#d6d8db;border-radius:0} .content-teaser-image>.vwrapper{display:table!important} .content-teaser-image .content-headline{transform:none} .content-teaser-image>.vwrapper>:is(.vtop,.vcenter,.vbottom){display:table-cell;flex:none;margin-block:0} .content-teaser-image>.vwrapper>.vtop{vertical-align:top} .content-teaser-image>.vwrapper>.vcenter{vertical-align:middle} .content-teaser-image>.vwrapper>.vbottom{vertical-align:bottom} .content-teaser-image .inside:last-of-type{margin-top:7px} .content-teaser-image .inside{margin-bottom:4px;max-inline-size:none} .content-teaser-image .inside>.mb-0>.btn{color:#fff;font-size:17.82px;line-height:1;height:32px;padding:7px 12px;vertical-align:baseline} #main .button-corporate p.button>a{display:block;background:transparent;border:0;border-radius:0;color:#fff;padding:0 12px;height:auto;font-size:inherit;line-height:inherit;vertical-align:baseline;box-shadow:none} .content-gallery>ul{gap:14px} .content-gallery figure{border-radius:0;background:none} .content-gallery img{aspect-ratio:auto} .agentur-zentral-impressum.content-text{line-height:1} .agentur-zentral-impressum a[target=_blank]::after{content:none!important} .content-icon-box .item .btn.button-corporate{color:#fff} .content-column-wrapper.d-flex>.content-notice-box{flex:1 1 auto} .content-icon-box .inside,.content-notice-box .inside{overflow-wrap:normal} .content-notice-box{overflow:hidden} .content-notice-box>.inside{display:table;inline-size:100%;height:100%} .content-notice-box .item{display:table-cell} .content-icon-box>.inside{min-inline-size:min-content} .content-icon-box{overflow:hidden} @media(min-width:780px) and (max-width:1039px){.boxed .content-teaser-image>.vwrapper:not(.width-fluid) .left .inside{margin-inline-start:-15px}.boxed .content-teaser-image>.vwrapper:not(.width-fluid) .right .inside{margin-inline-end:-15px}.boxed .content-teaser-image>.width-fluid .left .inside{margin-inline-start:0}.boxed .content-teaser-image>.width-fluid .right .inside{margin-inline-end:0}} @media(max-width:519px){.mod_newsreader .content-text.media>figure{float:left}} html .contao-cookiebar .cc-inner .cc-btn:is(:hover,:focus,:focus-visible){background:#e9e9e9;color:#444} html .contao-cookiebar .cc-detail-btn{color:#aaa} html .contao-cookiebar .cc-group{border-color:#ccc} .mod_sitemap ul{line-height:2;margin:0 0 0 20px;padding:0} .mod_sitemap ul ul{margin-left:20px} .mod_sitemap ul li{margin:0 0 0 20px;padding:7px 0} .mod_sitemap ul li::before{content:'\f07b';display:inline-block;font-family:'Font Awesome 7 Free';font-size:2rem;font-weight:900;margin:-18px 0 0 -38px;position:absolute;inset:auto;width:auto;color:#343a40;text-align:start} .mod_sitemap ul li.submenu::before{content:'\f07c'} .mod_sitemap ul li i::before{content:''} .mod_search .formbody{display:block;margin:0} .mod_search .widget-text{float:left;margin:0 0 0 -2px;overflow:hidden;padding:7px 2px;width:calc(100% - 85px)} .mod_search .widget-submit{float:right;padding:0;margin:0;width:auto} .mod_search input.text{border:1px solid #ccc;border-radius:0;padding:6px 12px;width:100%;height:32px;font-size:1rem;line-height:1.25} .mod_search button.submit{border:1px solid transparent;border-radius:8px;display:block;height:32px;padding:0 12px;margin:7px 0;line-height:1;font-size:99%} .mod_search .header,.mod_search .info{border:1px solid;clear:both;margin:7px 0;padding:7px 11px;border-radius:0} .mod_search .radio_container label{display:block;margin:-21px 0 0 21px} .mod_search>div:not(:last-child){margin-bottom:28px} @media(max-width:779px){.content-teaser-image>.vwrapper>:is(.left,.right).box-width-50{padding-inline:0}#nav-main a,#nav-main strong{font-weight:400;padding:14px 10px}} #nav-breadcrumb{padding:0} .boxed #nav-breadcrumb{margin:25px auto -35px;max-width:1270px} #nav-breadcrumb ul{display:block;overflow:hidden;padding:7px 15px} #nav-breadcrumb ul li{float:left;color:#6c757d} #nav-breadcrumb ul li+li::before{padding:0 5px;margin:0;color:#6c757d} #nav-breadcrumb ul li strong{font:inherit} @media(max-width:1299px){.boxed #nav-breadcrumb{max-width:1010px}} @media(max-width:1039px){.boxed #nav-breadcrumb{max-width:740px}#nav-breadcrumb ul{padding:7px 10px}} @media(max-width:779px){.boxed #nav-breadcrumb{margin-top:0;max-width:100%}} .content-image figcaption,.content-gallery figcaption,.content-text figure figcaption{font-size:1rem;line-height:inherit;margin-top:-4px;padding:7px;position:relative;color:inherit} .content-image a+figcaption,.content-gallery a+figcaption,.content-text figure a+figcaption{margin-top:-7px} .content-text ul{padding-top:7px;padding-bottom:7px;padding-left:35px;margin-top:0;margin-bottom:0} @media(max-width:779px){#toggle-nav{margin:7px 0}#toggle-nav::before{font-size:1.5rem}} @media(max-width:519px){#footer .copyright{padding-top:7px}} #nav-main-bar #nav-main ul.level_2 :is(a,strong){color:#fff;font-weight:400} #nav-main-bar #nav-main>ul>li>:is(a,strong):is(:hover,:focus-visible){background:transparent;color:#6c757d;border-radius:0} #nav-main ul ul{border-radius:0} @media(min-width:780px){#nav-main>ul>li>.toggle{display:none}} @media(max-width:779px){ #nav-main{padding:0;inset:84px 0 0;block-size:calc(100dvh - 84px)} #nav-main ul ul{margin:0;padding:0;min-inline-size:0;inline-size:100%;border:0} #nav-main ul.level_1 li>a,#nav-main ul.level_1 li>strong{padding:14px 10px;border-radius:0;font-weight:400} #nav-main .toggle{top:0;right:2px;width:47px;height:48px;padding:0;margin:0;color:#000;background:transparent} #nav-main>ul>li>.toggle::before{content:'\f067';font-size:20px} #nav-main>ul>li>.toggle[aria-expanded=true]::before{content:'\f068'} #toggle-nav.active{top:23px;right:2px;background:transparent} } @media(max-width:519px){#nav-main{inset-block-start:70px;block-size:calc(100dvh - 70px)}#toggle-nav.active{top:16px}} #footer .content-toplink{height:34px;padding:0} #footer .content-toplink a{display:block;width:36px;height:34px;padding:0;background:transparent;text-align:center} #footer .content-toplink a::before{position:static;margin:0;line-height:34px;font-size:20px} @media(max-width:779px){#footer .content-toplink{background:#fff}} .content-timeline::before{background:#343a40} .content-timeline .box-date::before{content:'';position:absolute;right:-19px;width:39px;height:39px;z-index:1;border-radius:50%;background:#fff;top:30px} .content-timeline .box-date::after{inline-size:31px;block-size:31px;inset-inline-end:-15px;background:transparent} .content-timeline .box-text::before{inset-inline-start:0;width:42px;background:#343a40} @media(max-width:1039px){.content-timeline .box-text::before{width:36px}} @media(max-width:779px){.content-timeline .box-date::before{top:16px}.content-timeline .box-text::before{width:20px}} .content-headline.highlight::after{box-sizing:content-box;height:0} .content-icon-box:has(.icon.icon-lg svg)>.inside{display:table;inline-size:100%} .content-icon-box .icon.icon-lg:has(svg){display:block;inline-size:100%;block-size:auto;min-block-size:0;font-size:1rem;line-height:1.55;border-radius:0} .content-icon-box .icon.icon-lg:has(svg)>a{display:block;inline-size:100%;block-size:auto;padding:0;background:transparent;border:0;border-radius:0;font-size:inherit;line-height:inherit;color:#0078cc} .content-icon-box .icon.icon-lg svg{display:inline;inline-size:84px;block-size:84px;max-inline-size:84px;padding:21px;box-sizing:border-box;background:#0078cc;border:0 solid transparent;border-radius:50%;vertical-align:baseline;font-size:50px;line-height:1.25;color:#0078cc} .content-icon-box:has(.icon.icon-lg svg) .item:is(.before,.after){display:table-row} .overlay-noise::after{background-color:transparent;z-index:-1} @media(max-width:779px){#nav-top{margin-right:3px}} .content-notice-box.stellenvakanzfrei .inside::before{box-sizing:content-box} p:not(.button) a[target=_blank]::after,.button-link p.button a[target=_blank]::after,.content-hyperlink a[target=_blank]::after{display:inline;margin-inline-start:3px;font-size:.75rem;font-weight:700;line-height:inherit} #footer .content-toplink{background:#fff;border-radius:50%} #nav-top ul.level_1>li>:is(a,strong){font-weight:400;color:#343a40} #nav-main-bar #nav-main>ul.level_1>li>a:not(:hover):not(:focus-visible){color:#343a40} .content-headline.highlight{overflow:hidden} .content-icon-box .icon.icon-lg:has(svg){border-radius:0!important;overflow:visible} .content-icon-box .icon.icon-lg svg{border-radius:100%!important;overflow:visible} #footer .content-toplink{overflow:hidden} #footer .content-toplink a{border-radius:0;line-height:20px;vertical-align:baseline} #footer .content-toplink a::before{position:relative;inset:0;font-size:18px;font-weight:700;line-height:1.2} /* ====================================================================================== Styleseet für SBS Sondermaschinen GmbH. Individuelle Änderungen vornehmen! Datei: custom.css Datum: 06.12.2025 Autor: Marco Dittmer, Agentur Zentral GmbH 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. Teaserzeile 2.3. Hauptzeile 2.3.1. Linke Spalte 2.3.2. Hauptspalte 2.3.3. Rechte Spalte 2.4. Unterzeile 2.5. 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 3.8.16. Filterumschlag 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 ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.1. Webfonts ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.2. Textstrukturierung und Überschriften ====================================================================================== */ h1, h2, h3, h4, h5, h6, .content-headline { line-height: 1.25; } /* ====================================================================================== 1. Allgemeine Styles 1.1. Typografie 1.1.3. Icon-Größen ====================================================================================== */ .icon i, .icon svg, .icon span { padding: 21px; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.1. Text ====================================================================================== */ button.button-corporate, .button-corporate p.button a, .button-corporate button.submit, .content-toplink.button-corporate a, .button-corporate p.button a:hover, .content-notice-box.stellenvakanzfrei .inside::before, .content-toplink.button-corporate a:hover, .pagination ul li strong, .pagination ul li a:hover, #nav-main ul.level_2 li a, #nav-main ul.level_2 li strong, .content-image.image-link figcaption a { color: #fff; } #nav-main ul.level_1 > li:hover > a { color: #6c757d; } a, #nav-main ul.level_1 > li > strong, .content-icon-box.highlight strong, .content-notice-box.highlight strong, .content-text.highlight strong, .content-timeline.highlight strong, .mod_newslist .layout_latest h2 a, ul li.check::before { color: #0078cc; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.2. Hintergrund ====================================================================================== */ .bg-corporate, .bg-icon-corporate i, .bg-icon-corporate svg, button.button-corporate, .button-corporate p.button, .button-corporate button.submit, .pagination ul li strong, .pagination ul li a:hover, #nav-main ul.level_2, .content-notice-box.stellenvakanzfrei .inside::before, .content-image.image-link figcaption a { background: #0078cc; } .content-accordion .handorgel__content, .mod_newslist:not(.news-home) .layout_latest { background: #e9ecef; } /* Hover-Farben */ button.button-corporate:hover, .button-corporate p.button:hover, .button-corporate button.submit:hover, .content-toplink.button-corporate:hover, #nav-main ul.level_2 li:hover a, .content-image.image-link:hover figcaption a { background: #005b9b; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.3. Rahmen ====================================================================================== */ .content-headline.highlight::after, .content-timeline.icon-corporate .box-date::after { border-color: #0078cc; } #nav-breadcrumb ul::after, .content-gallery ul li img { border-color: #e9ecef; } /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.4. Umrisse ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.2. Farben 1.2.5. Schatten ====================================================================================== */ #header { -webkit-box-shadow: 0 2px rgba(0,0,0,0.25); -moz-box-shadow: 0 2px rgba(0,0,0,0.25); box-shadow: 0 2px rgba(0,0,0,0.25); } /* ====================================================================================== 1. Allgemeine Styles 1.3. Ausrichtung ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.4. Buttons ====================================================================================== */ .contao-cookiebar .cc-footer button { border-style: none; border-width: 0; } /* ====================================================================================== 1. Allgemeine Styles 1.5. Formularfelder ====================================================================================== */ /* ====================================================================================== 1. Allgemeine Styles 1.6. Radien ====================================================================================== */ .contao-cookiebar .cc-inner, .contao-cookiebar .cc-footer button, .contao-cookiebar .cc-group, .contao-cookiebar .cc-groups .cc-group, .contao-cookiebar .cc-cookies, .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info, .contao-cookiebar .cc-cookies .cc-cookie label.cookie + .cc-cookie-info { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } #footer .content-toplink { -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } /* ====================================================================================== 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.transition-linear-10 ul.level_1 > li:hover > a, #nav-main.transition-linear-10 ul.level_1 > li:hover > strong, button.button-corporate:hover, .button-corporate p.button:hover, .button-corporate button:hover, #nav-main ul.level_2 li:hover a, .content-image.image-link:hover figcaption { -webkit-transition: all 0.10s linear; -moz-transition: all 0.10s linear; -ms-transition: all 0.10s linear; -o-transition: all 0.10s linear; transition: all 0.10s linear; } /* ====================================================================================== 2. Layout ====================================================================================== */ #wrapper { padding-bottom: 326px; } /* Media Query Anfang */ @media screen and (max-width: 1299px) { #wrapper { padding-bottom: 306px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #wrapper { padding-bottom: 316px; padding-top: 107px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #wrapper { padding-bottom: 505px; padding-top: 84px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { #wrapper { padding-bottom: 615px; padding-top: 70px; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.1. Kopfzeile ====================================================================================== */ #header .logo { margin: -30px 0 15px; padding: 7px 0; width: 121px; } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #header { height: 107px; } #header .logo { width: 122px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #header { height: 84px; } #header .logo { margin: -28px 0 0; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { #header { height: 70px; } #header .logo { width: 98px; } /* Media Query Ende */ } /* ====================================================================================== 2. Layout 2.2. Teaserzeile ====================================================================================== */ /* ====================================================================================== 2. Layout 2.3. Hauptzeile ====================================================================================== */ /* ====================================================================================== 2. Layout 2.3. Hauptzeile 2.3.1. Linke Spalte ====================================================================================== */ /* ====================================================================================== 2. Layout 2.3. Hauptzeile 2.3.2. Hauptspalte ====================================================================================== */ #main { line-height: 1.55; } /* ====================================================================================== 2. Layout 2.3. Hauptzeile 2.3.3. Rechte Spalte ====================================================================================== */ /* ====================================================================================== 2. Layout 2.4. Unterzeile ====================================================================================== */ /* ====================================================================================== 2. Layout 2.5. Fußzeile ====================================================================================== */ #footer { height: 326px; } #footer .infotext { line-height: 1.55; } #footer .zertifikat img { margin: 12px auto; width: 155px; } #footer i[class*="fa-"] { margin-right: 3px; } #footer .content-toplink { bottom: 21px; position: fixed; right: 21px; width: 36px; } #footer .content-toplink a { height: 34px; padding: 6px 11px; } #footer .content-toplink a::before { line-height: 1.2; } /* Media Query Anfang */ @media screen and (max-width: 1299px) { #footer { height: 306px; } #footer .zertifikat img { margin: 21px auto; width: 135px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 1039px) { #footer { height: 316px; } #footer .zertifikat img { margin: 45px auto; width: 85px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #footer { height: 505px; } #footer .zertifikat img { width: 75px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { #footer { height: 615px; } #footer .zertifikat img { margin: 0 auto; } #footer .zertifikat.content-gallery.content-gallery--cols-3 ul { grid-template-columns: repeat(3, 1fr); } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.1. Überschrift ====================================================================================== */ .content-headline.highlight { font-size: 32px; font-size: 2rem; margin-bottom: 21px; padding: 7px 0 14px; text-transform: uppercase; } .content-headline.highlight::after { border-bottom-style: solid; border-bottom-width: 7px; content: ""; left: 0; margin: 48px auto 0; position: absolute; right: 0; width: 120px; } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.2. Text ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.3. Aufzählung ====================================================================================== */ .content-text ul li.check::before { content: "\f00c"; font-family: "Font Awesome 7 Free"; font-weight: 700; margin: 0 5px 0 -22px; } .content-text ul li.check { list-style: none; } .column-count { column-count: 2; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .column-count { column-count: 1; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.1. Text-Elemente 3.1.4. Tabelle ====================================================================================== */ /* ====================================================================================== 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 ====================================================================================== */ .content-accordion .handorgel__header button { border-style: none; border-width: 0; } .content-accordion .handorgel__content { margin-top: -2px; } .content-accordion .handorgel__header__button::before { content: "\f067"; } .content-accordion .handorgel__header--open .handorgel__header__button::before { content: "\f068"; } /* ====================================================================================== 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 ====================================================================================== */ .content-image.wordcloud { padding: 14px; margin: 0 auto; max-width: 750px; } .content-image.image-link figcaption { padding: 0; } .content-image.image-link figcaption a { display: block; padding: 5px 12px; text-align: center; width: 100%; } .content-image.image-link:hover a { text-decoration: none; } /* ====================================================================================== 3. Core-Elemente 3.5. Media-Elemente 3.5.2. Galerie ====================================================================================== */ .content-gallery:not(.zertifikat) ul li img { border-style: solid; border-width: 3px; } /* ====================================================================================== 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 ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.7. Include-Elemente 3.7.2. Kommentare ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.1. Teaserbild ====================================================================================== */ .content-teaser-image .content-headline, .content-teaser-image .content-headline.standard { font-size: 48px; font-size: 3rem; text-transform: uppercase; } .content-teaser-image .content-text { font-size: 18px; font-size: 1.125rem; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .content-teaser-image .content-headline { font-size: 32px; font-size: 2rem; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.2. Teaserbox ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.3. Text/Bild-Kachel ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.4. Hinweisbox ====================================================================================== */ .content-notice-box.stellenvakanzfrei .inside::before { content: "Aktuell ist keine Stelle frei"; font-size: 24px; font-size: 1.5rem; font-weight: 700; left: 50%; max-width: 550px; padding: 0 7px; position: absolute; text-align: center; top: 50%; -moz-transform: translateY(-50%) translateX(-50%) rotate(-20deg); -webkit-transform: translateY(-50%) translateX(-50%) rotate(-20deg); -o-transform: translateY(-50%) translateX(-50%) rotate(-20deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(-20deg); transform: translateY(-50%) translateX(-50%) rotate(-20deg); width: 65%; z-index: 1; } .content-notice-box.stellenvakanzfrei:lang(en) .inside::before { content: "There is currently no vacancy"; } /* Media Query Anfang */ @media screen and (max-width: 1299px) { .content-notice-box.stellenvakanzfrei .inside::before { width: 55%; } /* Media Query Ende */ } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.5. Teambox ====================================================================================== */ .content-team-box p.content-headline { font-weight: 700; } .content-team-box p.function { margin-top: -14px; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.6. Zitatbox ====================================================================================== */ /* ====================================================================================== 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 ====================================================================================== */ .content-timeline::before { left: 125px; } .content-timeline .box-date { font-weight: 700; padding: 28px 0; text-align: left !important; width: 125px; } .content-timeline .box-date::before { top: 30px; } .content-timeline .box-date::after { top: 34px; } .content-timeline .box-text { padding: 28px 0 28px 64px; width: calc(100% - 128px); } .content-timeline .box-text::before { top: 47px; } /* Media Query Anfang */ @media screen and (max-width: 779px) { .content-timeline::before { left: 75px; } .content-timeline .box-date { padding: 12px 0; width: 75px; } .content-timeline .box-date::before { top: 16px; } .content-timeline .box-date::after { top: 20px; } .content-timeline .box-text::before { width: 20px; top: 33px; } .content-timeline .box-text { padding: 12px 0 12px 45px; width: calc(100% - 82px); } /* Media Query Ende */ } /* ====================================================================================== 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 ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.13. Umschaltumschlag ====================================================================================== */ .content-toggle-wrapper { max-height: 185px; } /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.14. Tabs ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.15. Animierte Zahlen ====================================================================================== */ /* ====================================================================================== 3. Core-Elemente 3.8. Elementgenerator 3.8.16. Filterumschlag ====================================================================================== */ /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.1. Umschaltnavigation ====================================================================================== */ #toggle-nav { top: -7px; } /* Media Query Anfang */ @media screen and (max-width: 519px) { #toggle-nav { top: -14px; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.2. Kopfnavigation ====================================================================================== */ #nav-top ul.level_1 > li { display: block; float: left; } #nav-top ul.level_1 > li.nav-suche > a, #nav-top ul.level_1 > li.nav-suche > strong { line-height: 0; overflow: hidden; text-indent: -999px; } #nav-top ul.level_1 > li.nav-suche > a::after, #nav-top ul.level_1 > li.nav-suche > strong::after { content: "\f002"; display: block; font-family: "Font Awesome 7 Free"; font-weight: 700; line-height: 1.25; position: relative; text-indent: 0; } /* Media Query Anfang */ @media screen and (max-width: 519px) { #nav-top a, #nav-top strong { padding: 7px 3px; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.3. Hauptnavigation ====================================================================================== */ /* Media Query Anfang */ @media screen and (min-width: 780px) { #nav-main { clear: right; margin-right: -8px; } #nav-main ul.level_1 > li.submenu { margin-right: 15px; } #nav-main ul.level_1 > li > a, #nav-main ul.level_1 > li > strong { font-size: 18px; font-size: 1.125rem; padding: 14px 8px; text-transform: uppercase; } #nav-main ul.level_1 > li.submenu > a::after, #nav-main ul.level_1 > li.submenu > strong::after { margin-top: 1px; position: absolute; } #nav-main ul.level_2 { min-width: 175px; } #nav-main ul.level_2 li a, #nav-main ul.level_2 li strong { padding: 10px 28px; } /* 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 { font-size: 16px; font-size: 1rem; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 779px) { #nav-main { height: calc(100% - 84px); top: 84px; } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { #nav-main { height: calc(100% - 70px); top: 70px; } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.1. Navigation 4.1.4. Lokale Navigation ====================================================================================== */ #footer .mod_customnav ul.level_1 li a, #footer .mod_customnav ul.level_1 li strong { display: block; padding: 5px 0 5px 21px; } #footer .mod_customnav ul.level_1 li::before { content: "\f101"; display: block; float: left; font-family: "Font Awesome 7 Free"; font-weight: 700; margin-top: 5px; } #footer a[target="_blank"]::after { content: ''; } /* ====================================================================================== 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; } /* 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 { margin-bottom: -35px !important; z-index: 2; } #nav-breadcrumb ul { background: none; } #nav-breadcrumb ul::after { content: ""; display: block; border-bottom-style: solid; border-bottom-width: 3px; margin-top: 28px; } /* ====================================================================================== 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 ====================================================================================== */ .mod_changelanguage { margin: 0 0 0 14px; } /* ====================================================================================== 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 ====================================================================================== */ /* ====================================================================================== 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 { padding: 0 21px 64px; width: calc(33.33333333% - 28px); } .mod_newslist .layout_latest figure { margin: 0 -21px; } .mod_newslist.startseite .layout_latest figure { height: 100%; margin: 0 14px 0 -21px; } .mod_newslist .layout_latest h2 { padding-top: 14px; } .mod_newslist .layout_latest h3 { font-size: 14px; font-size: 0.875rem; font-weight: 700; } .mod_newslist .layout_latest .more { bottom: 7px; position: absolute; } .mod_newslist.startseite .layout_latest { height: 377px; width: calc(100% - 28px); } /* Media Query Anfang */ @media screen and (max-width: 1039px) { .mod_newslist .layout_latest { width: calc(50% - 28px); } /* Media Query Ende */ } /* Media Query Anfang */ @media screen and (max-width: 519px) { .mod_newslist .layout_latest { width: calc(100% - 28px); } /* Media Query Ende */ } /* ====================================================================================== 4. Frontend-Module 4.7. Nachrichten 4.7.2 Nachrichtenleser ====================================================================================== */ .mod_newsreader .layout_full p.info { margin-top: 0; } .mod_newsreader .layout_full h2[itemprop="headline"] { font-size: 18px; font-size: 1.125rem; font-weight: 300; margin-top: -14px; } /* ====================================================================================== 4. Frontend-Module 4.8. Newsletter ====================================================================================== */ /* ====================================================================================== 5. Wartungsmodus ====================================================================================== */ /* ====================================================================================== 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 ====================================================================================== */ .formatierung-seitenumschlag { display: flex; justify-content: center; align-content: center; } .formatierung-spaltenumschlag-zentriert { display: flex; flex-direction: column; justify-content: center; } .formatierung-bild { align-self: center; display: block; margin-left: auto; margin-right: auto; } .ueberschrift-abschnitt-mitte { display: flex; justify-content: center; align-content: center; font-size: 2rem; } .ueberschrift-abschnitt-links { display: flex; justify-content: flex-start; align-content: center; font-size: 2rem; } .text-weiss { color: #fff; } .text-schwarz { color: #000; } .text-margin { margin-bottom: 2rem; } .startseite-slogan h1 { display: inline-block; background-color: #0078CC; color: #fff; padding: 0.4em 0.6em 0.4em 0.4em; border-radius: 0 0.5em 0.5em 0; position: relative; z-index: 10; transform: translateY(5rem); box-shadow: -100vw 0 0 0 #0078CC; } .startseite-slogan .inside { padding: 0; } .overflow-sichtbar { overflow: visible; } button, p.button { border-radius: 0.5em; }