html {
-webkit-text-size-adjust: 100%;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="submit"],
textarea {
-webkit-appearance: none;
}
@media (max-width: 767px) {
/***** Globals - Start *****/
body {
font-size: 20px;
}
h1 {
font-size: 36px;
}
.headline-outer h1 {
padding: 26px 32px 18px 26px;
font-size: 36px;
border-radius: 0 44px 0 0;
}
h2 {
margin: 0 0 10px;
font-size: 32px;
}
.headline-outer {
margin: 0 0 10px;
}
.headline-outer h2 {
margin: 0 0 10px;
font-size: 14px;
}
.headline-outer h2 span {
font-size: 32px;
}
h3 {
margin: 0 0 10px;
font-size: 28px;
}
p {
margin: 0 0 14px;
}
.frame-type-textmedia .ce-bodytext p:last-of-type + h3,
.frame-type-text .ce-bodytext p:last-of-type + h3 {
margin-top: 14px;
}
.content ol {
margin: 0 0 16px;
}
.content ol li {
margin: 0 0 24px;
padding: 0 0 0 32px;
}
.content ol li:last-of-type {
margin: 0;
}
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"] {
height: 40px;
padding: 0 12px;
font-size: 20px;
}
select {
height: 40px;
}
.select .selected {
padding-top: 7px;
padding-bottom: 8px;
}
.select .selected::before {
top: 16px;
}
.form-group {
display: block;
width: 100%;
}
.form-group.preview {
display: flex;
}
/***** Globals - End *****/
/***** Layout- und Rahmenklassen - Start *****/
.frame-custom-100 .headline-outer {
/*margin: 0 0 40px;*/
}
.frame-custom-100 .headline-outer h2 {
font-size: 18px;
}
.frame-custom-100 .headline-outer h2 span {
font-size: 36px;
}
/***** Layout- und Rahmenklassen - End *****/
/***** Content - Start *****/
.content ul li {
margin: 0 0 22px;
padding: 0 0 0 30px;
}
.content ul li::before {
top: 8px;
left: 4px;
}
.ce-gallery figcaption {
font-size: 18px;
}
.mb76,
.frame-type-textmedia,
.frame-type-text {
margin-bottom: 40px;
}
.frame-type-image {
margin: 0 0 40px;
padding: 40px 0 10px;
}
.ce-gallery[data-ce-columns="2"] .ce-column {
width: calc(50% - 5px);
}
.ce-gallery img {
width: 100%;
}
.ce-gallery figure {
width: 100%;
}
.ce-intext.ce-left ol,
.ce-intext.ce-left ul {
padding-left: 4px;
}
.frame-space-after-medium {
margin-bottom: 40px;
}
/***** Content - End *****/
/***** RTE - Start *****/
.content a.link-arrow-right {
margin: 0 0 0 30px;
}
.content a.link-arrow-right::before {
top: 7px;
width: 24px;
background-size: 24px auto;
}
.content a.link-arrow-down::before {
top: 5px;
left: -19px;
height: 20px;
background-size: 12px auto;
}
.content a.link-arrow-down {
margin: 0 0 0 24px;
}
/***** RTE - Start *****/
/***** Header - Start *****/
header.main .header-stage {
align-items: flex-start;
height: 90px;
}
header.main.scrolled .header-stage {
height: 90px;
}
header.main .logo {
left: -4px;
width: 121px;
height: 80px;
background-size: 121px auto;
}
header.main.scrolled .logo {
left: -4px;
}
header.main .header-actions {
margin: 20px 0 0;
}
header.main .header-actions .btn-nav {
width: 40px;
height: 30px;
background-size: auto 30px;
}
header.main .header-actions .donate {
width: 39px;
height: 30px;
margin: 0 26px 0 0;
background-size: auto 30px;
}
header.main .header-actions .search .btn {
width: 28px;
height: 28px;
margin: 0 2px 0 0;
}
header.main .header-actions .search .btn::before {
width: 28px;
height: 28px;
background-size: auto 28px;
}
header.main .header-actions .search .btn::after {
left: 2px;
width: 23px;
height: 23px;
background-size: auto 23px;
}
header.main .header-actions .search .search-field,
header.main.scrolled .header-actions .search .search-field {
top: 73px;
padding-left: 12px;
padding-right: 12px;
}
header.main .header-actions .search .search-field .inputs {
height: 40px;
}
header.main .header-actions .search .search-field .inputs input[type="text"] {
flex: 0 0 calc(100% - 46px);
height: 40px;
font-size: 20px;
}
header.main .header-actions .search .search-field .inputs input[type="submit"] {
flex: 0 0 46px;
width: 46px;
height: 40px;
background-size: 30px auto;
}
/***** Header - End *****/
/***** Navigation - Start *****/
nav.main {
width: 100%;
padding: 32px 24px 40px 18px;
}
nav.main .btn-nav-close {
top: 18px;
right: 20px;
z-index: 2;
}
nav.main > ul {
width: auto;
}
nav.main > ul > li {
margin: 0 0 24px;
padding: 0 0 0 38px;
}
nav.main > ul > li .toggle {
left: 0;
}
nav.main .subnav {
margin: 0 0 0 -12px;
padding: 20px 0 0 0;
}
nav.main .subnav > ul > li {
padding-left: 42px;
}
/***** Navigation - End *****/
/***** Header-Image - Start *****/
.header-image {
margin-top: 90px;
}
/***** Header-Image - End *****/
/***** Header-Teaser - Start *****/
.header-teaser .teasers {
position: relative;
bottom: auto;
margin: -68px 0 0;
}
.header-teaser .redbox .title {
margin: 0 0 10px;
padding: 0 50px 0 0;
font-size: 32px;
}
.header-teaser .redbox .icon.i-2::before {
width: 47px;
height: 54px;
}
.header-teaser .redbox .text {
font-size: 20px;
line-height: 1.25;
}
.header-teaser .redbox .text p {
margin: 0 0 16px;
}
.header-teaser .whitebox {
margin: 30px 0 0;
padding: 0 12px 0 28px;
}
.header-teaser .whitebox .text {
font-size: 20px;
}
.header-teaser .whitebox .text p {
margin: 0 0 16px;
}
.header-teaser .whitebox .text a.link-arrow-right::before {
background-size: 24px auto;
}
/***** Header-Teaser - End *****/
/***** Bild vollflächig - Start *****/
.image-fullwidth .caption-pos {
position: static;
margin: -26px 12px 0;
}
.image-fullwidth .caption {
padding: 42px 24px 24px;
}
/***** Bild vollflächig - End *****/
/***** Infobox - Start *****/
.infobox {
margin: 42px 0 40px 58px;
}
.infobox .icon {
top: -42px;
left: -58px;
width: 80px;
height: 62px;
}
.infobox .icon::before {
top: 12px;
left: 12px;
width: 36px;
height: 36px;
background-size: 36px auto;
}
.infobox .infobox-content {
padding: 24px 24px 24px 24px;
border-radius: 0 44px 0 0;
}
.infobox .title .headline {
font-size: 14px;
}
.infobox .title .headline span {
font-size: 32px;
}
/***** Infobox - End *****/
/***** About - Start *****/
.about {
margin: 0 0 40px;
padding: 30px 0 38px;
}
.about .title {
margin: 0 0 24px;
font-size: 18px;
}
.about .title .headline span {
font-size: 32px;
}
.about .text {
font-size: 24px;
}
.about .more .link-arrow-right::before {
top: 9px;
background-size: 28px auto;
}
.about .images .image {
max-width: 75%;
margin: 0 auto 24px;
}
/***** About - End *****/
/***** Video - Start *****/
.video-wrapper {
margin: 0 0 40px;
padding: 20px 0 40px;
}
.video-wrapper .title {
margin: 0 0 24px;
}
.video-wrapper .title .headline {
font-size: 14px;
}
.video-wrapper .title .headline span {
font-size: 32px;
}
.video-wrapper .text {
margin: 12px 0 0 0;
padding: 24px 24px 30px;
border-radius: 0 0 0 44px;
}
/***** Video - End *****/
/***** Zitatbox - Start *****/
.quotebox {
margin: 82px 0 40px;
padding: 98px 0 24px;
}
.quotebox .icon {
top: -42px;
left: calc(50% - 57px);
width: 114px;
height: 118px;
}
.quotebox .icon::before {
width: 50px;
height: 43px;
background-size: 50px auto;
}
.quotebox .text {
font-size: 24px;
}
.quotebox .author-name {
font-size: 20px;
}
/***** Zitatbox - End *****/
/***** Themen-Teaser - Start *****/
.theme-teaser {
margin: 0 0 40px;
padding: 40px 0 0;
}
.theme-teaser .title {
font-size: 32px;
margin: 0 0 40px;
}
.theme-teaser .teaser-elements {
display: block;
}
.theme-teaser .teaser-elements .teaser {
width: auto;
margin: 0 0 40px;
}
.theme-teaser .teaser-elements .teaser:nth-of-type(odd) .image {
margin-right: 0;
margin-left: 40px;
}
.theme-teaser .teaser-elements .teaser:nth-of-type(even) .image {
margin-left: 0;
margin-right: 40px;
}
.theme-teaser .teaser-elements .teaser .cta a .link-text span {
font-size: 26px;
}
.theme-teaser .teaser-elements .teaser .cta a::before {
top: 23px;
left: 14px;
background-size: 28px auto;
}
.theme-teaser .teaser-elements .teaser .cta a {
padding: 14px 16px 12px 52px;
font-size: 12px;
}
/***** Themen-Teaser - End *****/
/***** Publikationen - Start *****/
.publications {
margin: 0 0 40px;
}
.publications .content {
margin: 0;
padding: 24px 0 0;
}
.publications .bg-color {
height: 50%;
}
.publications .content .title {
height: 78px;
margin: -115px 24px 13px;
font-size: 14px;
}
.publications .content .title .headline span {
font-size: 32px;
}
.publications .publication-items {
padding: 0;
}
.publications .item .text {
font-size: 20px;
}
.publications .more-all a {
font-size: 12px;
border-bottom: 2px solid rgb(var(--color-custom-3));
}
.publications .more-all a::before {
top: -1px;
}
.publications .more-all a span {
font-size: 20px;
border-bottom: none;
}
/***** Publikationen - End *****/
/***** Blog-Teaser - Start *****/
.blog-teaser {
margin: 0 0 40px;
padding: 12px 0 20px;
}
.blog-teaser .blog-actions {
top: 0;
left: -50px;
padding: 20px 20px 16px 26px;
border-radius: 0 0 0 44px;
}
.blog-teaser .blog-actions .title .headline span {
font-size: 32px;
}
.blog-teaser .blog-actions .title {
margin: 0 0 18px;
}
.blog-article .image {
margin: 40px 0 20px 0;
}
/***** Blog-Teaser - End *****/
/***** Multiteser Material-DB & Newsletter - Start *****/
.multi-teaser {
margin: 0 0 40px;
}
.multi-teaser .teaser-left {
margin-bottom: 40px;
}
/***** Multiteser Material-DB & Newsletter - End *****/
/***** Aktuelles - Start *****/
.news .article.rm {
margin: 0 0 40px;
}
.news .article.rm .image {
margin: 0 0 20px;
}
.news .article .title h2 {
margin: 0 0 16px;
}
.news .article .date {
font-size: 18px;
}
/* Hide Date for Publications on Home Page */
#c2 .news .article .date {
display: none;
}
.news .article .text p {
margin: 0 0 16px;
line-height: 1.25;
}
.news .page-navigation .page-number {
font-size: 28px;
}
.news .no-news-found {
margin: 0 0 40px;
}
/***** Aktuelles - End *****/
/***** Aktuelles-Detailseite - Start *****/
.news-single .article .headline-outer .title {
display: block;
min-width: unset;
margin: 66px 0 24px;
padding: 24px 24px 18px 22px;
border-radius: 0 40px 0 0;
background-color: rgba(var(--color-secondary-light), .85);
}
.news-single .article .headline-outer .category {
margin: 0 0 20px;
font-size: 14px;
}
.news-single .article .headline-outer .category a {
font-size: 28px;
}
.news-single .article .headline-outer .title h1 {
font-size: 32px;
}
.news .footer p {
display: flex;
}
.news .footer p > span {
display: block;
}
.news .footer span.news-list-date {
margin-top: 8px;
}
.news .footer span.news-list-category span {
margin: 0 0 8px;
padding: 8px 16px 9px;
border-radius: 40px;
font-size: 16px;
}
.news-single .article .news-img-caption {
font-size: 18px;
}
.news-single .news-related-wrap .news-related {
margin: 0 0 40px;
}
.news-single .article .blog .author {
margin: 0 0 24px;
}
.news-single .article .blog .author .image {
margin: 0 12px 0 0;
}
.news-single .article .blog .author .title-author {
font-size: 14px;
}
.news-single .article .blog .author .title-author .headline span {
font-size: 28px;
}
.news-single .article .blog .author .text {
font-size: 18px;
line-height: 1.25;
}
.news-single .news-text-wrap {
margin-bottom: 40px;
}
.news-single .article .news-img-wrap {
float: none;
width: 100%;
margin: 0 0 24px 0;
}
/***** Aktuelles-Detailseite - End *****/
/***** Aktuelles-Startseite - Start *****/
.article.rm.start {
margin: 0 0 40px;
}
.news .article.rm.start .category {
font-size: 32px;
}
.news .article .text .more a::before {
top: 7px;
}
/***** Aktuelles-Startseite - End *****/
/***** Ansprechpartner - Start *****/
.tx-ttaddress {
margin: 0 0 20px;
}
.vcard {
margin: 0 0 20px;
}
.vcard.person::before {
display: none;
}
.vcard .image {
flex: 0 0 160px;
}
.vcard.person .title .headline span {
font-size: 32px;
}
.vcard .details {
font-size: 20px;
}
/***** Ansprechpartner - End *****/
/***** Teaser - Start *****/
.image-text-teaser {
margin: 0 0 164px;
}
/***** Teaser - End *****/
/***** Spenden-Teaser - Start *****/
.donate-teaser {
margin: 0 0 40px;
}
.donate-teaser .teaser-content {
display: block;
margin: 0 0 64px 56px;
}
.donate-teaser .teaser-content .icon {
width: 84px;
height: 88px;
bottom: -62px;
left: -56px;
}
.donate-teaser .teaser-content .icon::before {
width: 50px;
height: 53px;
background-size: 50px auto;
}
.donate-teaser .teaser-content .text {
padding: 24px 24px 20px 24px;
font-size: 20px;
}
.donate-teaser .teaser-content .text .title {
font-size: 24px;
}
.donate-teaser .teaser-content .text .title .headline span {
font-size: 32px;
}
.donate-teaser .teaser-content .text .bodytext a.link-arrow-right {
margin-top: 0;
}
.donate-teaser .teaser-content .text .bodytext a.link-arrow-right::before {
top: 8px;
}
/***** Spenden-Teaser - End *****/
/***** Tabellen - Start *****/
.table.rm th,
.table.rm td {
padding: 6px 16px;
}
/***** Tabellen - End *****/
/***** Materialdatenbank- Suche - Start *****/
.materialdb-search {
display: block;
margin: 0 0 40px;
}
.materialdb-search .inner {
padding: 24px 24px 24px;
border-radius: 0 44px 0 0;
}
.materialdb-search .title {
margin: 0 0 22px 0;
}
.materialdb-search .headline {
font-size: 28px;
}
.materialdb-search .icon {
display: none;
}
.materialdb-search .inputs input[type="text"] {
flex: 0 0 calc(100% - 46px);
width: calc(100% - 46px);
}
.materialdb-search .inputs input[type="submit"] {
width: 46px;
height: 40px;
padding: 0;
text-indent: -9999em;
/*background-position: center calc(50% + 2px);*/
background-position: center center;
background-size: 27px auto;
}
/***** Materialdatenbank- Suche - End *****/
/***** Materialdatenbank- Filter - Start *****/
.materialdb-header {
display: block;
margin: 0 0 40px;
font-size: 20px;
}
.materialdb-header .hits {
font-size: 28px;
}
.materialdb-header .filter-tab {
position: relative;
padding: 8px 12px 12px 10px;
}
.materialdb-header .filter-tab::before {
width: 28px;
height: 28px;
margin: 4px 10px 0 0;
background-size: 28px auto;
}
.materialdb-header .filter-content {
top: 42px;
padding: 24px 24px 24px;
}
.materialdb-header .filter-content div.select {
margin: -2px 0 32px 0px;
}
.materialdb-header .filter-content .form-group.target-group {
position: relative;
top: auto;
right: auto;
margin: -10px 0 30px;
}
.materialdb-header .filter-content .form-group.target-group div.select {
margin-top: 10px;
}
/***** Materialdatenbank- Filter - End *****/
/***** Materialdatenbank- Liste - Start *****/
.materialdb-list {
margin: 0 0 40px;
}
.materialdb-list .item {
display: block;
margin: 0 0 40px;
}
.materialdb-list .item .item-content {
display: block;
margin: 0;
padding: 24px 24px 24px 24px;
}
.materialdb-list .item .item-content .image {
margin: 0 0 24px;
}
.materialdb-list .item .item-content .image img {
width: 100%;
}
.materialdb-list .item .item-content .text {
font-size: 20px;
}
.materialdb-list .item .item-actions {
padding: 20px 24px 24px 24px;
border-radius: 0 0 0 44px;
}
.materialdb-list .reset-form {
padding: 7px 15px 16px 60px;
}
.materialdb-list .item .badge {
right: 24px;
font-size: 26px;
}
/***** Materialdatenbank- Liste - End *****/
/***** Materialdatenbank- Bestellung Zusammenfassung - Start *****/
.materialdb-orderlist .list {
margin: 0 0 40px 0;
}
.materialdb-orderlist .title {
font-size: 32px;
}
.materialdb-orderlist .list .item .number {
font-size: 20px;
}
/***** Materialdatenbank- Bestellung Zusammenfassung - End *****/
/***** Materialdatenbank- Bestellformular - Start *****/
.materialdb-form .form {
margin: 0 0 40px 0;
padding: 24px 24px 24px;
font-size: 20px;
border-radius: 0 44px 0 0;
}
.materialdb-form .form > .icon {
display: none;
}
.materialdb-form .msg-error {
margin-right: 0;
}
.materialdb-form .form .title .headline {
font-size: 28px;
}
.materialdb-form .form .form-group label {
flex: 0 0 126px;
}
.materialdb-form .form .form-group.space {
display: flex;
}
.materialdb-form .form input[type="submit"] {
font-size: 22px;
}
/***** Materialdatenbank- Bestellformular - End *****/
/***** Powermail / Other Forms - Start *****/
.rm-form {
position: relative;
margin: 0 0 40px 0;
padding: 24px 24px 10px;
font-size: 20px;
border-radius: 0 44px 0 0;
}
.rm-form::before {
display: none;
}
.powermail_fieldwrap {
display: block;
}
fieldset:first-of-type legend {
font-size: 28px;
}
.powermail_field input[type="text"],
.powermail_field input[type="tel"],
.powermail_field input[type="password"],
.powermail_field input[type="email"] {
font-size: 20px;
}
.rm-form input[type="submit"] {
font-size: 22px;
}
.rm-form.confirmation .title {
font-size: 28px;
}
ul.parsley-errors-list {
font-size: 18px;
}
.newsletter-subscription .form > .icon,
.organisation-form .form > .icon{
display: none;
}
.newsletter-subscription .form,
.organisation-form .form{
margin-right: 0;
padding-left: 15px;
padding-right: 15px;
}
/***** Powermail / Other Forms - Start *****/
/***** Suchbox - Start *****/
.content .tx-kesearch-pi1 .searchbox {
display: block;
font-size: 20px;
}
.searchbox .icon {
display: none;
}
.searchbox .inner .form-fields {
padding: 24px 24px 24px;
border-radius: 0 44px 0 0;
}
.searchbox .inner .message {
padding: 24px 24px 24px;
}
.searchbox .headline {
font-size: 28px;
color: rgb(var(--color-secondary));
}
.searchbox .inputs input[type="text"] {
margin: 0 0 10px;
}
.searchbox .inputs input[type="submit"] {
width: auto;
padding: 0 12px 0 48px;
font-size: 22px;
background-size: 30px auto;
}
.searchbox .inner .info-materialdb {
margin: 0 0 0 24px;
padding: 24px 24px 24px;
border-radius: 0 0 0 44px;
}
.search-pagebrowser .result-txt {
font-size: 28px;
}
.search-results .result-list-item {
margin: 0 0 24px;
}
.search-results .result-title {
font-size: 22px;
word-wrap: break-word;
}
/***** Suchbox - End *****/
/***** Page-Browser - Start *****/
.pagebrowser {
margin: 0 0 40px;
}
.pagebrowser ul {
flex-wrap: wrap;
justify-content: center;
}
.pagebrowser .first-page,
.pagebrowser .previous-page,
.pagebrowser .next-page,
.pagebrowser .last-page {
margin-top: 10px;
}
/***** Page-Browser - End *****/
/***** Fehlermeldung - Start *****/
.msg-error {
font-size: 20px;
line-height: 1.25;
}
/***** Fehlermeldung - End *****/
.content .marker-tooltip-organisation .image {
float: none;
width: auto;
margin-left: 0;
}
/***** Kachel-Bereich - Start *****/
.boxes {
padding-top: 4px;
}
.boxes .inner .text-content .headline {
margin: 0 0 38px;
font-size: 26px;
}
/***** Kachel-Bereich - End *****/
/***** Kachel mit Layer - Start *****/
.box .link-arrow-right {
padding: 12px 26px 12px 50px;
font-size: 20px;
border-radius: 0 30px 0 0;
}
.box .link-arrow-right::before {
top: 21px;
left: 17px;
width: 25px;
height: 11px;
background-size: contain;
}
/***** Kachel mit Layer - End *****/
/***** Footer - Start *****/
footer.main .fold-title .text {
padding: 0;
}
footer.main .fold-title .actions .footer-link::before {
top: 6px;
}
footer.main .fold-title .actions .do-open::before {
top: 10px;
}
footer.main .fold-content .headline {
font-size: 32px;
}
footer.main .fold-content .members ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
footer.main .fold-content .members ul li {
margin: 0 12px 22px;
flex: 0 0 auto;
width: calc(25% - 24px);
display: flex;
justify-content: center;
}
footer.main .footer-stage {
display: block;
}
footer.main .footer-stage .social {
margin: 0;
text-align: center;
}
footer.main .footer-stage .social .headline {
display: inline-block;
}
footer.main .footer-stage .social ul {
justify-content: center;
margin: 0 0 30px;
}
footer.main .footer-stage .social ul li + li {
margin: 0 20px 0 16px;
}
footer.main .footer-stage address {
display: block;
text-align: center;
}
footer.main .footer-stage address .address {
margin: 0 0 20px;
}
footer.main .footer-stage address .communication {
margin: 0 0 20px;
}
footer.main .footer-stage nav.footer {
margin: 0;
}
footer.main .footer-stage nav.footer ul {
display: flex;
justify-content: space-evenly;
}
footer.main .footer-stage nav.footer a::before {
top: 8px;
}
footer.main .footer-stage .sponsors {
justify-content: center;
margin: 30px 0 0;
}
footer.main .footer-stage .sponsors .sponsor:nth-of-type(1),
footer.main .footer-stage .sponsors .sponsor:nth-of-type(2) {
align-items: center;
text-align: center;
width: auto;
margin: 0;
}
footer.main .footer-stage .sponsors .sponsor h4 {
max-width: 74%;
}
footer.main .footer-bottom {
flex-direction: column-reverse;
align-items: center;
}
footer.main .footer-bottom p.copyright {
margin: 10px 0 0;
}
/***** Footer - End *****/
}
@media (max-width: 575px) {
/***** Globals - Start *****/
.headline-outer h1 {
padding: 26px 32px 18px 26px;
font-size: 36px;
border-radius: 0 44px 0 0;
}
.outer {
overflow-x: hidden;
}
/***** Globals - End *****/
/***** Content - Start *****/
.ce-gallery[data-ce-columns="2"] .ce-column {
width: auto;
}
.ce-left .ce-gallery,
.ce-column {
float: none;
}
.ce-center .ce-outer {
float: none;
right: auto;
}
.ce-center .ce-inner {
float: none;
right: auto;
}
.ce-column {
margin-right: 0;
}
.ce-intext.ce-left .ce-gallery {
margin-right: 0;
}
.ce-intext.ce-right .ce-gallery {
margin-left: 0;
}
/***** Content - End *****/
/***** Header - Start *****/
header.main .slogan,
header.main.scrolled .slogan {
left: calc(50% - 135px);
bottom: -27px;
padding: 6px 16px 5px;
font-size: 24px;
}
/***** Header - End *****/
/***** Header-Image - Start *****/
.header-image img {
height: 145px;
object-fit: cover;
}
/***** Header-Image - End *****/
/***** Header-Teaser - Start *****/
.header-teaser {
margin: 0 0 40px;
}
.header-teaser .image img {
height: 145px;
object-fit: cover;
}
/***** Header-Teaser - End *****/
/***** Ansprechpartner - Start *****/
.vcard {
display: block;
}
.vcard.person::before {
display: none;
}
.vcard .image {
margin: 0 0 30px;
}
.vcard {
max-width: 266px;
margin: 0 auto 20px;
}
/***** Ansprechpartner - End *****/
/***** Teaser - Start *****/
.image-text-teaser {
margin: 0 0 40px;
padding: 0;
}
.image-text-teaser .image {
margin: 12px 0 12px;
}
.image-text-teaser .image img {
width: 100%;
}
.image-text-teaser .text-box {
min-height: unset;
margin: 0 0 12px;
padding: 24px;
font-size: 24px;
}
.image-text-teaser .text-box .title {
font-size: 14px;
}
.image-text-teaser .text-box .title .headline span {
font-size: 32px;
}
.image-text-teaser .text-box a.link-arrow-right::before {
top: 10px;
width: 28px;
}
.image-text-teaser .text-box a.link-arrow-down::before {
top: 10px;
}
/***** Teaser - End *****/
/***** Publikationen - Start *****/
.publications .item {
display: block;
}
.publications .item .image {
margin: 0 0 24px;
}
/***** Publikationen - End *****/
/***** Blog-Teaser - Start *****/
.blog-article .news .article.rm .image {
margin: 40px 0 20px 40px;
}
.blog-teaser .inner {
position: relative;
}
.blog-teaser .blog-actions {
top: 0;
left: 0;
}
.blog-article .image {
margin: 40px 0 20px 40px;
}
/***** Blog-Teaser - End *****/
/***** Multiteser Material-DB & Newsletter - Start *****/
.multi-teaser {
margin: 0 0 40px;
}
.multi-teaser .title {
font-size: 18px;
}
.multi-teaser .title .headline span {
font-size: 32px;
}
.multi-teaser .text {
font-size: 20px;
}
.multi-teaser .text a.link-arrow-right::before {
top: 8px;
}
.multi-teaser .icon {
height: 88px;
}
.multi-teaser .teaser-left {
margin: 0 0 40px 88px;
padding: 25px 24px 16px;
}
.multi-teaser .teaser-right {
margin-right: 88px;
padding: 25px 24px 16px;
}
.multi-teaser .teaser-left .icon {
width: 88px;
left: -88px;
}
.multi-teaser .teaser-right .icon {
right: -88px;
width: 88px;
}
.multi-teaser .icon.i-1::before {
width: 48px;
height: 58px;
background-size: 48px auto;
}
.multi-teaser .icon.i-2::before {
width: 52px;
height: 52px;
background-size: 52px auto;
}
/***** Multiteser Material-DB & Newsletter - End *****/
/***** Aufklapper - Start *****/
.folder {
margin: 0 0 40px;
}
.folder .fold .fold-title {
font-size: 24px;
}
.folder .fold .fold-content {
padding: 14px 12px 14px;
}
.folder .fold .fold-content p {
font-size: 20px;
}
.folder .fold .fold-content .video.pos-1,
.folder .fold .fold-content .video.pos-2 {
padding-bottom: 56.25%;
}
.folder .fold .fold-content .image.pos-1,
.folder .fold .fold-content .video.pos-1 {
float: none;
width: auto;
margin-left: 0;
}
.folder .fold .fold-content .image.pos-2,
.folder .fold .fold-content .video.pos-2 {
float: none;
width: auto;
margin-right: 0;
}
/***** Aufklapper - End *****/
/***** Material-DB Layer - Start *****/
.materialdb-layer .layer-content .close {
font-size: 20px;
}
.materialdb-layer .layer-content {
display: block;
padding: 108px 24px 30px 24px;
}
.materialdb-layer .layer-content .image {
margin: 0 0 40px;
}
.materialdb-layer .layer-content .title .headline {
font-size: 28px;
}
.materialdb-layer .layer-content .text {
font-size: 20px;
}
.materialdb-layer .layer-content .text dl dt {
float: none;
}
.materialdb-layer .layer-content .text dl dd {
margin: 0 0 12px;
}
.materialdb-layer .layer-content .layer-actions {
margin: 0 0 -80px;
}
/***** Material-DB Layer - End *****/
/***** Footer - Start *****/
footer.main .fold-content .members ul li {
width: calc(33% - 24px);
}
footer.main .footer-stage {
display: block;
}
footer.main .footer-stage .sponsors {
display: block;
}
footer.main .footer-stage .sponsors .sponsor:nth-of-type(1) {
margin-bottom: 30px;
}
footer.main .fold-title .actions .footer-link {
margin: 0 6px 0 0;
}
/***** Footer - End *****/
}
@media (max-width: 320px) {
}
@media (max-width: 1399px) {
/***** Aktuelles-Detailseite - Start *****/
.news-single .article .headline-outer {
margin-left: 0;
}
/***** Aktuelles-Detailseite - End *****/
}
@media (max-width: 1199px) {
/***** Blog-Detailseite - Start *****/
.news-single .article .headline-outer .title {
min-width: unset;
}
/***** Blog-Detailseite - End *****/
}
@media (min-width: 768px) and (max-width: 1199px) {
/***** Globals - Start *****/
body {
font-size: 22px;
}
h1 {
font-size: 40px;
}
.headline-outer h1 {
font-size: 40px;
}
h2 {
font-size: 32px;
}
.headline-outer h2 {
font-size: 18px;
}
.headline-outer h2 span {
font-size: 32px;
}
h3 {
margin: 0 0 10px;
font-size: 28px;
}
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"] {
height: 46px;
padding: 0 12px;
font-size: 22px;
}
select {
height: 46px;
}
.select .selected {
padding-top: 9px;
padding-bottom: 11px;
}
.select .selected::before {
top: 18px;
}
/***** Globals - End *****/
/***** Header - Start *****/
header.main .header-actions .search .search-field .inputs {
max-width: 90%;
margin: 0 auto;
}
/***** Header - End *****/
/***** Content - Start *****/
.ce-intext.ce-left .ce-gallery {
max-width: 50%;
}
.ce-gallery[data-ce-columns="2"] .ce-column {
width: calc(50% - 5px);
}
.frame-custom-100 .headline-outer h2 span {
font-size: 40px;
}
/***** Content - End *****/
/***** Aktuelles-Startseite - Start *****/
.news .article.rm.start .category {
font-size: 36px;
}
.news .article .text p {
line-height: 1.25;
}
/***** Aktuelles-Startseite - End *****/
/***** Teaser - Start *****/
.image-text-teaser .text-box .title {
font-size: 18px;
}
.image-text-teaser .text-box .title .headline span {
font-size: 36px;
}
.image-text-teaser .text-box {
font-size: 26px;
}
/***** Teaser - End *****/
/***** Bild vollflächig - Start *****/
.image-fullwidth .caption {
max-width: 90%;
}
/***** Bild vollflächig - End *****/
/***** Video - Start *****/
.video-wrapper .text {
margin-right: -24px;
}
/***** Video - End *****/
/***** Zitatbox - Start *****/
.quotebox .text {
font-size: 26px;
}
.quotebox .author-name {
font-size: 26px;
}
/***** Zitatbox - End *****/
/***** Themen-Teaser - Start *****/
.theme-teaser .teaser-elements .teaser .cta a {
font-size: 18px;
}
.theme-teaser .teaser-elements .teaser .cta a .link-text span {
font-size: 26px;
}
.theme-teaser .teaser-elements .teaser .cta a::before {
top: 22px;
}
/***** Themen-Teaser - End *****/
/***** Aufklapper - Start *****/
.folder .fold .fold-content p {
font-size: 22px;
}
/***** Aufklapper - End *****/
/***** Publikationen - Start *****/
.publications .bg-color {
height: 302px;
}
.publications .content {
margin: -302px 0 0;
}
.publications .content .title {
font-size: 18px;
}
.publications .content .title span {
font-size: 36px;
}
.publications .item .text {
font-size: 22px;
}
/***** Publikationen - End *****/
/***** Blog-Teaser - Start *****/
.blog-teaser .blog-actions {
left: -12px;
padding: 16px 24px 26px;
border-radius: 0 0 0 44px;
}
.blog-teaser .blog-actions .title .headline span {
font-size: 32px;
}
.blog-teaser .blog-actions .title {
font-size: 18px;
margin: 0 0 10px;
}
/***** Blog-Teaser - End *****/
/***** Spenden-Teaser - Start *****/
.donate-teaser .teaser-content .text {
flex: 0 0 300px;
padding: 24px 24px 24px;
font-size: 22px;
}
.donate-teaser .teaser-content .text .title {
margin: 0 0 10px;
font-size: 18px;
}
.donate-teaser .teaser-content .text .title .headline span {
font-size: 36px;
}
/***** Spenden-Teaser - End *****/
/***** Ansprechpartner - Start *****/
.vcard.person {
margin: 0 150px 0 0;
}
/***** Ansprechpartner - End *****/
/***** Multiteser Material-DB & Newsletter - Start *****/
.multi-teaser .teaser-left {
margin: 0 -7px 0 98px;
padding: 24px 24px 16px;
border-radius: 0 0 0 44px;
}
.multi-teaser .teaser-right {
margin: 0 100px 0 -7px;
padding: 24px 24px 16px;
border-radius: 0 44px 0 0;
}
.multi-teaser .icon {
height: 98px;
}
.multi-teaser .teaser-left .icon {
top: 30px;
left: -98px;
width: 98px;
}
.multi-teaser .teaser-right .icon {
right: -110px;
width: 110px;
}
.multi-teaser .icon.i-1::before {
width: 44px;
height: 54px;
background-size: 44px auto;
}
.multi-teaser .icon.i-2::before {
width: 56px;
height: 56px;
background-size: 56px auto;
}
.multi-teaser .title {
font-size: 14px;
}
.multi-teaser .title .headline span {
font-size: 32px;
}
.multi-teaser .text {
font-size: 22px;
line-height: 1.25;
}
/***** Multiteser Material-DB & Newsletter - End *****/
/***** About - Start *****/
.about .title {
margin: 0 0 16px;
font-size: 18px;
}
.about .title .headline span {
font-size: 36px;
}
.about .text {
font-size: 26px;
}
/***** About - End *****/
/***** Header-Teaser - Start *****/
.header-teaser .teasers {
bottom: -108px;
}
.header-teaser .redbox {
padding: 24px 24px 24px;
border-radius: 0 0 0 44px;
}
.header-teaser .redbox .title {
margin: 0 0 10px;
padding: 0 60px 0 0;
font-size: 32px;
line-height: 1.1;
}
.header-teaser .redbox .text {
font-size: 22px;
line-height: 1.25;
}
.header-teaser .redbox .icon.i-2::before {
width: 47px;
height: 54px;
}
.header-teaser .whitebox {
padding: 24px 24px;
border-radius: 0 44px 0 0;
}
.header-teaser .whitebox .text {
font-size: 22px;
}
.header-teaser .whitebox .text p {
margin: 0 0 10px;
}
/***** Header-Teaser - End *****/
/***** Materialdatenbank- Filter - Start *****/
.materialdb-header .filter-content .form-group.target-group {
position: relative;
top: auto;
right: auto;
margin: -10px 0 30px;
}
/***** Materialdatenbank- Filter - End *****/
}
@media (min-width: 768px) and (max-width: 991px) {
/***** Content - Start *****/
.frame-space-after-medium {
margin-bottom: 40px;
}
/***** Content - End *****/
/***** Publikationen - Start *****/
.publications .item .image {
flex: 0 0 112px;
}
/***** Publikationen - End *****/
/***** Ansprechpartner - Start *****/
.vcard.person .title .headline span {
font-size: 32px;
}
.vcard .details {
font-size: 20px;
}
/***** Ansprechpartner - End *****/
/***** Teaser - Start *****/
.image-text-teaser {
margin: 0 0 164px;
}
/***** Teaser - End *****/
/***** Materialdatenbank- Suche - Start *****/
.materialdb-search .inner {
flex: 0 0 calc(100% - 80px);
padding: 42px 45px 55px;
border-radius: 0 56px 0 0;
}
.materialdb-search .icon {
height: 88px;
margin: 0 0 38px;
flex: 0 0 80px;
}
.materialdb-search .icon::before {
width: 44px;
height: 44px;
background-size: contain;
}
/***** Materialdatenbank- Suche - End *****/
/***** Materialdatenbank- Filter - Start *****/
.materialdb-header {
font-size: 22px;
}
.materialdb-header .hits {
font-size: 28px;
}
/***** Materialdatenbank- Filter - End *****/
/***** Materialdatenbank- Bestellung Zusammenfassung - Start *****/
.materialdb-orderlist .list {
margin: 0 80px 40px 0;
}
/***** Materialdatenbank- Bestellung Zusammenfassung - End *****/
/***** Materialdatenbank- Bestellformular - Start *****/
.materialdb-form .form {
margin: 0 80px 30px 0;
font-size: 22px;
}
.materialdb-form .form > .icon {
right: -80px;
width: 80px;
height: 88px;
}
.materialdb-form .form > .icon::before {
width: 54px;
height: 46px;
margin: 0;
background-size: contain;
}
.materialdb-form .msg-error {
margin-right: 80px;
}
/***** Materialdatenbank- Bestellformular - End *****/
/***** Powermail - Start *****/
.rm-form {
margin-right: 80px;
font-size: 22px;
}
.rm-form::before {
right: -80px;
width: 80px;
height: 88px;
background-position: center calc(50% - 4px);
background-size: 60px auto;
}
/***** Powermail - End *****/
/***** Kachel-Bereich - Start *****/
.boxes {
padding-top: 4px;
}
.boxes .inner .text-content .headline {
margin: 0 0 38px;
font-size: 26px;
}
/***** Kachel-Bereich - End *****/
/***** Kachel mit Layer - Start *****/
.box .link-arrow-right {
padding: 12px 26px 12px 50px;
font-size: 20px;
border-radius: 0 30px 0 0;
}
.box .link-arrow-right::before {
top: 21px;
left: 17px;
width: 25px;
height: 11px;
background-size: contain;
}
/***** Kachel mit Layer - End *****/
/***** Footer - Start *****/
footer.main .footer-stage {
display: block;
text-align: center;
}
footer.main .footer-stage .social {
display: inline-block;
margin: 0 0 20px;
}
footer.main .footer-stage address {
justify-content: center;
margin: 0 0 20px;
text-align: left;
}
footer.main .footer-stage nav.footer {
margin: 0;
}
footer.main .footer-stage nav.footer ul {
display: flex;
justify-content: space-evenly;
}
footer.main .footer-stage .sponsors {
margin: 30px 0 0;
justify-content: center;
}
footer.main .footer-stage .sponsors .sponsor {
align-items: center;
}
/***** Footer - End *****/
}
@media (min-width: 992px) and (max-width: 1199px) {
footer.main .footer-stage {
justify-content: center;
flex-wrap: wrap;
}
footer.main .footer-stage > * {
margin: 0 30px;
}
footer.main .footer-stage .sponsors {
margin-top: 30px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
/***** Video - Start *****/
.video-wrapper .text {
margin-right: -12px;
}
/***** Video - End *****/
/***** Blog-Teaser - Start *****/
.blog-teaser .blog-actions {
left: -12px;
}
/***** Blog-Teaser - End *****/
/***** Footer - Start *****/
footer.main .footer-stage {
font-size: 16px;
}
footer.main .footer-stage .social h3 {
font-size: 30px;
}
footer.main .footer-stage address .address {
margin: 0 20px 0 0;
}
footer.main .footer-stage nav.footer {
margin: 0 10px 0 0;
}
footer.main .footer-stage .sponsors .sponsor:nth-of-type(1) {
margin: 0 10px 0 0;
}
footer.main .footer-bottom {
font-size: 16px;
}
/***** Footer - End *****/
}