diff --git a/kit/category-bestand.php b/kit/category-bestand.php new file mode 100644 index 0000000..26c57d3 --- /dev/null +++ b/kit/category-bestand.php @@ -0,0 +1,153 @@ + + +
+ +
+
+

+ name ); + } ?> +

+ +

+ + Bestände | Personen | Büros | Themen + +

+

+ +

+ + Die Bestände des saai umfassen über 530.000 Pläne, Zeichnungen und Skizzen, 680.000 Fotos, Film- und Tondokumente, 1.100 laufende m Bauakten, 900 Modelle, 50 Möbelstücke und 400 laufende Meter Fachzeitschriften und Bücher. + +

+

+ Das Archivgut besteht zu einem kleinen Teil aus themenbezogenen, in der Hauptsache jedoch aus personenbezogenen Sammlungen, von kleineren Konvoluten bis zu umfangreichen geschlossenen Werkarchiven. Diese geben Auskunft über das Schaffen von rund 250 Architekten, Ingenieuren, Bauhistorikern, Architekturfotografen, Garten- und Innenarchitekten. +

+

+ Die ältesten Dokumente stammen aus der Zeit um 1700, der Schwerpunkt der Sammlung liegt jedoch im 20. Jahrhundert, insbesondere in dessen zweiter Hälfte. +

+

+ +
+ +
+
+
+
+
+
+ +
A
+
+
+
+
+
+
+ +
+

+ post_count); + _e("Showing results from", 'kit') . _e(" " . $post_count_start . " to " . $post_count_end . ". Total results: " . $wp_query->found_posts. ""); + ?> +

+
+ 2, + 'prev_text' => __( '< Previous', 'kit' ), + 'next_text' => __( 'Next >', 'kit' ), + 'type' => 'list', + 'before_page_number' => __('Page ', 'kit') + ) ); ?> +
+
+ +
+ +
+ +
+ + $categories[0]->cat_ID, + 'orderby' => 'title', + 'order' => 'ASC', + ); + $query = new WP_Query( $args ); + + if ( $query->have_posts() ) : + while ( $query->have_posts() ) : + + $query->the_post(); + ?> +
+
+ '; ?> +
+ + + +
+ + '; ?> +

+ +

+ +

+ +

+ '; ?> + Zum Beitrag +
+ +
+
+ + +
+ +
+
+ 2, + 'prev_text' => __( '< Previous', 'kit' ), + 'next_text' => __( 'Next >', 'kit' ), + 'type' => 'list', + 'before_page_number' => __('Page ', 'kit') + ) ); ?> +
+
+ +
+
+ +
+ + + + + + + +
+ +
+
+

+ name ); + } ?> +

+ +
+ + +
+
+ '; ?> +
+ + + +
+ + '; ?> +

+ +

+ +

+ +

+ '; ?> + Zum Beitrag +
+ +
+
+ + +
+ +
+
+ +
+ + + + + + * { + max-width: 450px; + } + .tabs-and-triangle .container-2-cols .column + .column::before { + content: ''; + position: absolute; + top: 0; + right: -100px; + bottom: -1000px; + left: -100px; + background-color: #009982; + } + .tabs-and-triangle .container-2-cols .column + .column::after { + content: ''; + position: absolute; + top: -6.66667rem; + right: -31px; + bottom: calc(100% - 1px); + left: -31px; + background-image: url(../img/triangle-vertical-background-primary.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: 100% 100%; + } + .tabs-and-triangle .text-element { + columns: 2; + } + .tabs-and-triangle::before { + top: unset; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 5.55556rem; + } + .tabs-and-triangle::after { + display: none; + } +} + +@media (max-width: 960px) and (max-width: 560px) { + .tabs-and-triangle { + padding-top: 60px; + padding-bottom: 60px; + } + .tabs-and-triangle .container-2-cols .column + .column { + margin-top: 90px; + } + .tabs-and-triangle .container-2-cols .column + .column::after { + top: -5rem; + } + .tabs-and-triangle .text-element { + columns: unset; + } +} + +@media (max-width: 960px) { + body.page-theme-color-primary .tabs-and-triangle::after { + background-image: url(../img/triangle-vertical-background-primary.svg); + } + body.page-theme-color-primary .tabs-and-triangle .container-2-cols .column + .column::before { + background-color: #009982; + } + body.page-theme-color-primary .tabs-and-triangle .container-2-cols .column + .column::after { + background-image: url(../img/triangle-vertical-background-primary.svg); + } + body.page-theme-color-secondary .tabs-and-triangle::after { + background-image: url(../img/triangle-vertical-background-secondary.svg); + } + body.page-theme-color-secondary .tabs-and-triangle .container-2-cols .column + .column::before { + background-color: #00a4e4; + } + body.page-theme-color-secondary .tabs-and-triangle .container-2-cols .column + .column::after { + background-image: url(../img/triangle-vertical-background-secondary.svg); + } + body.page-theme-color-tertiary .tabs-and-triangle::after { + background-image: url(../img/triangle-vertical-background-tertiary.svg); + } + body.page-theme-color-tertiary .tabs-and-triangle .container-2-cols .column + .column::before { + background-color: #df9b1b; + } + body.page-theme-color-tertiary .tabs-and-triangle .container-2-cols .column + .column::after { + background-image: url(../img/triangle-vertical-background-tertiary.svg); + } + body.page-theme-color-quaternary .tabs-and-triangle::after { + background-image: url(../img/triangle-vertical-background-quaternary.svg); + } + body.page-theme-color-quaternary .tabs-and-triangle .container-2-cols .column + .column::before { + background-color: #a3107c; + } + body.page-theme-color-quaternary .tabs-and-triangle .container-2-cols .column + .column::after { + background-image: url(../img/triangle-vertical-background-quaternary.svg); + } +} + +.story-teaser { + position: relative; + min-height: 25rem; + max-height: 41.66667rem; + padding-top: 6.66667rem; + padding-bottom: 6.66667rem; + overflow: hidden; +} + +.story-teaser .content-wrap { + z-index: 2; +} + +.story-teaser .content-wrap * { + z-index: 2; +} + +.story-teaser .button { + display: inline-block; + margin-top: 3.33333rem; +} + +.story-teaser-background-image { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 37.5vw; + z-index: 1; + overflow: hidden; +} + +.story-teaser-background-image img { + object-fit: cover; + object-position: center center; + width: 100%; + max-width: none; + height: 100%; +} + +.story-teaser-background-image::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: -37.5vw; + background-image: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 45%, rgba(229, 229, 229, 0.97) 47%, rgba(229, 229, 229, 0.89) 50%, rgba(229, 229, 229, 0) 75%, rgba(229, 229, 229, 0) 100%); +} + +.story-teaser-dark { + color: #ffffff; + background-color: #333333; +} + +.story-teaser-dark .story-teaser-background-image::after { + transform: translateZ(0); + background-image: linear-gradient(to right, #333333 0%, #333333 45%, rgba(51, 51, 51, 0.97) 47%, rgba(51, 51, 51, 0.89) 50%, rgba(51, 51, 51, 0) 75%, rgba(51, 51, 51, 0) 100%); +} + +@media (max-width: 1024px) { + .story-teaser { + padding-top: 5rem; + padding-bottom: 5rem; + } +} + +@media (max-width: 680px) { + .story-teaser { + max-height: none; + padding-top: 0; + } + .story-teaser-background-image { + position: static; + height: 75vw; + margin-bottom: 5rem; + } + .story-teaser-background-image::after { + display: none; + } +} + +@media (max-width: 560px) { + .story-teaser { + padding-bottom: 3.33333rem; + } +} + +.locations-map { + position: relative; + padding: 5rem 0; + overflow: hidden; + color: #ffffff; + background-color: #009982; +} + +.locations-map .content-wrap { + z-index: 2; + overflow: hidden; +} + +.locations-map .content-wrap * { + z-index: 2; +} + +.locations-map .container-2-cols .column { + padding-right: 0.83333rem; +} + +.locations-map .map-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 50%; +} + +.locations-map .wannabe-map-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 50%; +} + +.locations-map .wannabe-map-container img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center center; +} + +.locations-map h2::after { + background-color: #ffffff !important; +} + +.locations-map .button { + align-self: flex-start; + width: 100%; + padding: 1.11111rem 1.11111rem; +} + +.location-address-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + justify-content: flex-start; +} + +.location-address-container .location-address { + display: flex; + width: calc(50% - 0.83333rem); + margin-top: 1.66667rem; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-start; + overflow-wrap: break-word; + overflow-wrap: anywhere; +} + +.location-address-container .location-address:nth-of-type(1), .location-address-container .location-address:nth-of-type(2) { + margin-top: 0; +} + +.location-address-container .location-address:nth-of-type(2n) { + margin-left: 1.66667rem; +} + +.location-address-container .location-address h3 { + margin-bottom: 1.66667rem; +} + +.location-address-container .location-address .phone, +.location-address-container .location-address .email { + display: block; + margin-top: 0; +} + +.location-address-container .location-address .phone a, +.location-address-container .location-address .email a { + color: #ffffff; + text-decoration: none; + transition: color .3s; +} + +.location-address-container .location-address .phone a:hover, +.location-address-container .location-address .email a:hover { + color: rgba(255, 255, 255, 0.8); +} + +.location-address-container .location-address .mobile-map-link { + position: relative; + display: block; + margin-top: 0.83333rem; + margin-left: 1.33333rem; + color: #ffffff; +} + +.location-address-container .location-address .mobile-map-link::before { + content: ''; + position: absolute; + top: 0.27778rem; + left: -1.33333rem; + width: 1rem; + height: 1rem; + background-image: url(../img/map-marker-white.svg); + background-repeat: no-repeat; + background-position: left center; + background-size: contain; +} + +.location-address-container .location-address .mobile-map-link:hover { + text-decoration: underline; +} + +body.page-theme-color-primary .locations-map { + background-color: #009982; +} + +body.page-theme-color-secondary .locations-map { + background-color: #00a4e4; +} + +body.page-theme-color-tertiary .locations-map { + background-color: #df9b1b; +} + +body.page-theme-color-quaternary .locations-map { + background-color: #a3107c; +} + +@media (max-width: 960px) { + .locations-map .container-2-cols .column { + width: 100%; + } + .locations-map .map-container { + position: relative; + display: none; + width: 100%; + height: 45vw; + margin-top: 5rem; + } + .locations-map .wannabe-map-container { + display: none; + } + .locations-map .button { + width: auto; + padding: 1.11111rem 2.22222rem; + } + .locations-map::before { + display: none; + } + .location-address-container .location-address { + width: calc(33.33333% - 1.11667rem); + } + .location-address-container .location-address:nth-of-type(2n) { + margin-left: 0; + } + .location-address-container .location-address + .location-address { + margin-left: 1.66667rem; + } + .location-address-container .location-address:nth-of-type(3n + 1) { + margin-left: 0; + } + .location-address-container .location-address:nth-of-type(3) { + margin-top: 0; + } + .column > .text-element { + max-width: 600px; + } +} + +@media (max-width: 768px) { + .locations-map .location-address { + display: flex; + width: calc(50% - 0.83333rem); + margin-top: 1.66667rem; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-start; + overflow-wrap: break-word; + overflow-wrap: anywhere; + } + .locations-map .location-address + .location-address { + margin-left: 0; + } + .locations-map .location-address:nth-of-type(2n) { + margin-left: 1.66667rem; + } + .locations-map .location-address:nth-of-type(3) { + margin-top: 1.66667rem; + } +} + +@media (max-width: 560px) { + .locations-map { + padding: 3.33333rem 0; + } + .location-address-container .location-address { + width: 100%; + border-bottom: 1px solid rgba(255, 255, 255, 0.5); + } + .location-address-container .location-address + .location-address { + margin-top: 0; + } + .location-address-container .location-address:nth-of-type(1) { + border-top: 1px solid rgba(255, 255, 255, 0.5); + } + .location-address-container .location-address:nth-of-type(2n) { + margin-left: 0; + } + .location-address-container .location-address.opened .location-address-head-icon::after { + height: 0; + } + .location-address-container .location-address-head { + position: relative; + display: block; + padding-left: 2.5rem; + cursor: pointer; + transition: background-color .3s; + } + .location-address-container .location-address-head-icon { + position: absolute; + top: 12px; + left: 0; + width: 20px; + height: 20px; + line-height: 1; + } + .location-address-container .location-address-head-icon::before, .location-address-container .location-address-head-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #eeeeee; + transition: height .3s; + } + .location-address-container .location-address-head-icon::before { + width: 20px; + height: 4px; + } + .location-address-container .location-address-head-icon::after { + width: 4px; + height: 20px; + } + .location-address-container .location-address-head h3 { + padding: 0.83333rem 0; + margin-bottom: 0; + line-height: 1; + } + .location-address-container .location-address-body { + padding: 1.66667rem 0 1.66667rem; + } +} + +.colored-box { + padding: 2rem 1.66667rem; + color: #ffffff; +} + +.colored-box h3 { + margin-bottom: 1.55556rem; +} + +.colored-box * { + color: #ffffff; +} + +.colored-box + .colored-box { + margin-top: 0.33333rem; +} + +.colored-box-color-brand-primary { + background-color: #009982 !important; +} + +.colored-box-color-brand-secondary { + background-color: #00a4e4 !important; +} + +.colored-box-color-brand-tertiary { + background-color: #df9b1b !important; +} + +.colored-box-color-brand-quaternary { + background-color: #a3107c !important; +} + +body.page-theme-color-primary .colored-box { + background-color: #009982; +} + +body.page-theme-color-secondary .colored-box { + background-color: #00a4e4; +} + +body.page-theme-color-tertiary .colored-box { + background-color: #df9b1b; +} + +body.page-theme-color-quaternary .colored-box { + background-color: #a3107c; +} + +.link-list li a { + position: relative; + display: block; + padding: 0.55556rem 1.66667rem 0.55556rem 0; + border-bottom: 1px solid #ffffff; + transition: color .3s; +} + +.link-list li a:hover { + color: rgba(255, 255, 255, 0.6); +} + +.link-list li a:hover::after { + transform: translateX(-3px); + opacity: .6; +} + +.link-list li a::after { + content: url(../img/arrow-right-white.svg); + position: absolute; + top: 0.55556rem; + right: 0; + display: block; + width: 1.11111rem; + height: 0.77778rem; + transition: transform .3s, opacity .3s; +} + +.link-list li:nth-of-type(1) a { + border-top: 1px solid #ffffff; +} + +@media (max-width: 680px) { + .link-list li a { + padding: 0.83333rem 1.66667rem 0.83333rem 0; + } + .link-list li a::after { + top: 0.83333rem; + } +} + +.contact-person span { + font-weight: 500; +} + +.contact-person .phone, +.contact-person .email { + position: relative; + margin-top: 0.88889rem; + margin-left: 2.22222rem; + font-size: 1.22222rem; + font-weight: 500; + line-height: 1.22222rem; +} + +.contact-person .phone a, +.contact-person .email a { + text-decoration: none; + transition: color .3s; +} + +.contact-person .phone a:hover, +.contact-person .email a:hover { + color: rgba(255, 255, 255, 0.6); +} + +.contact-person .phone::before, +.contact-person .email::before { + content: ''; + position: absolute; + left: -2.22222rem; + display: block; + width: 1.33333rem; + height: 1.33333rem; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +.contact-person .phone::before { + top: -0.11111rem; + background-image: url(../img/phone-loud-white.svg); +} + +.contact-person .email::before { + top: -0.05556rem; + background-image: url(../img/mail-white.svg); +} + +form { + width: 100%; +} + +form h3 { + display: none; +} + +form .powermail_fieldset { + display: flex; + width: 100%; + height: 100%; + padding: 0; + border: none; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-start; + font-weight: 300; +} + +form .powermail_fieldset > div:not(:nth-of-type(1)) { + margin-top: 15px; +} + +form .powermail_fieldset legend { + display: none; +} + +form label { + display: none; +} + +form input, +form textarea, +form button, +form select { + display: block; + width: 100%; + min-height: 1.66667rem; + padding: 0.83333rem 1.16667rem; + border: none; + color: #333333; + background-color: #eeeeee; + outline: none; + appearance: none; +} + +form textarea { + resize: none; +} + +form input[type='submit'] { + align-self: flex-start; + display: inline-block; + width: auto; + padding-right: 4.16667rem; + padding-left: 4.16667rem; + margin-top: 0.83333rem; + color: #ffffff; + font-weight: 500; + transition: background-color .5s; +} + +form input[type='submit']:hover { + background-color: #333333 !important; +} + +form .powermail_select-wrapper { + position: relative; +} + +form .powermail_select-wrapper::after { + content: ''; + position: absolute; + top: 50%; + right: 0.83333rem; + display: block; + width: 0.83333rem; + height: 0.83333rem; + transform: translateY(-50%); + background-image: url(../img/arrow-down-grey.svg); + pointer-events: none; +} + +form .powermail_fieldwrap_type_check .powermail_field label, +form .powermail_fieldwrap_type_radio .powermail_field label { + display: block; +} + +form .powermail_fieldwrap_type_check .powermail_field label input, +form .powermail_fieldwrap_type_radio .powermail_field label input { + display: none; +} + +form .powermail_fieldwrap_type_check .powermail_field label span, +form .powermail_fieldwrap_type_radio .powermail_field label span { + position: relative; + display: block; + margin-left: 1.44444rem; + font-size: 15px; + line-height: 21px; + cursor: pointer; +} + +form .powermail_fieldwrap_type_check .powermail_field label span a, +form .powermail_fieldwrap_type_radio .powermail_field label span a { + text-decoration: underline; +} + +form .powermail_fieldwrap_type_check .powermail_field label span a:hover, +form .powermail_fieldwrap_type_radio .powermail_field label span a:hover { + text-decoration: none; +} + +form .powermail_fieldwrap_type_check .powermail_field label input[type='checkbox'] + span::before, +form .powermail_fieldwrap_type_radio .powermail_field label input[type='checkbox'] + span::before { + content: ''; + position: absolute; + top: 2px; + left: -1.44444rem; + box-sizing: border-box; + width: 0.83333rem; + height: 0.83333rem; + border: 1px solid #333333; + background-color: #ffffff; + background-repeat: no-repeat; + background-position: center center; + background-size: 0.61111rem 0.61111rem; + cursor: pointer; +} + +form .powermail_fieldwrap_type_check .powermail_field label input[type='checkbox']:hover + span::before, +form .powermail_fieldwrap_type_radio .powermail_field label input[type='checkbox']:hover + span::before { + background-image: url(../img/checkmark-hover.svg); +} + +form .powermail_fieldwrap_type_check .powermail_field label input[type='checkbox']:checked + span::before, +form .powermail_fieldwrap_type_radio .powermail_field label input[type='checkbox']:checked + span::before { + background-image: url(../img/checkmark-checked.svg); +} + +form .powermail_fieldwrap_type_check .powermail_field label input[type='radio'] + span::before, +form .powermail_fieldwrap_type_radio .powermail_field label input[type='radio'] + span::before { + content: ''; + position: absolute; + top: 2px; + left: -1.44444rem; + box-sizing: border-box; + width: 0.83333rem; + height: 0.83333rem; + border: 1px solid #333333; + background-color: #ffffff; + background-repeat: no-repeat; + background-position: center center; + background-size: 0.5rem 0.5rem; + border-radius: 50%; + cursor: pointer; +} + +form .powermail_fieldwrap_type_check .powermail_field label input[type='radio']:hover + span::before, +form .powermail_fieldwrap_type_radio .powermail_field label input[type='radio']:hover + span::before { + background-image: url(../img/cross-hover.svg); +} + +form .powermail_fieldwrap_type_check .powermail_field label input[type='radio']:checked + span::before, +form .powermail_fieldwrap_type_radio .powermail_field label input[type='radio']:checked + span::before { + background-image: url(../img/cross-checked.svg); +} + +form .powermail_fieldwrap_type_text > .powermail_field { + margin: 0.83333rem 0 0.33333rem; + font-size: 25px; + font-weight: 500; + line-height: 35px; +} + +form ::placeholder { + color: #404040; + font-weight: 300; + opacity: 1; +} + +.container-eq-height .frame { + height: 100%; +} + +.container-eq-height .tx-powermail { + height: 100%; +} + +.container-eq-height .tx-powermail .container-fluid { + height: 100%; +} + +.container-eq-height form { + height: 100%; +} + +.container-eq-height form .powermail_fieldset { + height: 100%; +} + +.container-eq-height form .powermail_fieldwrap.powermail_fieldwrap_type_textarea { + flex-grow: 1; +} + +.container-eq-height form .powermail_fieldwrap.powermail_fieldwrap_type_textarea .powermail_field { + height: 100%; +} + +.container-eq-height form .powermail_fieldwrap.powermail_fieldwrap_type_textarea .powermail_field textarea { + height: 100%; +} + +table.table { + overflow-wrap: normal; +} + +table.table td { + padding-right: 10px; +} + +.powermail_message_error { + color: #8b0000; + font-size: 1.5rem; + font-weight: 700; + line-height: 2.5rem; +} + +body.page-theme-color-primary form input[type='submit'] { + background-color: #009982; +} + +body.page-theme-color-secondary form input[type='submit'] { + background-color: #00a4e4; +} + +body.page-theme-color-tertiary form input[type='submit'] { + background-color: #df9b1b; +} + +body.page-theme-color-quaternary form input[type='submit'] { + background-color: #a3107c; +} + +@media (max-width: 680px) { + form textarea { + min-height: 8.33333rem; + } +} + +.teaser-box { + position: relative; + height: 100%; + padding-bottom: 3.61111rem; + font-size: 0.94444rem; + line-height: 1.33333rem; + overflow-wrap: break-word; + overflow-wrap: anywhere; +} + +.teaser-box-image { + position: relative; + width: 100%; + height: 0; + padding-top: 65.25%; + overflow: hidden; + background-color: #e5e5e5; +} + +.teaser-box-image img { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + max-width: none; + height: 100%; + object-fit: cover; + object-position: center center; + backface-visibility: hidden; + transition: transform .7s; +} + +.teaser-box-image:hover img { + transform: scale(1.1); +} + +.teaser-box h3 { + margin-top: 1.33333rem; + font-size: 1.22222rem; + line-height: 1.44444rem; +} + +.teaser-box p { + margin-top: 1.33333rem; +} + +.teaser-box-category-marker { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + padding-bottom: 0.55556rem; + border-bottom-width: 0.16667rem; + border-bottom-style: solid; + border-bottom-color: #009982; + color: #009982; + font-weight: 700; + transition: border-bottom-color .3s, color .3s; +} + +.teaser-box-category-marker:hover { + border-bottom-color: rgba(0, 153, 130, 0.7); + color: rgba(0, 153, 130, 0.7); +} + +.teaser-box-category-marker:hover::after { + transform: translateX(-3px); + opacity: .7; +} + +.teaser-box-category-marker .icon { + mask: url('img/teaser-box-arrow-brand-secondary.svg') no-repeat center / contain; + position: absolute; + right: 0; + bottom: 0.55556rem; + display: block; + width: 1.77778rem; + height: 1.27778rem; + transition: transform .3s, opacity .3s; +} + +.teaser-box-color-brand-primary .teaser-box-category-marker { + border-bottom-color: #009982 !important; + color: #009982 !important; +} + +.teaser-box-color-brand-primary .teaser-box-category-marker:hover { + border-bottom-color: rgba(0, 153, 130, 0.7) !important; + color: rgba(0, 153, 130, 0.7) !important; +} + +.teaser-box-color-brand-primary .teaser-box-category-marker::after { + content: url(img/teaser-box-arrow-brand-primary.svg) !important; +} + +.teaser-box-color-brand-secondary .teaser-box-category-marker::after { + mask: url('img/teaser-box-arrow-brand-secondary.svg') no-repeat center / contain; +} + +.teaser-box-color-brand-tertiary .teaser-box-category-marker { + border-bottom-color: #df9b1b !important; + color: #df9b1b !important; +} + +.teaser-box-color-brand-tertiary .teaser-box-category-marker:hover { + border-bottom-color: rgba(223, 155, 27, 0.7) !important; + color: rgba(223, 155, 27, 0.7) !important; +} + +.teaser-box-color-brand-tertiary .teaser-box-category-marker::after { + content: url(../img/teaser-box-arrow-brand-tertiary.svg) !important; + +} + +.teaser-box-color-brand-quaternary .teaser-box-category-marker { + border-bottom-color: #a3107c !important; + color: #a3107c !important; +} + +.teaser-box-color-brand-quaternary .teaser-box-category-marker:hover { + border-bottom-color: rgba(163, 16, 124, 0.7) !important; + color: rgba(163, 16, 124, 0.7) !important; +} + +.teaser-box-color-brand-quaternary .teaser-box-category-marker::after { + content: url(../img/teaser-box-arrow-brand-quaternary.svg) !important; +} + +body.page-theme-color-primary .teaser-box-image { + background-color: #e5e5e5; +} + +body.page-theme-color-primary .teaser-box-category-marker { + border-bottom-color: #009982; + color: #009982; +} + +body.page-theme-color-primary .teaser-box-category-marker:hover { + border-bottom-color: rgba(0, 153, 130, 0.7); + color: rgba(0, 153, 130, 0.7); +} + +body.page-theme-color-primary .teaser-box-category-marker::after { + content: url(img/teaser-box-arrow-brand-primary.svg); +} + +body.page-theme-color-secondary .teaser-box-image { + background-color: #e5e5e5; +} + +body.page-theme-color-secondary .teaser-box-category-marker { + border-bottom-color: #00a4e4; + color: #00a4e4; +} + +body.page-theme-color-secondary .teaser-box-category-marker:hover { + border-bottom-color: rgba(0, 164, 228, 0.7); + color: rgba(0, 164, 228, 0.7); +} + +body.page-theme-color-secondary .teaser-box-category-marker::after { + content: url(img/teaser-box-arrow-brand-secondary.svg); +} + +body.page-theme-color-tertiary .teaser-box-image { + background-color: #e5e5e5; +} + +body.page-theme-color-tertiary .teaser-box-category-marker { + border-bottom-color: #df9b1b; + color: #df9b1b; +} + +body.page-theme-color-tertiary .teaser-box-category-marker:hover { + border-bottom-color: rgba(223, 155, 27, 0.7); + color: rgba(223, 155, 27, 0.7); +} + +body.page-theme-color-tertiary .teaser-box-category-marker::after { + content: url(../img/teaser-box-arrow-brand-tertiary.svg); +} + +body.page-theme-color-quaternary .teaser-box-image { + background-color: #e5e5e5; +} + +body.page-theme-color-quaternary .teaser-box-category-marker { + border-bottom-color: #a3107c; + color: #a3107c; +} + +body.page-theme-color-quaternary .teaser-box-category-marker:hover { + border-bottom-color: rgba(163, 16, 124, 0.7); + color: rgba(163, 16, 124, 0.7); +} + +body.page-theme-color-quaternary .teaser-box-category-marker::after { + content: url(../img/teaser-box-arrow-brand-quaternary.svg); +} + +.picturebook { + width: 100%; + height: 340px; + overflow: hidden; +} + +.picturebook .swiper-slide { + overflow: hidden; +} + +.picturebook .swiper-slide img { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + max-width: none; + height: 100%; + object-fit: cover; + object-position: center center; +} + +.picturebook .swiper-button-prev { + left: 0; +} + +.picturebook .swiper-button-prev::before { + background-image: url(../img/picturebook-swiper-button-prev-arrow.svg); +} + +.picturebook .swiper-button-next { + right: 0; +} + +.picturebook .swiper-button-next::before { + background-image: url(../img/picturebook-swiper-button-next-arrow.svg); +} + +.picturebook .swiper-button-prev, +.picturebook .swiper-button-next { + width: 2.66667rem; + height: 2.66667rem; + background-color: rgba(0, 0, 0, 0.6); + background-image: none; + outline: none; + transition: background-color .3s; +} + +.picturebook .swiper-button-prev:hover, +.picturebook .swiper-button-next:hover { + background-color: rgba(0, 0, 0, 0.85); +} + +.picturebook .swiper-button-prev::before, +.picturebook .swiper-button-next::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0.88889rem; + height: 0.88889rem; + transform: translate(-50%, -50%); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +.picturebook .swiper-button-disabled { + visibility: hidden; +} + +@media (max-width: 1280px) { + .picturebook { + height: 30vw; + } +} + +@media (max-width: 680px) { + .picturebook { + height: 45vw; + } +} + +.pro-contra { + display: flex; +} + +.pro-contra ul { + width: calc(50% - 0.83333rem); + overflow-wrap: break-word; + overflow-wrap: anywhere; +} + +.pro-contra ul + ul { + margin-left: 1.66667rem; +} + +.pro-contra ul li { + position: relative; + padding: 1.66667rem 1.55556rem 1.55556rem 4.33333rem; + font-size: 1.22222rem; + font-weight: 500; + line-height: 1.22222rem; +} + +.pro-contra ul li + li { + margin-top: 0.22222rem; +} + +.pro-contra ul li.pro { + color: #ffffff; + background-color: #009982; +} + +.pro-contra ul li.pro::before { + content: url(../img/smiley-happy.svg); + position: absolute; + top: 50%; + left: 18px; + display: block; + width: 2.22222rem; + height: 2.22222rem; + transform: translateY(-50%); +} + +.pro-contra ul li.contra { + background-color: #e5e5e5; +} + +.pro-contra ul li.contra::before { + content: url(../img/smiley-sad.svg); + position: absolute; + top: 50%; + left: 18px; + display: block; + width: 2.22222rem; + height: 2.22222rem; + transform: translateY(-50%); +} + +body.page-theme-color-primary .pro-contra ul li.pro { + background-color: #009982; +} + +body.page-theme-color-primary .pro-contra ul li.contra { + background-color: #e5e5e5; +} + +body.page-theme-color-secondary .pro-contra ul li.pro { + background-color: #00a4e4; +} + +body.page-theme-color-secondary .pro-contra ul li.contra { + background-color: #e5e5e5; +} + +body.page-theme-color-tertiary .pro-contra ul li.pro { + background-color: #df9b1b; +} + +body.page-theme-color-tertiary .pro-contra ul li.contra { + background-color: #e5e5e5; +} + +body.page-theme-color-quaternary .pro-contra ul li.pro { + background-color: #a3107c; +} + +body.page-theme-color-quaternary .pro-contra ul li.contra { + background-color: #e5e5e5; +} + +@media (max-width: 960px) { + .pro-contra ul li { + font-size: 1rem; + line-height: 1rem; + } +} + +@media (max-width: 560px) { + .pro-contra { + flex-wrap: wrap; + } + .pro-contra ul { + width: 100%; + } + .pro-contra ul + ul { + margin-top: 0.83333rem; + margin-left: 0; + } +} + +.overview-icon { + text-align: center; +} + +.overview-icon img { + width: auto; + max-width: 100%; + height: 6.11111rem; +} + +.overview-icon p { + margin-top: 2.22222rem; + font-size: 1.38889rem; + font-weight: 700; + line-height: 1.94444rem; +} + +@media (max-width: 1280px) { + .overview-icon p { + margin-top: 1.66667rem; + } +} + +@media (max-width: 768px) { + .overview-icon p { + margin-top: 0.83333rem; + } +} + +.icon-headline-text li { + position: relative; + margin-left: 2.77778rem; + overflow-wrap: break-word; + overflow-wrap: anywhere; + transition: opacity .5s, transform .5s; +} + +.icon-headline-text li + li { + margin-top: 1.66667rem; +} + +.icon-headline-text li::before { + content: ''; + position: absolute; + top: 0; + left: -2.77778rem; + display: block; + width: 1.66667rem; + height: 1.66667rem; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +.icon-headline-text li.waypoint { + transform: translateX(-25px); + opacity: 0; +} + +.icon-headline-text li.waypoint-triggered { + transform: none; + opacity: 1; +} + +.icon-headline-text li.star::before { + background-image: url(../img/star-primary.svg); +} + +.icon-headline-text li h3 { + font-size: 1.33333rem; + line-height: 1.66667rem; +} + +.icon-headline-text li h3 + p { + margin-top: 0.55556rem; +} + +body.page-theme-color-primary .icon-headline-text li.star::before { + background-image: url(../img/star-primary.svg); +} + +body.page-theme-color-secondary .icon-headline-text li.star::before { + background-image: url(../img/star-secondary.svg); +} + +body.page-theme-color-tertiary .icon-headline-text li.star::before { + background-image: url(../img/star-tertiary.svg); +} + +body.page-theme-color-quaternary .icon-headline-text li.star::before { + background-image: url(../img/star-quaternary.svg); +} + +@media (max-width: 680px) { + .container-2-cols .column + .column .icon-headline-text { + margin-top: 0; + } +} + +.tab-navigation { + position: relative; + margin-bottom: 2.5rem; + overflow-wrap: break-word; + overflow-wrap: anywhere; +} + +.tab-navigation-mobile-head { + position: relative; + display: none; + cursor: pointer; +} + +.tab-navigation-mobile-head span { + position: relative; + display: inline-block; + padding-right: 35px; +} + +.tab-navigation-mobile-head span::after { + content: url(../img/arrow-down-primary.svg); + position: absolute; + top: 8px; + right: 0; + display: inline-block; + width: 20px; + transform-origin: center; + line-height: 1; + transition: transform .4s; +} + +.tab-navigation-mobile-head.active span::after { + transform: rotate(180deg); +} + +.tab-navigation-items { + display: flex; + margin-bottom: 1.66667rem; + border-bottom: 0.44444rem solid #ffffff; +} + +.tab-navigation-item { + position: relative; + padding-bottom: 0.55556rem; +} + +.tab-navigation-item:not(:nth-of-type(1)) { + margin-left: 2.5rem; +} + +.tab-navigation-item > div { + position: relative; + display: flex; + height: 100%; + cursor: pointer; + user-select: none; +} + +.tab-navigation-item > div span { + position: relative; + display: flex; + width: 100%; + flex-direction: column; + justify-content: center; + color: #999999; + font-size: 1.22222rem; + font-weight: 500; + line-height: 1.55556rem; + transition: color .2s; +} + +.tab-navigation-item > div::after { + content: ''; + position: absolute; + bottom: -1rem; + left: 0; + width: 100%; + height: 0.44444rem; + background-color: transparent; + transition: background-color .2s; +} + +.tab-navigation-item > div:hover span { + color: #666666; +} + +.tab-navigation-item.active > div span { + color: #009982; +} + +.tab-navigation-item.active > div::after { + background-color: #009982; +} + +.tabs-variable-height .tab-navigation-items { + margin-bottom: 2.5rem; +} + +.tab-content-wrapper { + display: none; +} + +.tab-content-wrapper:first-of-type { + display: block; +} + +.tab-content-wrapper > * + * { + margin-top: 1.66667rem; +} + +.tabs-auto-height .tab-content-container { + display: grid; +} + +.tabs-auto-height .tab-content-wrapper { + grid-column: 1; + grid-row: 1; + display: block; +} + +body.page-theme-color-primary .tab-navigation-mobile-head span::after { + content: url(../img/arrow-down-primary.svg); +} + +body.page-theme-color-primary .tab-navigation-item.active > div span { + color: #009982; +} + +body.page-theme-color-primary .tab-navigation-item.active > div::after { + background-color: #009982; +} + +body.page-theme-color-secondary .tab-navigation-mobile-head span::after { + content: url(../img/arrow-down-secondary.svg); +} + +body.page-theme-color-secondary .tab-navigation-item.active > div span { + color: #00a4e4; +} + +body.page-theme-color-secondary .tab-navigation-item.active > div::after { + background-color: #00a4e4; +} + +body.page-theme-color-tertiary .tab-navigation-mobile-head span::after { + content: url(../img/arrow-down-tertiary.svg); +} + +body.page-theme-color-tertiary .tab-navigation-item.active > div span { + color: #df9b1b; +} + +body.page-theme-color-tertiary .tab-navigation-item.active > div::after { + background-color: #df9b1b; +} + +body.page-theme-color-quaternary .tab-navigation-mobile-head span::after { + content: url(../img/arrow-down-quaternary.svg); +} + +body.page-theme-color-quaternary .tab-navigation-item.active > div span { + color: #a3107c; +} + +body.page-theme-color-quaternary .tab-navigation-item.active > div::after { + background-color: #a3107c; +} + +@media (max-width: 1024px) { + body.page-theme-color-primary .tab-navigation-item.active > div { + background-color: #009982; + } + body.page-theme-color-secondary .tab-navigation-item.active > div { + background-color: #00a4e4; + } + body.page-theme-color-tertiary .tab-navigation-item.active > div { + background-color: #df9b1b; + } + body.page-theme-color-quaternary .tab-navigation-item.active > div { + background-color: #a3107c; + } +} + +.background-color-white .tab-navigation-items { + border-bottom-color: #e5e5e5; +} + +.background-color-white .tab-navigation-item:hover::after { + background-color: #666666; +} + +@media (max-width: 1024px) { + .tab-navigation-mobile-head { + display: inline-block; + } + .tab-navigation-items { + position: absolute; + z-index: 20 !important; + display: none; + width: 100%; + margin-top: 10px; + border-bottom: none; + flex-wrap: wrap; + background-color: #ffffff; + } + .tab-navigation-item { + width: 100%; + padding-bottom: 0; + } + .tab-navigation-item:not(:nth-of-type(1)) { + margin-left: 0; + } + .tab-navigation-item > div { + padding: 10px; + } + .tab-navigation-item > div::after { + display: none; + } + .tab-navigation-item.active > div { + background-color: #009982; + } + .tab-navigation-item.active > div span { + color: #eeeeee !important; + } + .tab-navigation .tab-content-container { + margin-top: 30px; + } +} + +.button { + display: inline-block; + max-width: 100%; + padding: 1.11111rem 3.33333rem; + font-size: 1.11111rem; + font-weight: 700; + line-height: 1.11111rem; + text-align: center; + overflow-wrap: break-word; + overflow-wrap: anywhere; + transition: color .5s, background-color .5s; +} + +.button:hover { + color: #eeeeee !important; + background-color: #333333 !important; +} + +.story-teaser-dark .button:hover { + color: #333333 !important; + background-color: #eeeeee !important; +} + +* + .button { + margin-top: 2.5rem; +} + +@media (max-width: 1280px) { + .button { + font-size: 1rem; + line-height: 1rem; + } +} + +@media (max-width: 960px) { + * + .button { + margin-top: 1.66667rem; + } +} + +.page-category-marker { + display: inline-block; + padding: 0.88889rem 1.22222rem 0.77778rem; + color: #ffffff; + font-size: 0.83333rem; + font-weight: 700; + line-height: 0.83333rem; + text-transform: uppercase; + letter-spacing: .2px; + transition: background-color .3s; +} + +.page-category-marker:hover { + background-color: #333333 !important; +} + +.page-category-marker + h1 { + margin-top: 1.66667rem; +} + +body.page-theme-color-primary .page-category-marker { + background-color: #009982; +} + +body.page-theme-color-secondary .page-category-marker { + background-color: #00a4e4; +} + +body.page-theme-color-tertiary .page-category-marker { + background-color: #df9b1b; +} + +body.page-theme-color-quaternary .page-category-marker { + background-color: #a3107c; +} + +@media (max-width: 960px) { + .page-category-marker { + padding: 0.77778rem 1rem 0.66667rem; + } + .page-category-marker + h1 { + margin-top: 0.83333rem; + } +} + +.image-slider { + position: relative; + z-index: 1; + height: 33.333vw; + min-height: 38.88889rem; + max-height: 44.44444rem; + overflow: hidden; +} + +.image-slider::before, .image-slider::after { + content: ''; + position: absolute; + top: 0; + z-index: 5; + display: block; + width: 140px; + height: 100%; +} + +.image-slider::before { + left: 0; + background-image: linear-gradient(to right, rgba(127, 127, 127, 0.5) 0%, rgba(255, 255, 255, 0) 100%); +} + +.image-slider::after { + right: 0; + background-image: linear-gradient(to left, rgba(127, 127, 127, 0.5) 0%, rgba(255, 255, 255, 0) 100%); +} + +.image-slider .content-wrap { + z-index: 2; + padding-top: 5rem; + padding-bottom: 5rem; +} + +.image-slider .content-wrap * { + z-index: 2; +} + +.image-slider .swiper-slide { + overflow: hidden; +} + +.image-slider .swiper-slide figure { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 37.5vw; + z-index: 1; + overflow: hidden; +} + +.image-slider .swiper-slide figure img { + object-fit: cover; + object-position: center center; + width: 100%; + max-width: none; + height: 100%; +} + +.image-slider .swiper-slide h2 { + margin-bottom: 3.33333rem; +} + +.image-slider .swiper-slide .button { + margin-top: 2.5rem; +} + +.image-slider .swiper-slide::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + background-image: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 45%, rgba(229, 229, 229, 0.97) 47%, rgba(229, 229, 229, 0.89) 50%, rgba(229, 229, 229, 0) 75%, rgba(229, 229, 229, 0) 100%); +} + +.image-slider .swiper-slide-dark { + color: #ffffff; +} + +.image-slider .swiper-slide-dark::after { + background-image: linear-gradient(to right, #333333 0%, #333333 45%, rgba(51, 51, 51, 0.97) 47%, rgba(51, 51, 51, 0.89) 50%, rgba(51, 51, 51, 0) 75%, rgba(51, 51, 51, 0) 100%); +} + +.image-slider .swiper-button-prev, +.image-slider .swiper-button-next { + width: 2.66667rem; + height: 2.66667rem; + background-color: none; + background-image: none; + outline: none; +} + +.image-slider .swiper-button-prev::before, +.image-slider .swiper-button-next::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 2.22222rem; + height: 4.11111rem; + transform: translate(-50%, -50%); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +.image-slider .swiper-pagination-bullets .swiper-pagination-bullet { + width: 0.66667rem; + height: 0.66667rem; + margin: 0 6px; + outline: none; + opacity: .4; + transition: background-color .3s, opacity .3s; +} + +.image-slider .swiper-pagination-bullets .swiper-pagination-bullet:hover { + background-color: #333333; + opacity: 1; +} + +.image-slider .swiper-pagination-bullets .swiper-pagination-bullet-active { + background-color: #009982; + opacity: 1; +} + +.image-slider .swiper-button-prev { + left: 15px; +} + +.image-slider .swiper-button-prev::before { + background-image: url(../img/image-slider-swiper-button-prev-arrow.svg); +} + +.image-slider .swiper-button-next { + right: 15px; +} + +.image-slider .swiper-button-next::before { + background-image: url(../img/image-slider-swiper-button-next-arrow.svg); +} + +.image-slider .swiper-button-disabled { + opacity: .2; +} + +@media (max-width: 1280px) { + .image-slider::before, .image-slider::after { + width: 100px; + } +} + +@media (max-width: 960px) { + .image-slider::before, .image-slider::after { + width: 70px; + } +} + +@media (min-width: 680px) and (max-width: 1330px) { + .image-slider .content-wrap { + margin-right: 2.77778rem; + margin-left: 2.77778rem; + } +} + +@media (max-width: 680px) { + .image-slider { + height: auto; + min-height: auto; + max-height: none; + padding-top: 0; + } + .image-slider::before, .image-slider::after { + display: none; + } + .image-slider .swiper-slide figure { + position: static; + height: 75vw; + } + .image-slider .swiper-slide::after { + display: none; + } + .image-slider-dark { + color: #333333; + } + .image-slider-dark .swiper-pagination-bullets .swiper-pagination-bullet { + background: #000000; + opacity: .4; + } + .image-slider-dark .swiper-pagination-bullets .swiper-pagination-bullet:hover { + background: #333333; + opacity: 1; + } + .image-slider-dark .swiper-pagination-bullets .swiper-pagination-bullet-active { + background: #009982; + opacity: 1; + } + .image-slider .swiper-button-prev { + left: 0; + } + .image-slider .swiper-button-prev::before { + background-image: url(../img/picturebook-swiper-button-prev-arrow.svg); + } + .image-slider .swiper-button-next { + right: 0; + } + .image-slider .swiper-button-next::before { + background-image: url(../img/picturebook-swiper-button-next-arrow.svg); + } + .image-slider .swiper-button-prev, + .image-slider .swiper-button-next { + top: calc(75vw / 2); + width: 2.77778rem; + height: 2.88889rem; + background-color: rgba(0, 0, 0, 0.8); + background-image: none; + outline: none; + transition: background-color .3s; + } + .image-slider .swiper-button-prev:hover, + .image-slider .swiper-button-next:hover { + background-color: rgba(0, 0, 0, 0.95); + } + .image-slider .swiper-button-prev::before, + .image-slider .swiper-button-next::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 1.22222rem; + height: 1.22222rem; + transform: translate(-50%, -50%); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + } +} + +@media (max-width: 560px) { + .image-slider .content-wrap { + padding-top: 3.33333rem; + padding-bottom: 3.33333rem; + } +} + +body.page-theme-color-primary .image-slider .swiper-pagination-bullet-active { + background: #009982; +} + +body.page-theme-color-secondary .image-slider .swiper-pagination-bullet-active { + background: #00a4e4; +} + +body.page-theme-color-tertiary .image-slider .swiper-pagination-bullet-active { + background: #df9b1b; +} + +body.page-theme-color-quaternary .image-slider .swiper-pagination-bullet-active { + background: #a3107c; +} + +.teaser-tile { + position: relative; + z-index: 0; + display: block; + width: 100%; + padding: 2.77778rem 2.22222rem; + padding-bottom: 7.5rem; + overflow: hidden; + overflow-wrap: break-word; + overflow-wrap: anywhere; + color: #eeeeee; + background-color: rgba(0, 153, 130, 0.7); + background-blend-mode: hard-light; +} + +.teaser-tile img { + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + width: 100%; + height: 100%; + object-fit: cover; + transform: translate(-50%, -50%); + transition: transform .7s; +} + +.teaser-tile:hover img { + transform: translate(-50%, -50%) scale(1.1); +} + +.teaser-tile::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + background-color: rgba(0, 153, 130, 0.7); + pointer-events: none; +} + +.teaser-tile::after { + content: url(../img/arrow-right-white.svg); + position: absolute; + right: 2.22222rem; + bottom: 1.66667rem; + display: block; + width: 3.05556rem; +} + +.teaser-tile-color-brand-primary { + background-color: rgba(0, 153, 130, 0.7) !important; +} + +.teaser-tile-color-brand-primary::before { + background-color: rgba(0, 153, 130, 0.7) !important; +} + +.teaser-tile-color-brand-secondary { + background-color: rgba(0, 164, 228, 0.7) !important; +} + +.teaser-tile-color-brand-secondary::before { + background-color: rgba(0, 164, 228, 0.7) !important; +} + +.teaser-tile-color-brand-tertiary { + background-color: rgba(223, 155, 27, 0.7) !important; +} + +.teaser-tile-color-brand-tertiary::before { + background-color: rgba(223, 155, 27, 0.7) !important; +} + +.teaser-tile-color-brand-quaternary { + background-color: rgba(163, 16, 124, 0.7) !important; +} + +.teaser-tile-color-brand-quaternary::before { + background-color: rgba(163, 16, 124, 0.7) !important; +} + +.teaser-tile p { + font-weight: 400; +} + +.teaser-tile h2, +.teaser-tile h3 { + font-size: 2.22222rem; + line-height: 2.77778rem; + letter-spacing: .2px; +} + +.teaser-tile h2 + p, +.teaser-tile h3 + p { + margin-top: 1.66667rem; +} + +body.page-theme-color-primary .teaser-tile::before { + background-color: rgba(0, 153, 130, 0.7); +} + +body.page-theme-color-secondary .teaser-tile::before { + background-color: rgba(0, 164, 228, 0.7); +} + +body.page-theme-color-tertiary .teaser-tile::before { + background-color: rgba(223, 155, 27, 0.7); +} + +body.page-theme-color-quaternary .teaser-tile::before { + background-color: rgba(163, 16, 124, 0.7); +} + +@media (max-width: 680px) { + .teaser-tile { + padding-bottom: 5.55556rem; + } + .teaser-tile::after { + width: 2.5rem; + } +} + +.big-teaser-tiles { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + justify-content: flex-start; +} + +.big-teaser-tiles .big-teaser-tile { + position: relative; + z-index: 0; + display: flex; + width: 50%; + min-height: 25rem; + padding-left: 60px; + flex-direction: row; + align-items: stretch; + justify-content: flex-start; + overflow: hidden; + color: #eeeeee; + background-color: rgba(0, 153, 130, 0.7); + background-blend-mode: hard-light; +} + +.big-teaser-tiles .big-teaser-tile img { + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + width: 100%; + height: 100%; + object-fit: cover; + transform: translate(-50%, -50%) scale(1.001); + transition: transform .7s; +} + +.big-teaser-tiles .big-teaser-tile:hover img { + transform: translate(-50%, -50%) scale(1.1); +} + +.big-teaser-tiles .big-teaser-tile .content { + position: relative; + width: calc(1230px / 2 - 30px); + padding: 4.16667rem 3.33333rem 6.66667rem 0; + margin-left: auto; +} + +.big-teaser-tiles .big-teaser-tile .content::after { + content: url(../img/arrow-right-white.svg); + position: absolute; + right: 3.33333rem; + bottom: 2.5rem; + display: block; + width: 3.05556rem; + height: 2.22222rem; +} + +.big-teaser-tiles .big-teaser-tile .content h2 { + margin-bottom: 1.66667rem; + letter-spacing: .2px; +} + +.big-teaser-tiles .big-teaser-tile .content h2::after { + display: none; +} + +.big-teaser-tiles .big-teaser-tile .content p { + font-weight: 400; +} + +.big-teaser-tiles .big-teaser-tile::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + background-color: rgba(0, 153, 130, 0.7); + pointer-events: none; +} + +.big-teaser-tiles .big-teaser-tile:nth-child(2n) { + padding-right: 60px; + padding-left: 0; +} + +.big-teaser-tiles .big-teaser-tile:nth-child(2n) .content { + padding: 4.16667rem 0 6.66667rem 3.33333rem; + margin-right: auto; + margin-left: 0; +} + +.big-teaser-tiles .big-teaser-tile:nth-child(2n) .content::after { + right: 0; +} + +.big-teaser-tiles .big-teaser-tile-color-brand-primary { + background-color: rgba(0, 153, 130, 0.7); +} + +.big-teaser-tiles .big-teaser-tile-color-brand-primary::after { + background-color: rgba(0, 153, 130, 0.7); +} + +.big-teaser-tiles .big-teaser-tile-color-brand-secondary { + background-color: rgba(0, 164, 228, 0.7); +} + +.big-teaser-tiles .big-teaser-tile-color-brand-secondary::after { + background-color: rgba(0, 164, 228, 0.7); +} + +.big-teaser-tiles .big-teaser-tile-color-brand-tertiary { + background-color: rgba(223, 155, 27, 0.7); +} + +.big-teaser-tiles .big-teaser-tile-color-brand-tertiary::after { + background-color: rgba(223, 155, 27, 0.7); +} + +.big-teaser-tiles .big-teaser-tile-color-brand-quaternary { + background-color: rgba(163, 16, 124, 0.7); +} + +.big-teaser-tiles .big-teaser-tile-color-brand-quaternary::after { + background-color: rgba(163, 16, 124, 0.7); +} + +@media (max-width: 1280px) { + .big-teaser-tiles .big-teaser-tile { + min-height: 20rem; + padding: 2.77778rem 2.22222rem 2.77778rem 2.22222rem; + } + .big-teaser-tiles .big-teaser-tile .content { + width: 100%; + padding: 0 0 3.33333rem 0; + } + .big-teaser-tiles .big-teaser-tile .content::after { + right: 0; + bottom: -0.77778rem; + } + .big-teaser-tiles .big-teaser-tile:nth-child(2n) { + padding: 2.77778rem 2.22222rem 2.77778rem 2.22222rem; + } + .big-teaser-tiles .big-teaser-tile:nth-child(2n) .content { + padding: 0 0 3.33333rem 0; + } +} + +@media (max-width: 680px) { + .big-teaser-tiles .big-teaser-tile { + width: 100%; + min-height: 16.66667rem; + } + .big-teaser-tiles .big-teaser-tile .content { + padding: 0 0 1.66667rem 0; + } + .big-teaser-tiles .big-teaser-tile .content::after { + width: 2.5rem; + } + .big-teaser-tiles .big-teaser-tile:nth-child(2n) .content { + padding: 0 0 1.66667rem 0; + } +} + +.teaser-strip { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-start; + overflow-wrap: break-word; + overflow-wrap: anywhere; + transition: background-color .5s; +} + +.teaser-strip:hover img { + transform: scale(1.03); +} + +.teaser-strip-image-left .container-2-cols { + flex-direction: row; +} + +.teaser-strip-image-right .container-2-cols { + flex-direction: row-reverse; +} + +.teaser-strip .column { + width: 50%; + overflow: hidden; +} + +.teaser-strip .column + .column { + position: relative; + padding: 2.5rem 1.66667rem 5rem; + margin-left: 0; +} + +.teaser-strip .column + .column::after { + content: url(../img/arrow-right-white.svg); + position: absolute; + right: 1.66667rem; + bottom: 1.66667rem; + display: block; + width: 3.05556rem; + height: 2.22222rem; +} + +.teaser-strip .column img { + width: 100%; + max-width: none; + height: 100%; + object-fit: cover; + object-position: center center; + transition: transform .5s; +} + +.teaser-strip .column h2, +.teaser-strip .column h3 { + font-size: 2rem; + line-height: 2.22222rem; +} + +.teaser-strip .column h2 + .text-element, +.teaser-strip .column h3 + .text-element { + margin-top: 1.66667rem; +} + +.teaser-strip.background-color-brand-primary { + background-color: #009982 !important; +} + +.teaser-strip.background-color-brand-primary:hover { + background-color: #333333 !important; +} + +.teaser-strip.background-color-brand-secondary { + background-color: #00a4e4 !important; +} + +.teaser-strip.background-color-brand-secondary:hover { + background-color: #333333 !important; +} + +.teaser-strip.background-color-brand-tertiary { + background-color: #df9b1b !important; +} + +.teaser-strip.background-color-brand-tertiary:hover { + background-color: #333333 !important; +} + +.teaser-strip.background-color-brand-quaternary { + background-color: #a3107c !important; +} + +.teaser-strip.background-color-brand-quaternary:hover { + background-color: #333333 !important; +} + +body.page-theme-color-primary .teaser-strip { + background-color: #009982; +} + +body.page-theme-color-primary .teaser-strip:hover { + background-color: #333333; +} + +body.page-theme-color-secondary .teaser-strip { + background-color: #00a4e4; +} + +body.page-theme-color-secondary .teaser-strip:hover { + background-color: #333333; +} + +body.page-theme-color-tertiary .teaser-strip { + background-color: #df9b1b; +} + +body.page-theme-color-tertiary .teaser-strip:hover { + background-color: #333333; +} + +body.page-theme-color-quaternary .teaser-strip { + background-color: #a3107c; +} + +body.page-theme-color-quaternary .teaser-strip:hover { + background-color: #333333; +} + +@media (max-width: 680px) { + .teaser-strip-image-left .container-2-cols, .teaser-strip-image-right .container-2-cols { + flex-direction: column; + } + .teaser-strip .column { + width: 100%; + } + .teaser-strip .column + .column { + margin-top: 0; + } +} + +.big-image { + width: 100%; + height: auto; + max-height: 33.33333rem; + overflow: hidden; +} + +.big-image img { + width: 100%; + height: auto; +} + +.big-image-with-gap { + max-height: none; + padding-bottom: 6.66667rem; +} + +@media (max-width: 1024px) { + .big-image-with-gap { + padding-bottom: 5rem; + } +} + +@media (max-width: 560px) { + .big-image-with-gap { + padding-bottom: 3.33333rem; + } +} + +.toggle { + padding: 0.55556rem 0; + border-top: 1px solid #333333; + border-bottom: 1px solid #333333; +} + +.toggle + .toggle { + margin-top: 0; + border-top: none; +} + +.toggle-head { + position: relative; + display: block; + padding-left: 2.5rem; + cursor: pointer; + transition: color .3s; +} + +.toggle-head h3 { + font-size: 1.38889rem; + font-weight: 400; + line-height: 1.94444rem; +} + +.toggle-head-icon { + position: absolute; + top: 7px; + left: 0; + width: 20px; + height: 20px; + line-height: 1; +} + +.toggle-head-icon::before, .toggle-head-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #009982; + transition: height .3s; +} + +.toggle-head-icon::before { + width: 20px; + height: 4px; +} + +.toggle-head-icon::after { + width: 4px; + height: 20px; +} + +.toggle-head:hover { + color: #009982; +} + +.toggle.opened .toggle-head-icon::after { + height: 0; +} + +.toggle .toggle-body { + padding: 2.5rem 0; +} + +.toggle .toggle-body > * + * { + margin-top: 1.66667rem; +} + +body.page-theme-color-primary .toggle-head:hover { + color: #009982; +} + +body.page-theme-color-primary .toggle-head-icon::before, body.page-theme-color-primary .toggle-head-icon::after { + background-color: #009982; +} + +body.page-theme-color-secondary .toggle-head:hover { + color: #00a4e4; +} + +body.page-theme-color-secondary .toggle-head-icon::before, body.page-theme-color-secondary .toggle-head-icon::after { + background-color: #00a4e4; +} + +body.page-theme-color-tertiary .toggle-head:hover { + color: #df9b1b; +} + +body.page-theme-color-tertiary .toggle-head-icon::before, body.page-theme-color-tertiary .toggle-head-icon::after { + background-color: #df9b1b; +} + +body.page-theme-color-quaternary .toggle-head:hover { + color: #a3107c; +} + +body.page-theme-color-quaternary .toggle-head-icon::before, body.page-theme-color-quaternary .toggle-head-icon::after { + background-color: #a3107c; +} + +@media (max-width: 1280px) { + .toggle-head-icon { + top: 2px; + } +} + +.eyecatcher { + padding: 5.55556rem 0; +} + +.eyecatcher .content-wrap { + padding: 0 5%; +} + +.eyecatcher h2 { + margin-bottom: 0; +} + +.eyecatcher h2::after { + display: none; +} + +.eyecatcher p { + font-weight: 400; +} + +.eyecatcher.background-color-brand-primary { + background-image: linear-gradient(90deg, #009982, #08d7b8) !important; +} + +.eyecatcher.background-color-brand-secondary { + background-image: linear-gradient(90deg, #00a4e4, #00b7ff) !important; +} + +.eyecatcher.background-color-brand-tertiary { + background-image: linear-gradient(90deg, #df9b1b, #f4c431) !important; +} + +.eyecatcher.background-color-brand-quaternary { + background-image: linear-gradient(90deg, #a3107c, #d02ea5) !important; +} + +body.page-theme-color-primary .eyecatcher { + background-image: linear-gradient(90deg, #009982, #08d7b8); +} + +body.page-theme-color-secondary .eyecatcher { + background-image: linear-gradient(90deg, #00a4e4, #00b7ff); +} + +body.page-theme-color-tertiary .eyecatcher { + background-image: linear-gradient(90deg, #df9b1b, #f4c431); +} + +body.page-theme-color-quaternary .eyecatcher { + background-image: linear-gradient(90deg, #a3107c, #d02ea5); +} + +@media (max-width: 1024px) { + .eyecatcher { + padding: 5rem 0; + } +} + +@media (max-width: 560px) { + .eyecatcher { + padding: 3.33333rem 0; + } +} + +.events .big-event-teaser { + display: block; +} + +.events .big-event-teaser-image { + width: 100%; + height: auto; +} + +.events .big-event-teaser-image img { + width: 100%; + height: auto; +} + +.events .big-event-teaser-image + * { + margin-top: 1.66667rem; +} + +.events .big-event-teaser-infos span { + white-space: nowrap; +} + +.events .big-event-teaser-infos span::after { + content: '|'; +} + +.events .big-event-teaser-infos span:last-child::after { + display: none; +} + +.events .big-event-teaser-content-container { + padding-right: 3.33333rem; +} + +.events .big-event-teaser-content-container .button { + color: #ffffff; + background-color: #009982; +} + +.events .big-event-teaser h3 { + font-size: 1.94444rem; +} + +.events .big-event-teaser-color-brand-primary .big-event-teaser-content-container .button { + background-color: #009982 !important; +} + +.events .big-event-teaser-color-brand-primary .big-event-teaser-content-container .button:hover { + background-color: #333333 !important; +} + +.events .big-event-teaser-color-brand-secondary .big-event-teaser-content-container .button { + background-color: #00a4e4 !important; +} + +.events .big-event-teaser-color-brand-secondary .big-event-teaser-content-container .button:hover { + background-color: #333333 !important; +} + +.events .big-event-teaser-color-brand-tertiary .big-event-teaser-content-container .button { + background-color: #df9b1b !important; +} + +.events .big-event-teaser-color-brand-tertiary .big-event-teaser-content-container .button:hover { + background-color: #333333 !important; +} + +.events .big-event-teaser-color-brand-quaternary .big-event-teaser-content-container .button { + background-color: #a3107c !important; +} + +.events .big-event-teaser-color-brand-quaternary .big-event-teaser-content-container .button:hover { + background-color: #333333 !important; +} + +.events .small-event-teaser { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-start; +} + +.events .small-event-teaser:hover .small-event-teaser-content-container { + background-color: #dedede; +} + +.events .small-event-teaser + .small-event-teaser { + margin-top: 5px; +} + +.events .small-event-teaser-date-container { + width: 5rem; + min-width: 5rem; + padding: 1.11111rem 0.55556rem; + border-left: 0.5rem solid #009982; + background-color: #dedede; +} + +.events .small-event-teaser-content-container { + position: relative; + padding: 0.83333rem; + padding-bottom: 3.33333rem; + margin-left: 2px; + flex-grow: 1; + background-color: #f2f2f2; + overflow-wrap: break-word; + overflow-wrap: anywhere; + transition: background-color .3s; +} + +.events .small-event-teaser-date span { + display: block; + font-weight: 700; +} + +.events .small-event-teaser-date span:nth-of-type(1), .events .small-event-teaser-date span:nth-of-type(4) { + font-size: 1.66667rem; +} + +.events .small-event-teaser h3 { + font-size: 1rem; + line-height: 1.55556rem; +} + +.events .small-event-teaser-readmore-link { + position: absolute; + right: 1.11111rem; + bottom: 1.11111rem; + width: 1.33333rem; + height: 0.94444rem; + background-image: url(../img/arrow-right-grey.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +.events .small-event-teaser-readmore-link span { + display: none; +} + +.events .small-event-teaser-icon-container { + position: relative; + margin-top: 18px; + margin-left: 1.66667rem; +} + +.events .small-event-teaser-icon-container + .small-event-teaser-icon-container { + margin-top: 0; +} + +.events .small-event-teaser-icon-container p { + font-size: 0.88889rem; +} + +.events .small-event-teaser-icon-container::before { + content: ''; + position: absolute; + top: 0.22222rem; + left: -1.66667rem; + width: 1rem; + height: 1rem; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +.events .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-primary.svg); +} + +.events .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-primary.svg); +} + +.events .small-event-teaser-icon-container-pricing::before { + top: 0.27778rem; + height: 0.88889rem; + background-image: url(../img/small-event-teaser-icon-pricing-primary.svg); +} + +.events .small-event-teaser-color-brand-primary .small-event-teaser-date-container { + border-left-color: #009982 !important; +} + +.events .small-event-teaser-color-brand-primary .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-primary.svg) !important; +} + +.events .small-event-teaser-color-brand-primary .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-primary.svg) !important; +} + +.events .small-event-teaser-color-brand-primary .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-primary.svg) !important; +} + +.events .small-event-teaser-color-brand-secondary .small-event-teaser-date-container { + border-left-color: #00a4e4 !important; +} + +.events .small-event-teaser-color-brand-secondary .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-secondary.svg) !important; +} + +.events .small-event-teaser-color-brand-secondary .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-secondary.svg) !important; +} + +.events .small-event-teaser-color-brand-secondary .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-secondary.svg) !important; +} + +.events .small-event-teaser-color-brand-tertiary .small-event-teaser-date-container { + border-left-color: #df9b1b !important; +} + +.events .small-event-teaser-color-brand-tertiary .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-tertiary.svg) !important; +} + +.events .small-event-teaser-color-brand-tertiary .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-tertiary.svg) !important; +} + +.events .small-event-teaser-color-brand-tertiary .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-tertiary.svg) !important; +} + +.events .small-event-teaser-color-brand-quaternary .small-event-teaser-date-container { + border-left-color: #a3107c !important; +} + +.events .small-event-teaser-color-brand-quaternary .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-quaternary.svg) !important; +} + +.events .small-event-teaser-color-brand-quaternary .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-quaternary.svg) !important; +} + +.events .small-event-teaser-color-brand-quaternary .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-quaternary.svg) !important; +} + +.events-readmore-link { + position: relative; + display: inline-block; + margin-top: 15px !important; + margin-left: 1.66667rem; + font-weight: 700; + transition: color .3s; +} + +.events-readmore-link:hover { + color: #009982; +} + +.events-readmore-link::before { + content: ''; + position: absolute; + top: 0.11111rem; + left: -1.66667rem; + width: 1.11111rem; + height: 1.11111rem; + background-image: url(../img/events-icon-calendar.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} + +body.page-theme-color-primary .events .big-event-teaser-content-container .button { + background-color: #009982; +} + +body.page-theme-color-primary .events .small-event-teaser-date-container { + border-left-color: #009982; +} + +body.page-theme-color-primary .events .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-primary.svg); +} + +body.page-theme-color-primary .events .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-primary.svg); +} + +body.page-theme-color-primary .events .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-primary.svg); +} + +body.page-theme-color-primary .events-readmore-link:hover { + color: #009982; +} + +body.page-theme-color-secondary .events .big-event-teaser-content-container .button { + background-color: #00a4e4; +} + +body.page-theme-color-secondary .events .small-event-teaser-date-container { + border-left-color: #00a4e4; +} + +body.page-theme-color-secondary .events .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-secondary.svg); +} + +body.page-theme-color-secondary .events .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-secondary.svg); +} + +body.page-theme-color-secondary .events .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-secondary.svg); +} + +body.page-theme-color-secondary .events-readmore-link:hover { + color: #00a4e4; +} + +body.page-theme-color-tertiary .events .big-event-teaser-content-container .button { + background-color: #df9b1b; +} + +body.page-theme-color-tertiary .events .small-event-teaser-date-container { + border-left-color: #df9b1b; +} + +body.page-theme-color-tertiary .events .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-tertiary.svg); +} + +body.page-theme-color-tertiary .events .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-tertiary.svg); +} + +body.page-theme-color-tertiary .events .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-tertiary.svg); +} + +body.page-theme-color-tertiary .events-readmore-link:hover { + color: #df9b1b; +} + +body.page-theme-color-quaternary .events .big-event-teaser-content-container .button { + background-color: #a3107c; +} + +body.page-theme-color-quaternary .events .small-event-teaser-date-container { + border-left-color: #a3107c; +} + +body.page-theme-color-quaternary .events .small-event-teaser-icon-container-location::before { + background-image: url(../img/small-event-teaser-icon-location-quaternary.svg); +} + +body.page-theme-color-quaternary .events .small-event-teaser-icon-container-time::before { + background-image: url(../img/small-event-teaser-icon-time-quaternary.svg); +} + +body.page-theme-color-quaternary .events .small-event-teaser-icon-container-pricing::before { + background-image: url(../img/small-event-teaser-icon-pricing-quaternary.svg); +} + +body.page-theme-color-quaternary .events-readmore-link:hover { + color: #a3107c; +} + +@media (max-width: 960px) { + .events .small-event-teaser-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + justify-content: flex-start; + } + .events .small-event-teaser { + width: calc(50% - 0.83333rem); + } + .events .small-event-teaser:nth-of-type(2n) { + margin-left: 1.66667rem; + } + .events .small-event-teaser:nth-of-type(2) { + margin-top: 0; + } + .events .small-event-teaser-content-container { + padding-bottom: 5rem; + } +} + +@media (max-width: 680px) { + .events .small-event-teaser-container { + flex-direction: column; + } + .events .small-event-teaser { + width: 100%; + } + .events .small-event-teaser:nth-of-type(2n) { + margin-left: 0; + } + .events .small-event-teaser:nth-of-type(2) { + margin-top: 5px; + } + .events .small-event-teaser-content-container { + padding-bottom: 5rem; + } +} + +article > p:first-child { + margin-bottom: 4.16667rem; + font-size: 1.38889rem; + line-height: 1.94444rem; +} + +article > p:last-child { + margin-bottom: inherit; + font-size: inherit; + line-height: inherit; +} + +@media (max-width: 1280px) { + article > p:first-child { + margin-bottom: 3.33333rem; + } +} + +.mfp-bg { + opacity: .95; +} + +.mfp-iframe-holder video { + width: 100%; +}