Teaser-Block (Label + Headline)
CODE
×
HTML
<div class="container mt-8"><div class='row teaser-block teaser-block-ar'> <h2 class='animated'>Aktuelle Stellenangebote</h2> <a class='teaser a-r col-12 col-md-4' data-country="1"> <div class='img-fit'> <img class='teaser img-fluid quadrat' src='img/FilmStills5_cropped.png'> <div class='img-fit-darken'></div> </div> <div class='teaser-text short'> <div class='label'>24. August 2023</div> <h5>Lorem mollis platea velit</h5> </div> </a> <a class='teaser a-r col-12 col-md-4 S_v2' data-country="2"> <div class='img-fit v2'> <img class='teaser img-fluid portrait' src='img/first-image-slider.png'> <div class='img-fit-darken'></div> </div> <div class='teaser-text short v2'> <div class='label'>12. September 2023</div> <h5>Est Orci fermentum plecit</h5> </div> </a> <a class='teaser a-r col-12 col-md-4 S_v3' data-country="3"> <div class='img-fit v3'> <img class='teaser img-fluid landscape' src='img/second-image-slider.png'> <div class='img-fit-darken'></div> </div> <div class='teaser-text short v3'> <div class='label'>16. Juli 2023</div> <h5>Porta platea pretium velit</h5> </div> </a> <a class='teaser a-r col-12 col-md-4 S_v4' data-country="1"> <div class='img-fit v4'> <img class='img-fluid v2' src='img/Lantal-Mood-quadrat.jpg'> <div class='img-fit-darken'></div> </div> <div class='teaser-text short'> <div class='label'>24. August 2023</div> <h5>Lorem mollis platea velit</h5> </div> </a> <a class='teaser a-r col-12 col-md-4 S_v5' data-country="3"> <div class='img-fit v5'> <img class='img-fluid v6' src='img/Lantal_Langenthal.jpg'> <div class='img-fit-darken'></div> </div> <div class='teaser-text short v3'> <div class='label'>16. Juli 2023</div> <h5>Porta platea pretium velit</h5> </div> </a> </div></div>
CSS
.teaser-block-ar div.teaser-text { height: 100% } .teaser-block-ar div.img-fit { height: var(--teaser-image-height); aspect-ratio: var(--teaser-image-ar); } .teaser-block-ar img { width: 100%; height: var(--teaser-image-height); aspect-ratio: var(--teaser-image-ar); object-fit: cover; transform: scale(1); transition: -webkit-transform 1500ms ease-out; transition: transform 1500ms ease-out; } .teaser-block-ar .teaser:hover { cursor: pointer; } .teaser-block-ar .teaser:hover img { -webkit-transform: scale(1.07); transform: scale(1.07); } .teaser-block-ar .teaser .img-fit { position: relative; } .teaser-block-ar .teaser .img-fit-darken { background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box; bottom: 0; height: 0px; opacity: 0.25; position: absolute; transition: all 250ms ease-out; width: 100%; } .teaser-block-ar .teaser:hover .img-fit-darken { background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box; height: 68%; } .teaser-block-ar .teaser:hover h5 { padding-left: 0; } .teaser-block-ar .teaser h5::before { content: '+'; display: inline-block; opacity: 0; transition: width .5s ease-out, opacity .4s ease-out; width: 0; } .teaser-block-ar .teaser:hover h5::before { opacity: 1; width: 20px; } a.teaser.a-r { display: flex; flex-direction: column; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); border-bottom-left-radius: var(--br1-3); border-bottom-right-radius: var(--br1-4); text-decoration: none; } a.teaser.a-r > img { margin-bottom: 0; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r div.teaser-text { border-style: solid; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; } a.teaser.a-r > div.d-none + div.teaser-text { border-top: var(--lw2) solid var(--lc6); border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } @media screen and (max-width: 991px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) calc(var(--pr-te)) var(--pb-te) var(--pl-te); } } @media screen and (max-width: 575px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a.teaser.a-r { display: flex; flex-direction: column; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); border-bottom-left-radius: var(--br1-3); border-bottom-right-radius: var(--br1-4); text-decoration: none; } a.teaser.a-r > img { margin-bottom: 0; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r div.teaser-text { border-style: solid; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; } a.teaser.a-r > div.d-none + div.teaser-text { border-top: var(--lw2) solid var(--lc6); border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } @media screen and (max-width: 991px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) calc(var(--pr-te)) var(--pb-te) var(--pl-te); } } @media screen and (max-width: 575px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a.teaser.a-r { display: flex; flex-direction: column; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); border-bottom-left-radius: var(--br1-3); border-bottom-right-radius: var(--br1-4); text-decoration: none; } a.teaser.a-r > img { margin-bottom: 0; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r div.teaser-text { border-style: solid; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; } a.teaser.a-r > div.d-none + div.teaser-text { border-top: var(--lw2) solid var(--lc6); border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } @media screen and (max-width: 991px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) calc(var(--pr-te)) var(--pb-te) var(--pl-te); } } @media screen and (max-width: 575px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a.teaser.a-r { display: flex; flex-direction: column; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); border-bottom-left-radius: var(--br1-3); border-bottom-right-radius: var(--br1-4); text-decoration: none; } a.teaser.a-r > img { margin-bottom: 0; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r div.teaser-text { border-style: solid; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; } a.teaser.a-r > div.d-none + div.teaser-text { border-top: var(--lw2) solid var(--lc6); border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } @media screen and (max-width: 991px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) calc(var(--pr-te)) var(--pb-te) var(--pl-te); } } @media screen and (max-width: 575px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a.teaser.a-r { display: flex; flex-direction: column; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); border-bottom-left-radius: var(--br1-3); border-bottom-right-radius: var(--br1-4); } a.teaser.a-r > img { margin-bottom: 0; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r div.teaser-text { border-style: solid; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; } a.teaser.a-r > div.d-none + div.teaser-text { border-top: var(--lw2) solid var(--lc6); border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } @media screen and (max-width: 991px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) calc(var(--pr-te)) var(--pb-te) var(--pl-te); } } @media screen and (max-width: 575px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a.teaser.a-r { display: flex; flex-direction: column; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); border-bottom-left-radius: var(--br1-3); border-bottom-right-radius: var(--br1-4); text-decoration: none; } a.teaser.a-r > img { margin-bottom: 0; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r div.teaser-text { border-style: solid; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; } a.teaser.a-r > div.d-none + div.teaser-text { border-top: var(--lw2) solid var(--lc6); border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } @media screen and (max-width: 991px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) calc(var(--pr-te)) var(--pb-te) var(--pl-te); } } @media screen and (max-width: 575px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a.teaser.a-r { display: flex; flex-direction: column; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); border-bottom-left-radius: var(--br1-3); border-bottom-right-radius: var(--br1-4); } a.teaser.a-r > img { margin-bottom: 0; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r div.teaser-text { border-style: solid; border-top: none; border-top-left-radius: unset; border-top-right-radius: unset; } a.teaser.a-r > div.d-none + div.teaser-text { border-top: var(--lw2) solid var(--lc6); border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } @media screen and (max-width: 991px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) calc(var(--pr-te)) var(--pb-te) var(--pl-te); } } @media screen and (max-width: 575px) { a.teaser.a-r .teaser-text { padding: var(--pt-te) var(--pr-te) var(--pb-te) var(--pl-te); } } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); } div.img-fit { flex-shrink: inherit; border-top-left-radius: var(--br1-1); border-top-right-radius: var(--br1-2); } h5 { font-size: var(--fs-l); line-height: var(--lh-m); word-spacing: var(--bf-ws); letter-spacing: var(--bf-ls); color: var(--fc3); font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); text-align: var(--ah4); margin-bottom: calc(var(--fs-m) * var(--lh-m) / 2); } h5 { font-size: var(--fs-l); line-height: var(--lh-m); word-spacing: var(--bf-ws); letter-spacing: var(--bf-ls); color: var(--fc3); font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); text-align: var(--ah4); margin-bottom: calc(var(--fs-m) * var(--lh-m) / 2); } h2.animated { overflow:hidden; font-family: var(--headline-font-h1-1); font-style: var(--headline-font-h1-2); font-weight: var(--headline-font-h1-3); font-size: var(--fs-xxl); letter-spacing: var(--hf-ls); word-spacing: var(--hf-ws); margin-top: 0; margin-bottom: calc(var(--fs-xxxl) * var(--lh-xs) / 2); } h5 { font-size: var(--fs-l); line-height: var(--lh-m); word-spacing: var(--bf-ws); letter-spacing: var(--bf-ls); color: var(--fc3); font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); text-align: var(--ah4); margin-bottom: calc(var(--fs-m) * var(--lh-m) / 2); } img.img-fluid.v6 { width: 100%; } @media screen and (max-width: 991px) { h5 { font-size: var(--fs-m); margin-bottom: calc(var(--fs-s) * var(--lh-m) / 2); } h5 { font-size: var(--fs-m); margin-bottom: calc(var(--fs-s) * var(--lh-m) / 2); } h2.animated { font-size: var(--fs-xl); margin-top: 0; margin-bottom: calc(var(--fs-xl) * var(--lh-xs) / 2); } h5 { font-size: var(--fs-m); margin-bottom: calc(var(--fs-s) * var(--lh-m) / 2); } } @media screen and (max-width: 575px) { h5 { font-size: var(--fs-s); margin-bottom: calc(var(--fs-xs) * var(--lh-m) / 2); } h5 { font-size: var(--fs-s); margin-bottom: calc(var(--fs-xs) * var(--lh-m) / 2); } h2.animated { font-size: var(--fs-l); line-height: var(--lh-s); margin-top: 0; margin-bottom: calc(var(--fs-l) * var(--lh-s) / 2); } h5 { font-size: var(--fs-s); margin-bottom: calc(var(--fs-xs) * var(--lh-m) / 2); } } img.img-fluid { width: 100%; } div.label { font-size: var(--fs-xxs); line-height: var(--lh-m); font-family: var(--body-font-boldstrong-1); font-style: var(--body-font-boldstrong-2); font-weight: var(--body-font-boldstrong-3); letter-spacing: var(--lls-1); word-spacing: var(--lls-2); word-spacing: var(--bf-ws); color: var(--fc2); text-transform: var(--btt); margin-right: auto; margin-bottom: calc(var(--fs-xs) * var(--lh-m) / 2); margin-left: auto; max-width: 890px; } @media screen and (max-width: 991px) { div.label { font-size: var(--fs-xxs); margin-bottom: calc(var(--fs-xxs) * var(--lh-m) / 2); } } @media screen and (max-width: 575px) { div.label { font-size: var(--fs-xxxs); margin-bottom: calc(var(--fs-xxxs) * var(--lh-m) / 2); } } h2 { color: var(--fc3); font-size: var(--fs-xxl); line-height: var(--lh-s); font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); text-align: var(--ah2); letter-spacing: var(--hf-ls); word-spacing: var(--hf-ws); margin-bottom: calc(var(--fs-xxl) * var(--lh-s) / 2); } @media screen and (max-width: 991px) { h2 { font-size: var(--fs-xl); margin-bottom: calc(var(--fs-xl) * var(--lh-s) / 2); } } @media screen and (max-width: 575px) { h2 { font-size: var(--fs-ll); margin-bottom: calc(var(--fs-ll) * var(--lh-s) / 2); } } p + h2, h1 + h2 { margin-top: calc(var(--fs-xxl) * var(--lh-s) * 1.5) !important; } .container.background .top-distance > h2:first-of-type, .container.background .top-distance-large > h2:first-of-type { margin-top: -12px !important; } @media screen and (max-width: 991px) { p + h2, h1 + h2 { margin-top: calc(var(--fs-xl) * var(--lh-s) * 1.25) !important; } } @media screen and (max-width: 575px) { p + h2, h1 + h2 { margin-top: calc(var(--fs-ll) * var(--lh-s)) !important; } } @media screen and (max-width: 389px) { h2 { font-size: var(--fs-l) } h2.animated, h2.large { font-size: var(--fs-l) } }
JS
Teaser-Block (Label + Headline)
Last Edit: Nov 7, 2023, 10:30am
×
Aktuelle Stellenangebote
24. August 2023
Lorem mollis platea velit
12. September 2023
Est Orci fermentum plecit
16. Juli 2023
Porta platea pretium velit
24. August 2023
Lorem mollis platea velit
16. Juli 2023
Porta platea pretium velit