/* BVAEB/Website/MeineBVAEB - Landingpage/[Layout]/meinebvaeb-landingpage.css 18px = 1rem (base) 20px = 1.111rem 21px = 1.166rem 24px = 1.333rem 30px = 1.667rem 38px = 2.1rem zeilenkonzeptmetacontainer: .meta_container.mc-custom1 und .meta_container.mc-custom2 und .meta_container.mc-custom3: ab einer Bildschirmbreite von 600px wird .meta_container.mc-custom2 vor .meta_container.mc-custom1 dargestellt .meta_container.mc-custom2: grüne Trennlinie unter dem MetaContainer 1. LC_Tile: Bilder im Aloha-Feld werden am rechten und linken Rand dargestellt. 2. LC_Tile: Kachel-Bild ist schmäler. Inhalt des Aloha-Feldes ist breiter. Inhalt des Aloha-Feldes wird ohne Abstand neben dem Kachel-Bild dargestellt. .meta_container.mc-custom3 .lc_columnContainer .image_left: Kachel-Bilder werden direkt links neben dem Text des Aloha-Feldes dargestellt. Die Kachel-Überschrift wird in der Höhe zentriert dargestellt. lctile: Element-Typ: tile_type06: Kachel-Bild ist schmäler. Inhalt des Aloha-Feldes ist breiter. Kachel-Überschrift ohne Abstand. */ /* ============================================ */ /* base settings - Start */ /* ============================================ */ /* color definition */ :root { --carrier-color: #84bd00; /* grün */ --headline-color: #008746; --text-color: #000000; --text-color-02: #ffffff; --bg-color: #000000; --link-color: #008746; --carousel-text-color: #008746; --carousel-bg-color: #008746; --carousel-border-color: #008746; } /* font */ h1, .text h1, .tile h1, h2, .text h2, .tile h2, .contentline>.center>h2, h3, .text h3, .tile h3, h4, .text h4, .tile h4, h5, .text h5, .tile h5, h6, .text h6, .tile h6 { color: var(--headline-color); } .contentline>.center>h2 { -webkit-text-fill-color: var(--headline-color); } h2, .contentline>.center>h2, .center>.text>h2, .tile .textbox h2 { font-size: 1.667rem; font-weight: 700; line-height: 2.1rem; } .contentline>.center>h2:after, .center>.text>h2:after { display: none; } /* links */ a:visited, a:active, a:focus, a:hover { color: var(--link-color); } .text a { font-size: 1rem; } /* Besondere Link Darstellung */ a.esvlink_button_left, .lc_pageheader a.esvlink_button_left { float: none; font-size: 1.333rem; font-weight: 400; margin: 55px 0 5px 0; text-transform: none; width: 250px; } @media (max-width: 600px) { .contentline { padding-bottom: 0; } } /* ============================================ */ /* header - Start */ /* ============================================ */ #esv-header, .fixed #esv-header { height: 110px; } #esv-header .logo, .meta { display: none; } .tools, .fixed #esv-header .tools { height: 60px; margin-top: 37px; } .accessicon { margin-right: 20px; padding: 9px 0 0 0; width: 56px; } .accessicon a { text-decoration: none; } .accessicon img { margin: 2px 8px 3px 3px; width: 40px; } .login { margin-top: 12px; } .headerNavLinks, .fixed #esv-header .headerNavLinks { padding-top: 36px; position: relative; width: 266px; } .singleNavLink { background: var(--carrier-color); border-radius: 20px; height: 40px; padding-top: 5px; } .headerNavLinks .singleNavLink .esvlink .esvlink-linktext { line-height: normal; vertical-align: top; } .singleNavLink:nth-child(2) { display: none; } .singleNavLink a { color: var(--text-color-02); display: block; font-weight: 400; font-size: 1.333rem; text-align: center; text-decoration: none; width: 100% } /* fixed-header */ .fixed #esv-header .accessicon { display: block; height: 56px; } .fixed #esv-header .menuicon { display: none; } @media (max-width: 960px) { .tools, .fixed #esv-header .tools { height: 60px; margin-top: 23px; } .headerNavLinks { padding-left: 1%; } .accessicon { align-items: baseline; height: 100%; padding-top: 6px; } .accessicon img { height: auto; } .menuicon { display: none; } .login { width: 85px; } img#login_icon { padding-top: 4px; } ul#userlinks { width: 255px; } } @media (max-width: 600px) { #esv-header, .fixed #esv-header { height: 50px; } .tools, .fixed #esv-header .tools { height: 50px; margin-top: -8px; } .accessicon { margin-right: 60px; } .login { width: 40px; } .headerNavLinks, .fixed #esv-header .headerNavLinks { padding: 5px 0 0 0; position: absolute; right: 60px; width: 40px; } .singleNavLink:first-child { display: none; } .singleNavLink:nth-child(2) { display: block; padding-top: 0; } .singleNavLink a { height: 40px; } .singleNavLink:nth-child(2) img { padding: 6px; } } @media (min-width: 501px) { .accessicon{ margin-top: -14px; } .accessicon img { margin-right: 3px; } .login{ margin-top: -2px; } } /* ============================================ */ /* main-navigation - Start */ /* ============================================ */ .main { display: none; } /* ============================================ */ /* zeilenkonzeptpageheader - Start */ /* ============================================ */ .lc_navigations + .meta_container { margin-top: 0; } .bigimage_teaser .teaser_text { justify-content: left; } .bigimage_teaser .text { color: var(--text-color); padding-left: 5%; padding-right: 5%; text-shadow: none; } .lc_pageheader p { font-size: 1.166rem; } .lc_pageheader strong { font-weight: 400; } .lc_pageheader a { color: var(--link-color); font-size: 1.166rem; } .lc_pageheader a.esvlink_button_left { color: var(--text-color-02); } .lc_pageheader a.esvlink_button_left:hover { color: var(--link-color); } @media (max-width: 1300px) { .lc_pageheader .bigimage_teaser { height: 400px; } } @media (max-width: 1260px) { .lc_pageheader .bigimage_teaser .cover { margin-left: calc((1265px - 100vw) * -1); max-width: none; width: auto; } } @media (max-width: 960px) { .lc_pageheader .bigimage_teaser { height: 310px; } .lc_pageheader .bigimage_teaser .cover { margin-left: calc((980px - 100vw) * -1); } .lc_pageheader a.esvlink_button_left { margin-top: 30px; } } @media (max-width: 800px) { .lc_pageheader .bigimage_teaser { height: 270px; } .lc_pageheader .bigimage_teaser .cover { margin-left: calc((855px - 100vw) * -1); } } @media (max-width: 700px) { .lc_pageheader .bigimage_teaser { height: 250px; } .lc_pageheader .bigimage_teaser .cover { margin-left: calc((790px - 100vw) * -1); } } @media (max-width: 600px) { .lc_pageheader .bigimage_teaser { height: 452px; } .lc_pageheader .bigimage_teaser:before { background-image: url('/cdscontent/load?contentid=10008.769842&version=1661247471'); background-repeat: no-repeat; content: ''; display: block; height: 300px; margin-left: calc((600px - 100vw) * -1); margin-top: 180px; } .lc_pageheader .bigimage_teaser .cover { display: none } .bigimage_teaser .teaser_text { align-items: unset; padding-top: 10px; } .lc_pageheader .size_50pc { max-width: 270px; } .lc_pageheader a.esvlink_button_left { margin-top: 0; min-height: 35px; } } @media (max-width: 420px) { .lc_pageheader .bigimage_teaser { height: 420px; } .lc_pageheader .bigimage_teaser:before { background-size: auto 240px; margin-left: calc((490px - 100vw) * -1); } } /* ============================================ */ /* breadcrumb - Start */ /* ============================================ */ .lc_navigations { display: none; } /* ============================================ */ /* zeilenkonzeptmetacontainer - Start */ /* ============================================ */ /* Hintergrundfarbe: grau / Contentbreite: schmal */ .meta_container.bg_grey.slim .center { padding-left: 190px; padding-right: 190px; } /* Hintergrundfarbe: gelb */ .meta_container.bg-yellow .contentline { padding: 18px 0; } .meta_container.bg-yellow h2 { color: var(--text-color); font-weight: normal; padding: 0; -webkit-text-fill-color: var(--text-color); } /* Zusätzliche HTML Klasse: Custom 1 */ .meta_container.mc-custom2 { display: flex; padding-left: calc(((100vw - 1280px) / 2)); } .meta_container.mc-custom2 .lc_columnContainer:first-child, .meta_container.mc-custom2 .lc_columnContainer:first-child .center { width: 800px; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .imagebox { height: 340px; width: 179px; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .tileimg { position: absolute; top: 50%; transform: translateY(-50%); } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .textbox { width: calc(100% - 179px); } .meta_container.mc-custom2 .lc_columnContainer:first-child .tile .esvlink:first-child img { margin-right: 60px; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper { margin: auto 0; padding-bottom: 2px; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper.no-sliderdots { padding-bottom: 40px; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper, .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .center { width: 480px; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .center, .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .text { padding: 0; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-dots { margin-bottom: 0; margin-top: 0; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .tile { margin-left: 0 !important; padding: 0 18px 0 0; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .tileimg { margin: 0; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-arrow-wrapper { display: none; } /* Zusätzliche HTML Klasse: Custom 3 */ .meta_container.mc-custom3 { border-top: 3px solid var(--carrier-color); } .meta_container.mc-custom3 .lc_columnContainer .image_left .imagebox, .meta_container.mc-custom3 .lc_columnContainer .image_left .textbox { width: 49%; } .meta_container.mc-custom3 .lc_columnContainer .tile .tileimg { height: 60px; float: right; } .meta_container.mc-custom3 .lc_columnContainer .tile:first-child .tileimg { height: 80px; } .meta_container.mc-custom3 .lc_columnContainer .tile .tilelink { height: 100%; } .meta_container.mc-custom3 .lc_columnContainer .tile:nth-child(2) .imagebox .tilelink { padding: 10px 0; } .meta_container.mc-custom3 .lc_columnContainer .tile .tilelink>h3 { margin: auto 0; } @media (min-width: 961px) { .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .text p { /* overrules redactional settings */ text-align: left !important; } } @media (max-width: 1300px) { /* Zusätzliche HTML Klasse: Custom 2 */ .meta_container.mc-custom2 { margin-left: 0; padding-left: 2%; } .meta_container.mc-custom2 .lc_columnContainer:first-child, .meta_container.mc-custom2 .lc_columnContainer:first-child .center { width: 65vw; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper, .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .center { width: 31vw; } } @media (max-width: 1100px) { .meta_container.bg_grey.slim .center { padding-left: 140px; padding-right: 140px; } } @media (max-width: 1000px) and (min-width: 961px) { /* Zusätzliche HTML Klasse: Custom 2 */ .meta_container.mc-custom2 .lc_columnContainer:first-child .tile .esvlink:first-child img { margin-right: 40px; } } @media (max-width: 960px) { .meta_container.bg_grey.slim .center { padding-left: 13%; padding-right: 13%; } /* Zusätzliche HTML Klasse: Custom 2 */ .meta_container.mc-custom2 { display: block; padding-left: 0; } .meta_container.mc-custom2 .lc_columnContainer:first-child { width: 100%; } .meta_container.mc-custom2 .lc_columnContainer:first-child .center { width: 96%; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right { flex-direction: column; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .imagebox { padding-left: 18px; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .tileimg { top: unset; transform: unset; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .textbox { width: 100%; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper { padding: 0; bottom: 20px; left: calc(2vw + 197px); position: absolute; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper.no-sliderdots { bottom: 58px; padding: 0; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper, .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .center { width: 500px; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .tile { padding: 0; } } @media (max-width: 740px) { .meta_container.bg_grey.slim .columns2_layout { grid-template-columns: 100%; } /* Zusätzliche HTML Klasse: Custom 2 */ .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper { bottom: 57px; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper.no-sliderdots { bottom: 95px; } .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper, .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper .center { width: 380px; } /* Zusätzliche HTML Klasse: Custom 3 */ .meta_container.mc-custom3 .lc_columnContainer .image_left .imagebox { width: 40%; } .meta_container.mc-custom3 .lc_columnContainer .image_left .textbox { width: 58%; } .meta_container.mc-custom3 .lc_columnContainer .tile .tileimg { height: 50px; } .meta_container.mc-custom3 .lc_columnContainer .tile:first-child .tileimg { height: 70px; } } @media (max-width: 600px) { .lc_pageheader, .meta_container.mc-custom1, .meta_container.mc-custom2, .meta_container.mc-custom3 { padding-bottom: 30px; } /* Zusätzliche HTML Klasse: Custom 1 */ .meta_container.mc-custom1.bg_grey > .contentline:first-child { padding-top: 0; } .meta_container.mc-custom1 .column1_layout, .meta_container.mc-custom1 .columns2_layout, .meta_container.mc-custom1 .columns3_layout, .meta_container.mc-custom1 .columns4_layout, .meta_container.mc-custom1 .columns5_layout { grid-row-gap: 1em; } /* Zusätzliche HTML Klasse: Custom 2 */ .meta_container.mc-custom2 .tile .esvlink img { max-width: 140px; } .meta_container.mc-custom2 .lc_columnContainer:first-child { padding-bottom: 0; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .imagebox, .meta_container.mc-custom2 .lc_columnContainer.slick-carousel-tagtyp-wrapper { display: none; } .meta_container.mc-custom2 .lc_columnContainer:first-child .image_right .textbox { text-align: center; } /* Zusätzliche HTML Klasse: Custom 3 */ .meta_container.mc-custom3 .lc_columnContainer { padding-bottom: 30px; } .meta_container.mc-custom3 .lc_columnContainer .columns2_layout { grid-template-columns: 49% 49%; } .meta_container.mc-custom3 .lc_columnContainer .image_left .imagebox { width: 26%; } .meta_container.mc-custom3 .lc_columnContainer .tile .imagebox .tilelink { min-height: 42px; position: relative; } .meta_container.mc-custom3 .lc_columnContainer .tile .tileimg { bottom: 0; height: 22px; float: right; margin: auto 0; position: absolute; right: 0; top: 0; } .meta_container.mc-custom3 .lc_columnContainer .tile:first-child .tileimg { height: 40px; } .meta_container.mc-custom3 .lc_columnContainer .image_left .textbox { width: 72%; } .meta_container.mc-custom3 .lc_columnContainer h3 { font-size: 1.111rem; padding-left: 5px; padding-right: 5px; } /* change the order of the meta-container */ .standardlineconcept { display: grid; } .meta_container.mc-custom1 { margin-bottom: 0; order: 2; } .meta_container.mc-custom2 { order: 1; } .meta_container.mc-custom3 { order: 3; } } @media (max-width: 400px) { .meta_container.bg_grey.slim .center { padding-left: 7%; padding-right: 7%; } /* Zusätzliche HTML Klasse: Custom 2 */ .meta_container.mc-custom2 .tile .esvlink img { max-width: 110px; } .meta_container.mc-custom2 .lc_columnContainer:first-child .tile .esvlink img, .meta_container.mc-custom2 .lc_columnContainer:first-child .tile .esvlink:first-child img { margin: 0 5px; } /* Zusätzliche HTML Klasse: Custom 3 */ .meta_container.mc-custom3 .lc_columnContainer h3 { font-size: 1rem; line-height: 1.111rem; padding-left: 2px; } .meta_container.mc-custom3 .lc_columnContainer .tile .tileimg { height: 17px; } .meta_container.mc-custom3 .lc_columnContainer .tile:first-child .tileimg { height: 34px; } } /* ============================================ */ /* zeilenkonzeptcolumncontainer - Start */ /* ============================================ */ /* carousel */ .lc_columnContainer.slick-carousel-tagtyp-wrapper .center { padding: 0 62px; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-wrapper { padding: 0; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-pausebutton-dots-wrapper { z-index: 3; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-pausebutton { color: var(--carousel-text-color); } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-dots li.slick-active button { border-color: var(--carousel-border-color); } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-dots li.slick-active button:before { background: var(--carousel-bg-color); } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-row-arrow-wrapper { position: relative; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-row { z-index: 3; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .tile { min-height: 62px !important; padding-left: 20px; padding-right: 20px; } .meta_container:not(.mc-custom2) .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-slide img { bottom: 0; margin: auto 0; position: absolute; top: 0; width: 60px; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .tile.tile_type06.image_left .textbox { padding-bottom: 2px; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-arrow-wrapper { justify-content: space-between; left: -62px; top: 0; width: calc(100% + 124px); } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-arrow { margin: auto 0; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-arrow { color: var(--carousel-text-color); } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-prev .sv-o_prev:before { content: '\e913'; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-next .sv-o_next:before { content: '\e917'; } @media (max-width: 600px) { /* carousel */ .lc_columnContainer.slick-carousel-tagtyp-wrapper .center { padding: 0 30px; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .tile { padding: 0; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-arrow-wrapper { left: -30px; overflow: hidden; width: calc(100% + 60px); } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-arrow { height: 57px; width: 25px; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-prev { margin-left: 0; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-prev .sv-o_prev:before { left: -19px; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-arrow span:after { display: none; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-next { margin-right: 0; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-next .sv-o_next:before { left: -19px; } .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-arrow span:after { display: none; } } /* ============================================ */ /* lctile - Start */ /* ============================================ */ .tile .textbox h3 { font-weight: 400; } /* Element-Typ: Typ 6 */ .tile.tile_type06.image_left .imagebox { width: 60px; } .tile.tile_type06.image_left .textbox { width: calc(100% - 60px); } .tile.tile_type06.image_left .textbox>h3, .tile.tile_type06.image_left .textbox .tilelink h3 { margin: 0; } .tile.tile_type06 .text { padding-bottom: 0; } .tile.tile_type06 .more_link { display: none; } @media (max-width: 600px) { div.columns2_layout div.tile:nth-last-child(2) { margin-bottom: 0; } } /* ============================================ */ /* contrast-mode - Start */ /* ============================================ */ html.contrast-mode body.template-Standardzeilenkonzept .accessicon { background: var(--bg-color); } html.contrast-mode .lc_columnContainer.slick-carousel-tagtyp-wrapper .slick-carousel-arrow-wrapper .slick-arrow { border: none; margin: auto 0; }