/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* smoooooooth scrolling for anchors */ html { scroll-behavior: smooth; scroll-padding-top: 120px; overflow-y: scroll; } html { --dsj-yellow: #F5952D; --dsj-yellow-inverted: #F5952D; --dsj-green: #11B89B; --text-color: rgb(34, 34, 34); --light-grey: rgb(232, 232, 232); --mid-grey: rgb(153, 153, 153); --dark-grey: rgb(68, 68, 68); --error-red: rgb(226, 0, 0); --invert-black: black; --invert-white: white; --bg-color-fallback: rgba(255, 255, 255, .8); --bg-color-blur: rgba(255, 255, 255, .5); --bg-filter-blur: blur(20px); } html.contrast { --dsj-yellow: black; --dsj-yellow-inverted: white; --dsj-green: black; --text-color: black; --light-grey: white; --mid-grey: black; --dark-grey: black; --error-red: black; --invert-black: white; --invert-white: black; --bg-color-fallback: white; --bg-color-blur: white; --bg-filter-blur: none; } /** Contrast Overrides for everyting that is NOT a color! **/ html.contrast * { box-shadow: none !important; } html.contrast .header__nav .nav__root:hover { outline: 2px solid black; } html.contrast .header__nav .dropdown__sub { outline: 2px solid black; } html.contrast .dsj-event { outline: 2px solid black; } html.contrast .dsj-event.dsj-event--highlight { background-color: var(--dsj-yellow-inverted); background-image: none; outline: 4px solid black; color: black; } html.contrast .dsj-event.dsj-event--highlight .meta-info-pill { border-color: black; } html.contrast .dsj-event.dsj-event--highlight .event__details { border-color: black; } html.contrast .sidebar__component { outline: 2px solid black; } html.contrast .item-slider-wrapper .item-slider-head .button { outline: 2px solid black; } html.contrast .footer a:hover { text-decoration: underline; } /* Thin => 100 ExtraLight => 200 Light => 300 Regular => 400 Medium => 500 */ /* poppins-100 - latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; src: local(""), url("../webfonts/poppins-v19-latin-100.woff2") format("woff2"), url("../webfonts/poppins-v19-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-200 - latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; src: local(""), url("../webfonts/poppins-v19-latin-200.woff2") format("woff2"), url("../webfonts/poppins-v19-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-300 - latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; src: local(""), url("../webfonts/poppins-v19-latin-300.woff2") format("woff2"), url("../webfonts/poppins-v19-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-300italic - latin */ @font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; src: local(""), url("../webfonts/poppins-v19-latin-300italic.woff2") format("woff2"), url("../webfonts/poppins-v19-latin-300italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-regular - latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; src: local(""), url("../webfonts/poppins-v19-latin-regular.woff2") format("woff2"), url("../webfonts/poppins-v19-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-500italic - latin */ @font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; src: local(""), url("../webfonts/poppins-v19-latin-500italic.woff2") format("woff2"), url("../webfonts/poppins-v19-latin-500italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-500 - latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; src: local(""), url("../webfonts/poppins-v19-latin-500.woff2") format("woff2"), url("../webfonts/poppins-v19-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* Media Queries */ /* Thin => 100 ExtraLight => 200 Light => 300 Regular => 400 Medium => 500 */ html { font-size: 18px; hyphens: auto; } @media print { html { font-size: 12px; } } body { font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 1rem; font-weight: 300; color: var(--text-color); } body strong { font-weight: 500; } body sup { vertical-align: super; font-size: smaller; } body sub { vertical-align: sub; font-size: smaller; } body p a { text-decoration: underline; } body p a:hover { text-decoration: none; color: #F5952D; } body a { transition: color 0.3s ease-in-out 0s; } .ce-bodytext, .article__content, .message__content, .sidebar__content, .item__description, .detail__description, .filter-result__details { line-height: 1.5rem; } .ce-bodytext p:not(:last-of-type), .article__content p:not(:last-of-type), .message__content p:not(:last-of-type), .sidebar__content p:not(:last-of-type), .item__description p:not(:last-of-type), .detail__description p:not(:last-of-type), .filter-result__details p:not(:last-of-type) { margin-bottom: 1.5rem; } .ce-bodytext p.text-right, .article__content p.text-right, .message__content p.text-right, .sidebar__content p.text-right, .item__description p.text-right, .detail__description p.text-right, .filter-result__details p.text-right { text-align: right; } .ce-bodytext strong, .article__content strong, .message__content strong, .sidebar__content strong, .item__description strong, .detail__description strong, .filter-result__details strong { font-weight: 500; } .ce-bodytext em, .article__content em, .message__content em, .sidebar__content em, .item__description em, .detail__description em, .filter-result__details em { font-style: italic; } .ce-bodytext ul li, .ce-bodytext ol li, .article__content ul li, .article__content ol li, .message__content ul li, .message__content ol li, .sidebar__content ul li, .sidebar__content ol li, .item__description ul li, .item__description ol li, .detail__description ul li, .detail__description ol li, .filter-result__details ul li, .filter-result__details ol li { word-break: break-word; } .ce-bodytext ul a, .ce-bodytext ol a, .article__content ul a, .article__content ol a, .message__content ul a, .message__content ol a, .sidebar__content ul a, .sidebar__content ol a, .item__description ul a, .item__description ol a, .detail__description ul a, .detail__description ol a, .filter-result__details ul a, .filter-result__details ol a { text-decoration: underline; } .ce-bodytext ul a:hover, .ce-bodytext ol a:hover, .article__content ul a:hover, .article__content ol a:hover, .message__content ul a:hover, .message__content ol a:hover, .sidebar__content ul a:hover, .sidebar__content ol a:hover, .item__description ul a:hover, .item__description ol a:hover, .detail__description ul a:hover, .detail__description ol a:hover, .filter-result__details ul a:hover, .filter-result__details ol a:hover { text-decoration: none; color: #F5952D; } .ce-bodytext ul:not(:first-child), .ce-bodytext ol:not(:first-child), .article__content ul:not(:first-child), .article__content ol:not(:first-child), .message__content ul:not(:first-child), .message__content ol:not(:first-child), .sidebar__content ul:not(:first-child), .sidebar__content ol:not(:first-child), .item__description ul:not(:first-child), .item__description ol:not(:first-child), .detail__description ul:not(:first-child), .detail__description ol:not(:first-child), .filter-result__details ul:not(:first-child), .filter-result__details ol:not(:first-child) { margin-top: 1rem; } .ce-bodytext ul:not(:last-child), .ce-bodytext ol:not(:last-child), .article__content ul:not(:last-child), .article__content ol:not(:last-child), .message__content ul:not(:last-child), .message__content ol:not(:last-child), .sidebar__content ul:not(:last-child), .sidebar__content ol:not(:last-child), .item__description ul:not(:last-child), .item__description ol:not(:last-child), .detail__description ul:not(:last-child), .detail__description ol:not(:last-child), .filter-result__details ul:not(:last-child), .filter-result__details ol:not(:last-child) { margin-bottom: 1rem; } .ce-bodytext ul, .article__content ul, .message__content ul, .sidebar__content ul, .item__description ul, .detail__description ul, .filter-result__details ul { list-style: disc; padding-left: 1em; } .ce-bodytext ul li::marker, .article__content ul li::marker, .message__content ul li::marker, .sidebar__content ul li::marker, .item__description ul li::marker, .detail__description ul li::marker, .filter-result__details ul li::marker { color: var(--dsj-yellow); } .ce-bodytext ol, .article__content ol, .message__content ol, .sidebar__content ol, .item__description ol, .detail__description ol, .filter-result__details ol { counter-reset: item; padding-left: 1.8em; } .ce-bodytext ol li::before, .article__content ol li::before, .message__content ol li::before, .sidebar__content ol li::before, .item__description ol li::before, .detail__description ol li::before, .filter-result__details ol li::before { display: inline-block; content: counters(item, ".") "."; counter-increment: item; text-align: center; color: var(--dsj-yellow); font-weight: 500; width: 1.8em; margin-left: -1.8em; } .ce-bodytext ol li ol, .article__content ol li ol, .message__content ol li ol, .sidebar__content ol li ol, .item__description ol li ol, .detail__description ol li ol, .filter-result__details ol li ol { padding-left: 3em; margin-left: -20px; } .ce-bodytext ol li ol li::before, .article__content ol li ol li::before, .message__content ol li ol li::before, .sidebar__content ol li ol li::before, .item__description ol li ol li::before, .detail__description ol li ol li::before, .filter-result__details ol li ol li::before { width: 3em; margin-left: -3em; } .ce-bodytext ol li ol ol, .article__content ol li ol ol, .message__content ol li ol ol, .sidebar__content ol li ol ol, .item__description ol li ol ol, .detail__description ol li ol ol, .filter-result__details ol li ol ol { padding-left: 4em; margin-left: -50px; } .ce-bodytext ol li ol ol li::before, .article__content ol li ol ol li::before, .message__content ol li ol ol li::before, .sidebar__content ol li ol ol li::before, .item__description ol li ol ol li::before, .detail__description ol li ol ol li::before, .filter-result__details ol li ol ol li::before { width: 4em; margin-left: -4em; } .ce-bodytext ol li ol ol, .article__content ol li ol ol, .message__content ol li ol ol, .sidebar__content ol li ol ol, .item__description ol li ol ol, .detail__description ol li ol ol, .filter-result__details ol li ol ol { padding-left: 5em; } .ce-bodytext ol li ol ol li::before, .article__content ol li ol ol li::before, .message__content ol li ol ol li::before, .sidebar__content ol li ol ol li::before, .item__description ol li ol ol li::before, .detail__description ol li ol ol li::before, .filter-result__details ol li ol ol li::before { width: 5em; margin-left: -5em; } .ce-bodytext h1, .ce-bodytext h2, .ce-bodytext h3, .ce-bodytext h4, .ce-bodytext h5, .article__content h1, .article__content h2, .article__content h3, .article__content h4, .article__content h5, .message__content h1, .message__content h2, .message__content h3, .message__content h4, .message__content h5, .sidebar__content h1, .sidebar__content h2, .sidebar__content h3, .sidebar__content h4, .sidebar__content h5, .item__description h1, .item__description h2, .item__description h3, .item__description h4, .item__description h5, .detail__description h1, .detail__description h2, .detail__description h3, .detail__description h4, .detail__description h5, .filter-result__details h1, .filter-result__details h2, .filter-result__details h3, .filter-result__details h4, .filter-result__details h5 { font-weight: 300; margin-bottom: 10px; line-height: 1.2; } .ce-bodytext h1, .article__content h1, .message__content h1, .sidebar__content h1, .item__description h1, .detail__description h1, .filter-result__details h1 { font-size: 1.4rem; } @media (min-width: 768px) { .ce-bodytext h1, .article__content h1, .message__content h1, .sidebar__content h1, .item__description h1, .detail__description h1, .filter-result__details h1 { font-size: 2rem; } } @media (min-width: 1024px) { .ce-bodytext h1, .article__content h1, .message__content h1, .sidebar__content h1, .item__description h1, .detail__description h1, .filter-result__details h1 { font-weight: 100; font-size: 3rem; } } .ce-bodytext h2, .article__content h2, .message__content h2, .sidebar__content h2, .item__description h2, .detail__description h2, .filter-result__details h2 { font-size: 1.2rem; } @media (min-width: 768px) { .ce-bodytext h2, .article__content h2, .message__content h2, .sidebar__content h2, .item__description h2, .detail__description h2, .filter-result__details h2 { font-size: 1.8rem; } } @media (min-width: 1024px) { .ce-bodytext h2, .article__content h2, .message__content h2, .sidebar__content h2, .item__description h2, .detail__description h2, .filter-result__details h2 { font-weight: 100; font-size: 2.6rem; } } .ce-bodytext h3, .article__content h3, .message__content h3, .sidebar__content h3, .item__description h3, .detail__description h3, .filter-result__details h3 { font-size: 1.2rem; } @media (min-width: 768px) { .ce-bodytext h3, .article__content h3, .message__content h3, .sidebar__content h3, .item__description h3, .detail__description h3, .filter-result__details h3 { font-size: 1.6rem; } } @media (min-width: 1024px) { .ce-bodytext h3, .article__content h3, .message__content h3, .sidebar__content h3, .item__description h3, .detail__description h3, .filter-result__details h3 { font-weight: 200; font-size: 2.4rem; } } .ce-bodytext h4, .article__content h4, .message__content h4, .sidebar__content h4, .item__description h4, .detail__description h4, .filter-result__details h4 { font-size: 1.2rem; } @media (min-width: 768px) { .ce-bodytext h4, .article__content h4, .message__content h4, .sidebar__content h4, .item__description h4, .detail__description h4, .filter-result__details h4 { font-size: 1.6rem; } } @media (min-width: 1024px) { .ce-bodytext h4, .article__content h4, .message__content h4, .sidebar__content h4, .item__description h4, .detail__description h4, .filter-result__details h4 { font-weight: 200; font-size: 2rem; } } .ce-bodytext h5, .article__content h5, .message__content h5, .sidebar__content h5, .item__description h5, .detail__description h5, .filter-result__details h5 { font-size: 1.2rem; } @media (min-width: 768px) { .ce-bodytext h5, .article__content h5, .message__content h5, .sidebar__content h5, .item__description h5, .detail__description h5, .filter-result__details h5 { font-size: 1.5rem; } } @media (min-width: 1024px) { .ce-bodytext h5, .article__content h5, .message__content h5, .sidebar__content h5, .item__description h5, .detail__description h5, .filter-result__details h5 { font-weight: 200; font-size: 1.8rem; } } .headline { line-height: 1.5; } .headline.headline--header { font-weight: 200; font-size: 1.4rem; } @media (min-width: 768px) { .headline.headline--header { font-size: 1.8rem; } } @media (min-width: 1024px) { .headline.headline--header { font-size: 2.2rem; } } @media (min-width: 1450px) { .headline.headline--header { font-size: 2.8rem; } } .headline.headline--header--subheadline { font-size: 1rem; font-weight: 200; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } @media (min-width: 768px) { .headline.headline--header--subheadline { font-size: 1.2rem; justify-content: flex-start; align-items: flex-start; } } @media (min-width: 1024px) { .headline.headline--header--subheadline { font-size: 1.5rem; } } @media (min-width: 1450px) { .headline.headline--header--subheadline { font-size: 1.7rem; } } .headline.headline--section { font-size: 2.3rem; font-weight: 100; } @media (min-width: 1024px) { .headline.headline--section { font-size: 3.5rem; } } @media (min-width: 1450px) { .headline.headline--section { font-size: 5rem; } } .headline.headline--content { font-size: 1.8rem; font-weight: 100; margin-bottom: 20px; } @media (min-width: 768px) { .headline.headline--content { font-size: 2.3rem; } } @media (min-width: 1024px) { .headline.headline--content { font-size: 2.77778rem; margin-bottom: 30px; } } .headline.headline--content-small { font-size: 1.2rem; font-weight: 100; margin-bottom: 15px; } @media (min-width: 768px) { .headline.headline--content-small { font-size: 1.8rem; } } @media (min-width: 1024px) { .headline.headline--content-small { font-size: 2rem; margin-bottom: 20px; } } .headline.headline--aside { font-weight: 200; font-size: 1.25rem; margin-bottom: 20px; } @media (min-width: 1024px) { .headline.headline--aside { font-size: 1.625rem; } } .headline.headline--filter-result { font-size: 1.2rem; margin-bottom: 10px; font-weight: 400; } @media (min-width: 768px) { .headline.headline--filter-result { margin-bottom: 15px; font-size: 1.35rem; } } .headline.headline--pill { font-size: 1.333333389rem; font-weight: 300; border-radius: 35px; border: 2px solid var(--dsj-yellow); width: 100%; padding: 10px 30px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 40px; } @media (min-width: 768px) { .headline.headline--pill { width: auto; } } @media (min-width: 1024px) { .headline.headline--pill { margin-bottom: 70px; } } .headline.headline--linked { transition: color 0.3s ease-in-out 0s; } .headline.headline--linked:hover { color: var(--dsj-yellow); } .footer .headline { font-size: 1.2rem; margin-bottom: 5px; font-weight: 300; } .footer .headline small.subheadline { font-weight: 200; font-size: inherit; display: block; } @media (min-width: 768px) { .footer .headline { margin-bottom: 10px; } } @media (min-width: 1024px) { .footer .headline { margin-bottom: 15px; font-size: 1.666667rem; } } .filter-result { font-size: 0.9rem; } .filter-result .filter-result__address .address__item { word-break: break-word; } .filter-result .filter-result__details { font-size: 0.9em; } .filter-result .filter-result__details .details__headline { font-size: 1rem; font-weight: 400; list-style: none; cursor: pointer; } .form__error-message { font-size: 0.8rem; color: darkred; } .container { max-width: 1390px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .container { padding-left: 15px; padding-right: 15px; } } .container::after { display: block; content: ""; clear: both; } .readSpeakerContent > .container:first-child { margin-top: 30px; } @media (min-width: 768px) { .readSpeakerContent > .container:first-child { margin-top: 50px; } } @media (min-width: 1450px) { .readSpeakerContent > .container:first-child { margin-top: 100px; } } .content-wrapper { margin-left: auto; margin-right: auto; max-width: 1390px; width: 100%; padding: 0 15px; margin-top: 30px; margin-bottom: 30px; } @media (min-width: 768px) { .content-wrapper { padding-left: 15px; padding-right: 15px; margin-top: 50px; margin-bottom: 50px; } } @media (min-width: 1450px) { .content-wrapper { margin-top: 100px; margin-bottom: 100px; } } .content-wrapper::after { display: block; content: ""; clear: both; } .content-wrapper .btn.btn-primary a { text-decoration: none; } .content-wrapper .btn.btn-primary a:hover { color: black; } .sidebar__component .content-wrapper, .sidebar__component .container { padding: 0; } .header { background-image: linear-gradient(310deg, hsl(31, 91%, 57%) 0%, hsl(31, 85%, 55%) 11%, hsl(31, 80%, 52%) 22%, hsl(31, 76%, 50%) 33%, hsl(31, 78%, 48%) 44%, hsl(31, 81%, 46%) 56%, hsl(31, 85%, 43%) 67%, hsl(31, 89%, 41%) 78%, hsl(31, 95%, 38%) 89%, hsl(31, 100%, 36%) 100%); box-shadow: 0 0 1.6px rgba(0, 0, 0, 0.015), 0 0 3.4px rgba(0, 0, 0, 0.022), 0 0 5.8px rgba(0, 0, 0, 0.027), 0 0 8.7px rgba(0, 0, 0, 0.031), 0 0 12.5px rgba(0, 0, 0, 0.035), 0 0 17.7px rgba(0, 0, 0, 0.039), 0 0 25.1px rgba(0, 0, 0, 0.043), 0 0 36.5px rgba(0, 0, 0, 0.048), 0 0 56.3px rgba(0, 0, 0, 0.055), 0 0 100px rgba(0, 0, 0, 0.07); position: relative; background-position: center; background-size: cover; padding: 0; height: 100vh; margin-bottom: calc(30px + 20px); } @media (min-width: 1024px) { .header { margin-bottom: calc(50px * 2); } } .header .header__nav-background { /* slightly transparent fallback */ background-color: var(--bg-color-fallback); /* if backdrop support: very transparent and blurred */ width: 100%; margin: 0; position: fixed; z-index: 500; box-shadow: none; transition: box-shadow 0.3s ease-in-out 0s; } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .header .header__nav-background { background-color: var(--bg-color-blur); backdrop-filter: var(--bg-filter-blur); -webkit-backdrop-filter: var(--bg-filter-blur); } } .header .header__nav-background .header__nav-wrapper { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 70px 30px 15px; max-width: 1500px; margin-left: auto; margin-right: auto; transition: padding 0.3s ease-in-out 0s; } @media (min-width: 1024px) { .header .header__nav-background .header__nav-wrapper { padding: 24px; align-items: flex-start; } } .header .header__nav-background .header__nav-wrapper > a { flex: 0 0 auto; } .header .header__nav-background .header__nav-wrapper .header__logo { width: 100px; height: auto; flex: 0 0 auto; margin-right: auto; transition: width 0.3s ease-in-out 0s; } @media (min-width: 768px) { .header .header__nav-background .header__nav-wrapper .header__logo { width: 144px; } } @media (min-width: 1024px) { .header .header__nav-background .header__nav-wrapper .header__logo { width: 200px; } } @media (min-width: 1450px) { .header .header__nav-background .header__nav-wrapper .header__logo { width: 300px; } } .header .header__nav-background .header__nav-wrapper .header__nav__mobile-cart-icon { display: none; } @media (max-width: 1023px) { .header .header__nav-background .header__nav-wrapper .header__nav__mobile-cart-icon { display: block; margin-left: auto; margin-right: 20px; padding: 0 10px; font-size: 1.2rem; } } .header .header__headline-wrapper { /* slightly transparent fallback */ background-color: var(--bg-color-fallback); /* if backdrop support: very transparent and blurred */ border-radius: 30px; border: 1px solid var(--dsj-yellow); padding: 20px; position: absolute; inset: auto 15px 30px; text-align: center; z-index: 1; } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .header .header__headline-wrapper { background-color: var(--bg-color-blur); backdrop-filter: var(--bg-filter-blur); -webkit-backdrop-filter: var(--bg-filter-blur); } } @media (min-width: 520px) { .header .header__headline-wrapper { inset: auto 30px 30px; } } @media (min-width: 768px) { .header .header__headline-wrapper { text-align: left; padding: 35px; bottom: 50px; } } @media (min-width: 1024px) { .header .header__headline-wrapper { padding: 50px; bottom: 50px; } } @media (min-width: 1450px) { .header .header__headline-wrapper { left: 50%; right: auto; transform: translateX(-50%); width: 1390px; } } .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item { position: relative; transition: color 0.3s ease-in-out 0s; } .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:hover { color: #F5952D; } .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child) { margin-right: 30px; } @media (min-width: 768px) { .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child) { margin-right: 35px; } } @media (min-width: 1024px) { .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child) { margin-right: 40px; } } @media (min-width: 1450px) { .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child) { margin-right: 50px; } } .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child)::after { position: absolute; content: "\f105"; font-family: "Font Awesome 6 Pro"; font-weight: 300; inset: 0px -25px auto auto; display: block; width: 25px; text-align: center; color: var(--dark-grey); } @media (min-width: 768px) { .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child)::after { width: 30px; right: -30px; } } @media (min-width: 1024px) { .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child)::after { width: 40px; right: -40px; } } @media (min-width: 1450px) { .header .header__headline-wrapper .header__breadcrumb .breadcrumb__item:not(:last-child)::after { font-size: 0.882354em; top: 2px; right: -45px; } } .header__nav-background.sticky { box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.02), 0 0 2px rgba(0, 0, 0, 0.028), 0 0 3.8px rgba(0, 0, 0, 0.035), 0 0 6.7px rgba(0, 0, 0, 0.042), 0 0 12.5px rgba(0, 0, 0, 0.05), 0 0 30px rgba(0, 0, 0, 0.07); } @media (min-width: 1024px) { .header__nav-background.sticky .header__nav-wrapper { padding-bottom: 0; } .header__nav-background.sticky .header__nav-wrapper .header__logo { width: 150px; } .header__nav-background.sticky .header__nav-wrapper .header__nav { margin-top: 10px; } .header__nav-background.sticky .header__nav-wrapper .header__nav .nav__root .dropdown__sub { top: 90%; } .header__nav-background.sticky .header__nav-wrapper .nav__root.js-navLink .submenu { padding-top: 0; } .header__nav-background.sticky .header__nav-wrapper .nav__root.js-navLink .submenu .dropdown__sub:before { top: 0; } } .footer { background: var(--light-grey); border-top: 1px solid var(--dsj-yellow); padding: 50px 0 20px; margin-top: 30px; } @media (min-width: 768px) { .footer { margin-top: 50px; } } @media (min-width: 1450px) { .footer { margin-top: 100px; } } .footer a { text-decoration: none; transition: color 0.3s ease-in-out 0s; } .footer a:hover { text-decoration: none; color: var(--dsj-yellow); } @media (min-width: 1450px) { .footer .footer__head-wrapper { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } } .footer .footer__section { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 1024px) { .footer .footer__section { margin-top: 50px; margin-bottom: 50px; } } .footer .footer__section ul, .footer .footer__section ol { color: var(--text-color); } .footer .footer__section ul li, .footer .footer__section ol li { position: relative; display: block; } .footer .footer__section ul li:not(:last-child), .footer .footer__section ol li:not(:last-child) { margin-bottom: 15px; } @media (min-width: 768px) { .footer .footer__section ul li:not(:last-child), .footer .footer__section ol li:not(:last-child) { margin-bottom: 0; } } @media (min-width: 768px) { .footer .footer__section ul, .footer .footer__section ol { display: grid; grid-template-columns: 1fr 1fr 1fr; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 30px 55px; } } .footer .footer__section ul { padding-left: 25px; } .footer .footer__section ul li::before { position: absolute; content: "\f105"; font-family: "Font Awesome 6 Pro"; font-weight: 300; color: var(--dsj-yellow); inset: 5px auto auto -30px; display: block; width: 30px; text-align: center; } .footer .footer__section ol { counter-reset: item; padding-left: 30px; } .footer .footer__section ol li::before { display: inline-block; content: counters(item, ".") "."; counter-increment: item; text-align: center; color: var(--dsj-yellow); font-weight: 300; width: 1.8em; margin-left: -1.8em; } .footer .footer__mini-nav { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 0.666667rem; } @media (min-width: 768px) { .footer .footer__mini-nav { justify-content: flex-start; margin-top: 50px; gap: 30px; } } .footer .footer__mini-nav i { color: var(--dsj-yellow); margin-right: 10px; } .top-events-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 20px; justify-items: stretch; align-items: stretch; } @media (min-width: 768px) { .top-events-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .top-events-grid { gap: 40px; } } @media (min-width: 1800px) { .top-events-grid { gap: 60px; } } .form-grid { display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 15px; justify-items: stretch; align-items: flex-start; } @media (min-width: 520px) { .form-grid { column-gap: 30px; row-gap: 20px; } } .form-grid:not(:last-child) { margin-bottom: 30px; } @media (min-width: 768px) { .form-grid:not(:last-child) { margin-bottom: 50px; } } .form-grid .col-1 { grid-column: auto/span 6; } @media (min-width: 520px) { .form-grid .col-1 { grid-column: auto/span 1; } } .form-grid .col-2 { grid-column: auto/span 6; } @media (min-width: 520px) { .form-grid .col-2 { grid-column: auto/span 2; } } .form-grid .col-3 { grid-column: auto/span 6; } @media (min-width: 520px) { .form-grid .col-3 { grid-column: auto/span 3; } } .form-grid .col-4 { grid-column: auto/span 6; } @media (min-width: 520px) { .form-grid .col-4 { grid-column: auto/span 4; } } .form-grid .col-5 { grid-column: auto/span 6; } @media (min-width: 520px) { .form-grid .col-5 { grid-column: auto/span 5; } } .form-grid .col-6 { grid-column: auto/span 6; } .page-with-sidebar { max-width: 1390px; padding-left: 15px; padding-right: 15px; margin: 30px auto; display: grid; gap: 80px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "main" "sidebar"; align-items: flex-start; } @media (min-width: 768px) { .page-with-sidebar { margin-top: 50px; margin-bottom: 50px; } } @media (min-width: 1450px) { .page-with-sidebar { margin-top: 100px; margin-bottom: 100px; } } @media (min-width: 768px) { .page-with-sidebar { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main sidebar"; gap: 30px; padding-left: 15px; padding-right: 15px; } } @media (min-width: 1024px) { .page-with-sidebar { gap: 50px; } } @media (min-width: 1800px) { .page-with-sidebar { gap: 80px; } } .page-with-sidebar .page__main { grid-area: main; } .page-with-sidebar .page__main .headline { word-break: break-word; } .page-with-sidebar .page__main .section:first-child, .page-with-sidebar .page__main .content-wrapper:first-child { margin-top: 0; } .page-with-sidebar .page__main .content-wrapper:last-child { margin-bottom: 0; } .page-with-sidebar .page__main .container, .page-with-sidebar .page__main .content-wrapper { padding-left: 0; padding-right: 0; } .page-with-sidebar .page__sidebar { grid-area: sidebar; } .four-columns { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 20px; justify-items: stretch; align-items: stretch; } @media (min-width: 768px) { .four-columns { grid-template-columns: 1fr 1fr; } } @media (min-width: 1450px) { .four-columns { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; } } @media (min-width: 1800px) { .four-columns { gap: 60px; } } .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 0; justify-items: stretch; align-items: stretch; margin-top: 30px; margin-bottom: 30px; } @media (min-width: 768px) { .gallery-grid { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 1450px) { .gallery-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } } .gallery-grid img { object-fit: cover; width: 100%; } .gallery-grid.only-one-img { grid-template-columns: 1fr; } .gallery-grid.only-one-img .thumb { display: none; } .gallery-grid.only-one-img .thumb:first-child { display: block; } .section { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 768px) { .section { margin-top: 50px; margin-bottom: 50px; } } @media (min-width: 1450px) { .section { margin-top: 100px; margin-bottom: 100px; } } .section::after { content: ""; display: block; clear: both; } .section--sidebar { max-width: 1390px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; display: grid; gap: 80px; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "main" "sidebar"; align-items: flex-start; } @media (min-width: 768px) { .section--sidebar { grid-template-columns: 1fr 340px; grid-template-areas: "main sidebar"; padding-left: 15px; padding-right: 15px; } } .section--sidebar .section__main { grid-area: main; } .section--sidebar .section__main .headline { word-break: break-word; } .section--sidebar .section__main .content-wrapper:nth-child(1 of .content-wrapper) { margin-top: 0; } .section--sidebar .section__main .content-wrapper:nth-last-child(1 of .content-wrapper) { margin-bottom: 0; } .section--sidebar .section__sidebar { grid-area: sidebar; } .section__main > .sidebar__component { width: calc(100% - 30px); margin-inline: auto; } @media (min-width: 768px) { .section__main > .sidebar__component { display: none; } } #bewegungskita #logos.fixed_logobar { position: fixed; z-index: 100; top: 100px; left: 0; width: 100%; background-color: white; padding: 15px 0 10px; box-shadow: 0 0 0.8px rgba(0, 0, 0, 0.02), 0 0 2px rgba(0, 0, 0, 0.028), 0 0 3.8px rgba(0, 0, 0, 0.035), 0 0 6.7px rgba(0, 0, 0, 0.042), 0 0 12.5px rgba(0, 0, 0, 0.05), 0 0 30px rgba(0, 0, 0, 0.07); } @media (min-width: 768px) { #bewegungskita #logos.fixed_logobar { top: 114px; } } @media (min-width: 1024px) { #bewegungskita #logos.fixed_logobar { top: 86px; } } @media (min-width: 1450px) { #bewegungskita #logos.fixed_logobar { top: 97px; } } #bewegungskita #logos.fixed_logobar .logo-content { margin-left: auto; margin-right: auto; max-width: 1390px; flex-wrap: nowrap; } @media (min-width: 768px) { #bewegungskita #logos.fixed_logobar .logo-content { flex-wrap: wrap; } } #bewegungskita #logos.fixed_logobar .logo-content img { max-height: 40px; } @media (min-width: 768px) { #bewegungskita #logos.fixed_logobar .logo-content img { max-height: 60px; } } .header__nav { height: 100%; width: calc(100vw - 90px); max-width: 520px; background-color: var(--dsj-yellow); position: relative; color: white; padding: 90px 0 0; transition: all 0.3s ease-in-out 0s; } @media (min-width: 1024px) { .header__nav { color: black; height: auto; padding: 0; background-color: transparent; width: 100%; max-width: none; font-size: 1.3rem; margin-top: 20px; } } @media (min-width: 1450px) { .header__nav { font-size: 1.66rem; margin-top: 25px; } } .header__nav > ul { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; width: 100%; max-width: 500px; margin: 0 auto; } @media (min-width: 1024px) { .header__nav > ul { flex-direction: row; justify-content: flex-end; max-width: none; } } .header__nav .nav__root { font-weight: 200; font-size: 1.3rem; cursor: pointer; position: relative; width: 100%; text-align: center; padding: 0 15px; } .header__nav .nav__root > span, .header__nav .nav__root > a > span { display: inline-block; position: relative; padding: 5px 10px; } @media (min-width: 1024px) { .header__nav .nav__root > span, .header__nav .nav__root > a > span { padding: 10px 15px; } } @media (min-width: 768px) { .header__nav .nav__root { font-size: 1.66rem; } } @media (min-width: 1024px) { .header__nav .nav__root { color: black; font-size: 1.3rem; padding: 0; width: auto; transition: all 0.3s ease-in-out 0s; } .header__nav .nav__root:hover { color: var(--dsj-yellow); } } @media (min-width: 1450px) { .header__nav .nav__root { font-size: 1.66rem; } } .header__nav .nav__root .submenu { display: none; position: relative; } @media (min-width: 1024px) { .header__nav .nav__root .submenu { position: absolute; padding-top: 30px; top: 100%; left: 50%; transform: translateX(-50%); } } .header__nav .nav__root .submenu .dropdown__sub { background-color: white; color: black; padding: 20px 15px 15px; border-radius: 10px; } .header__nav .nav__root .submenu .dropdown__sub::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 20px 0 20px; border-color: var(--dsj-yellow) transparent transparent transparent; top: 0; position: absolute; left: 50%; transform: translateX(-50%); } @media (min-width: 1024px) { .header__nav .nav__root .submenu .dropdown__sub::before { top: 30px; } } @media (min-width: 1024px) { .header__nav .nav__root .submenu .dropdown__sub { width: 300px; box-shadow: 0px 0.8px 1.1px rgba(0, 0, 0, 0.02), 0px 2px 2.7px rgba(0, 0, 0, 0.028), 0px 3.8px 5px rgba(0, 0, 0, 0.035), 0px 6.7px 8.9px rgba(0, 0, 0, 0.042), 0px 12.5px 16.7px rgba(0, 0, 0, 0.05), 0px 30px 40px rgba(0, 0, 0, 0.07); } } .header__nav .nav__root .submenu .dropdown__sub .nav__link { font-size: 1rem; word-break: break-word; position: relative; padding-top: 5px; } .header__nav .nav__root .submenu .dropdown__sub .nav__link:not(:last-child) { padding-bottom: 5px; } .header__nav .nav__root .submenu .dropdown__sub .nav__link:not(:last-child)::after { display: block; content: ""; width: 20px; height: 1px; background-color: var(--dsj-yellow); bottom: 0; position: absolute; left: 50%; transform: translateX(-50%); } .header__nav .nav__root .submenu .dropdown__sub .nav__link a:hover { color: var(--dsj-yellow); } .header__nav .nav__root > a + .submenu { display: block; } @media (min-width: 1024px) { .header__nav .nav__root > a + .submenu { display: none; } } .header-mobile-wrapper { width: 100%; overscroll-behavior: contain; } @media (max-width: 1023px) { .header-mobile-wrapper { position: fixed; min-height: 100vh; height: 100%; top: 0; left: -100%; transition: all 0.3s ease-in-out 0s; } .header-mobile-wrapper.menu-open { left: 0; } .header-mobile-wrapper.menu-open .header__nav { box-shadow: 2.5px 0.6px 2.2px rgba(0, 0, 0, 0.02), 6px 1.3px 5.3px rgba(0, 0, 0, 0.028), 11.3px 2.5px 10px rgba(0, 0, 0, 0.035), 20.1px 4.5px 17.9px rgba(0, 0, 0, 0.042), 37.6px 8.4px 33.4px rgba(0, 0, 0, 0.05), 90px 20px 80px rgba(0, 0, 0, 0.07); overflow-y: auto; } } .burger-menu { position: relative; height: 30px; width: 30px; } @media (min-width: 1024px) { .burger-menu { display: none; } } .burger-menu::before, .burger-menu::after { display: block; content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 5px; background-color: black; transition: all ease-out 0.4s 0s; } .burger-menu:before { top: 9px; } .burger-menu::after { bottom: 9px; } .burger-menu.menu-open::before { transform: translate(0, 5px) rotate(225deg); } .burger-menu.menu-open::after { transform: translate(0, -5px) rotate(-225deg); } .header__tools { position: absolute; inset: 10px 10px auto; display: flex; align-items: center; justify-content: flex-end; font-weight: 300; font-size: 0.85rem; } @media (min-width: 768px) { .header__tools { inset: 10px 30px auto; } } @media (min-width: 1024px) { .header__tools { font-size: 0.65rem; } } .header__tools .tools__contrast { display: flex; justify-content: flex-start; align-items: baseline; margin-left: 15px; cursor: pointer; } .header__tools .tools__contrast > i { margin-right: 5px; } @media (min-width: 768px) { .header__tools .tools__contrast { margin-left: 30px; } } @media (min-width: 1024px) { .header__tools .tools__contrast { transition: color 0.3s ease-in-out 0s; } .header__tools .tools__contrast:hover { color: #F5952D; } } .header__tools .tools__easy-language { display: flex; justify-content: flex-start; align-items: center; cursor: pointer; } .header__tools .tools__easy-language > img { width: 25px; height: auto; margin-right: 5px; } @media (min-width: 1024px) { .header__tools .tools__easy-language { transition: color 0.3s ease-in-out 0s; } .header__tools .tools__easy-language:hover { color: #F5952D; } } .header__tools .tools__fontsize { display: flex; justify-content: space-between; align-items: baseline; margin-left: 15px; padding: 2px 2px 0; border-radius: 4px; } @media (max-width: 1023px) { .header__tools .tools__fontsize { /* slightly transparent fallback */ background-color: var(--bg-color-fallback); /* if backdrop support: very transparent and blurred */ } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .header__tools .tools__fontsize { background-color: var(--bg-color-blur); backdrop-filter: var(--bg-filter-blur); -webkit-backdrop-filter: var(--bg-filter-blur); } } } @media (min-width: 768px) { .header__tools .tools__fontsize { margin-left: 30px; } } @media (min-width: 1024px) { .header__tools .tools__fontsize { padding: 0; border-radius: 0; } } .header__tools .tools__fontsize .font__letter { cursor: pointer; transition: color 0.3s ease-in-out 0s; text-align: center; line-height: 1.25rem; width: 1.25rem; } @media (min-width: 1024px) { .header__tools .tools__fontsize .font__letter { width: 0.7rem; } .header__tools .tools__fontsize .font__letter:hover { color: #F5952D; } } .header__tools .tools__fontsize .font__letter.font__letter--smaller { font-size: 0.75em; } .header__tools .tools__fontsize .font__letter.font__letter--bigger { font-size: 1.25em; } .header__tools .tools__language { margin-left: 15px; } @media (min-width: 768px) { .header__tools .tools__language { margin-left: 30px; } } .header__tools .tool__search { display: none; width: 80px; transition: all 0.3s ease-in-out 0s; margin-left: 15px; position: relative; } @media (min-width: 520px) { .header__tools .tool__search { display: flex; align-items: baseline; } } @media (min-width: 768px) { .header__tools .tool__search { margin-left: 30px; } } @media (min-width: 1024px) { .header__tools .tool__search { width: 100px; } } .header__tools .tool__search:hover .search__label { color: #F5952D; } .header__tools .tool__search:hover .search__input { border-color: #F5952D; } .header__tools .tool__search .search__label { color: black; transition: inherit; margin-right: 10px; cursor: pointer; } .header__tools .tool__search .search__input { width: 100%; transition: inherit; border-bottom: 1px solid transparent; padding: 0 4px; } .header__tools .tool__search .search__input:focus { border-color: #F5952D; } .header__slider { height: 100%; } .header__slider .header__slide { position: relative; height: 100%; } .header__slider .header__slide .slide__img { width: 100%; height: 100%; object-fit: cover; } .header__slider .header__slide .slide__headline-wrapper { /* slightly transparent fallback */ background-color: var(--bg-color-fallback); /* if backdrop support: very transparent and blurred */ border-radius: 30px; border: 1px solid var(--dsj-yellow); padding: 20px; position: absolute; inset: auto 15px 30px; text-align: center; z-index: 1; bottom: 60px; } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .header__slider .header__slide .slide__headline-wrapper { background-color: var(--bg-color-blur); backdrop-filter: var(--bg-filter-blur); -webkit-backdrop-filter: var(--bg-filter-blur); } } @media (min-width: 520px) { .header__slider .header__slide .slide__headline-wrapper { inset: auto 30px 30px; } } @media (min-width: 768px) { .header__slider .header__slide .slide__headline-wrapper { padding: 35px; } } @media (min-width: 1024px) { .header__slider .header__slide .slide__headline-wrapper { padding: 50px; bottom: 90px; } } @media (min-width: 1450px) { .header__slider .header__slide .slide__headline-wrapper { left: 50%; right: auto; transform: translateX(-50%); width: 1390px; } } .header__slider .slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; cursor: pointer; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); font-size: 40px; color: white; transition: color 0.3s ease-in-out 0s; } .header__slider .slider__arrow:hover { color: #F5952D; } @media (min-width: 768px) { .header__slider .slider__arrow { font-size: 60px; } } @media (min-width: 1024px) { .header__slider .slider__arrow { font-size: 80px; } } .header__slider .slider__arrow.slider__arrow--prev { left: 15px; right: auto; } @media (min-width: 768px) { .header__slider .slider__arrow.slider__arrow--prev { left: 30px; } } .header__slider .slider__arrow.slider__arrow--next { right: 15px; left: auto; } @media (min-width: 768px) { .header__slider .slider__arrow.slider__arrow--next { right: 30px; } } .header__slider .slick-list, .header__slider .slick-track { height: 100%; } .header__slider .slick-dots { position: absolute; inset: auto 0 10px 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; cursor: pointer; bottom: 42px; } @media (min-width: 1024px) { .header__slider .slick-dots { bottom: 55px; } } .header__slider .slick-dots li { font-size: 0; color: white; height: 10px; width: 10px; border-radius: 100%; background-color: white; border: 1px solid var(--dsj-yellow); transition: background-color 0.3s ease-in-out 0s; } @media (min-width: 1024px) { .header__slider .slick-dots li { height: 20px; width: 20px; } } .header__slider .slick-dots li:not(:last-child) { margin-right: 10px; } .header__slider .slick-dots li:hover { background-color: var(--dsj-yellow); } .header__slider .slick-dots li.slick-active { color: var(--dsj-yellow); background-color: var(--dsj-yellow); } .button { border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease-in-out 0s; font-weight: 300; border: 1px solid var(--dsj-yellow); background-color: white; padding: 10px 20px; display: inline-block; } .button:hover { background-color: var(--dsj-yellow); } .button:focus { border-color: var(--dark-grey); } .button.button--rounded { border-radius: 50px; } .button.button--fullwidth { width: 100%; text-align: center; } .button.button--yellow { background-color: var(--dsj-yellow); color: white; transition: background-color ease-in-out 0.3s, color ease-in-out 0.3s; } .button.button--yellow:hover { background-color: white; color: black; } .button.button--xs { padding: 2px 5px; font-size: 0.6rem; } .button.button--sm { padding: 5px 15px; } .button.button--sm .icon-left { margin-right: 0.4em; } .button.button--sm .icon-right { margin-left: 0.4em; } .button.button--xl { font-size: 1.444444rem; padding: 17px 35px; width: 100%; max-width: 500px; line-height: 1; display: flex; align-items: center; justify-content: center; margin-inline: auto; } .button.button--xl:not(:last-child) { margin-bottom: 35px; } .button.button--xl .icon-left { margin-right: 0.9em; font-size: 1.15em; } .button.button--xl .icon-right { font-size: 1.15em; margin-left: 0.9em; } .button .icon-left { margin-right: 0.6em; } .button .icon-right { margin-left: 0.6em; } .button.button--download { border: none; position: relative; transition: all 0.3s ease-in-out 0s; } .button.button--download:not(:last-of-type) { margin-bottom: 20px; } .button.button--download:hover { color: white; } .button .button__tooltip { position: absolute; opacity: 1; background-color: var(--dsj-green); color: white; font-size: 0.7em; width: max-content; padding: 2px 5px; border-radius: 10px; bottom: calc(100% - 10px); right: -10px; transition: opacity 0.3s ease-out, transform 0.2s ease-in-out 50ms; } .button.btn-contact { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--dsj-yellow); background-color: var(--dsj-yellow); color: white; } .button.btn-contact.btn-show-more { justify-content: center; } .button.btn-contact.btn-show-more.active:hover { border: 1px solid var(--dsj-yellow); background-color: white; color: black; } .button.btn-contact.btn-show-more.active .fa-angle-down { display: none; } .button.btn-contact.btn-show-more.active .fa-angle-up { display: inline-block; } .button.btn-contact.btn-show-more .fa-angle-up { display: none; } @media (hover: hover) { .button .button__tooltip { opacity: 0; transform: translateY(5px); } .button:hover .button__tooltip { opacity: 1; transform: translateY(0); } } .btn { border-radius: 10px; cursor: pointer; font-weight: 300; } .btn.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--dsj-yellow); --bs-btn-border-color: var(--dsj-yellow); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--dsj-yellow); --bs-btn-hover-border-color: var(--dsj-yellow); --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--dsj-yellow); --bs-btn-active-border-color: var(--dsj-yellow); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--dsj-yellow); --bs-btn-disabled-border-color: var(--dsj-yellow); } .btn.btn-primary:hover { background-color: white; color: black; } .btn.btn-turquoise { --bs-btn-hover-border-color: rgb(0, 168, 137); --bs-btn-border-color: rgb(0, 168, 137); --bs-btn-bg: rgb(0, 168, 137); } .news-img-wrap { margin-bottom: 30px; } @media (min-width: 768px) { .news-img-wrap { margin-bottom: 50px; } } @media (min-width: 1450px) { .news-img-wrap { margin-bottom: 70px; } } .news-img-wrap .mediaelement:not(:last-of-type) { margin-bottom: 15px; } .news-img-wrap .mediaelement img { width: 100%; height: auto; } .news-teaser-text { font-weight: 500; margin-bottom: 30px; } .content-slider { overflow: hidden; position: relative; margin-top: 30px; padding-bottom: calc(30px * 2); } @media (min-width: 768px) { .content-slider { margin-top: 50px; padding-bottom: calc(50px * 1.5); } } @media (min-width: 1450px) { .content-slider { margin-top: 100px; padding-bottom: 100px; } } .content-slider .content-slider__head { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; } @media (min-width: 520px) { .content-slider .content-slider__head { flex-direction: row; align-items: center; } } @media (min-width: 768px) { .content-slider .content-slider__head { margin-bottom: 40px; } } @media (min-width: 1450px) { .content-slider .content-slider__head { margin-bottom: 60px; } } @media (min-width: 1800px) { .content-slider .content-slider__head { margin-bottom: 80px; } } .content-slider .content-slider__head .head__controls { display: flex; justify-content: space-between; width: 6.5rem; margin-left: 5px; } @media (min-width: 520px) { .content-slider .content-slider__head .head__controls { margin-left: 20px; } } @media (min-width: 768px) { .content-slider .content-slider__head .head__controls { margin-left: 30px; width: 6.4rem; } } @media (min-width: 1024px) { .content-slider .content-slider__head .head__controls { margin-left: 40px; width: 9rem; } } @media (min-width: 1800px) { .content-slider .content-slider__head .head__controls { margin-left: 50px; width: 11rem; } } .content-slider .content-slider__head .button { padding: 7px 12px; font-size: 1rem; } @media (min-width: 768px) { .content-slider .content-slider__head .button { padding: 8px 15px; } } @media (min-width: 1024px) { .content-slider .content-slider__head .button { font-size: 1.5rem; padding: 7px 20px; } } @media (min-width: 1800px) { .content-slider .content-slider__head .button { font-size: 2rem; padding: 7px 21px; } } .content-slider .content-slider__content-track { display: flex; gap: 50px; flex-wrap: nowrap; align-items: stretch; position: relative; } @media (min-width: 1450px) { .content-slider .content-slider__content-track { gap: 80px; } } .content-slider .content-slider__content-track .slider__content { position: relative; width: 75vw; flex: 0 0 auto; max-width: 500px; overflow: hidden; display: flex; flex-direction: column; justify-content: stretch; border-radius: 30px; box-shadow: 0 0.7px 1.7px rgba(0, 0, 0, 0.022), 0 1.7px 4.3px rgba(0, 0, 0, 0.031), 0 3.5px 8.9px rgba(0, 0, 0, 0.039), 0 7.3px 18.3px rgba(0, 0, 0, 0.048), 0 20px 50px rgba(0, 0, 0, 0.07); } @media (min-width: 768px) { .content-slider .content-slider__content-track .slider__content { width: 40vw; } } @media (min-width: 1450px) { .content-slider .content-slider__content-track .slider__content { width: 24vw; } } @media (min-width: 1800px) { .content-slider .content-slider__content-track .slider__content { width: 22vw; max-width: 420px; } } .content-slider .content-slider__content-track .slider__content .content__wrapper { padding: 20px; display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; } @media (min-width: 1024px) { .content-slider .content-slider__content-track .slider__content .content__wrapper { padding: 20px 30px 30px; } } .content-slider .content-slider__content-track .slider__content .content__wrapper .button { margin-left: auto; margin-top: auto; } .content-slider .content-slider__content-track .slider__content .content__wrapper .meta-info-pill { margin-bottom: 10px; } .content-slider .content-slider__content-track .slider__content .content__wrapper .meta-info-pill:not(:last-of-type) { margin-right: 15px; } .content-slider .content-slider__content-track .slider__content .content__wrapper .field-of-action { margin-top: 10px; } .content-slider .content-slider__content-track .slider__content .content__img { width: 100%; height: 230px; object-fit: cover; flex: 0 0 auto; } .content-slider .content-slider__content-track .slider__content .image-source { position: absolute; top: 200px; right: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; border-top-left-radius: 5px; padding: 5px 10px; color: white; background-color: rgba(125, 125, 125, 0.7); height: 30px; width: auto; max-width: 100%; font-size: 14px; } .content-slider .content-slider__content-track .slider__content .image-source i { margin-right: 10px; } .content-slider .content-slider__content-track .slider__content .image-source p { box-sizing: border-box; overflow: hidden; max-width: 100%; word-break: break-word; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; } .content-slider .content-slider__content-track .slider__content .content__headline { line-height: 1.5; font-size: 1.25rem; font-weight: 400; margin-bottom: 10px; } @media (min-width: 1024px) { .content-slider .content-slider__content-track .slider__content .content__headline { font-size: 1.4rem; } } .content-slider .content-slider__content-track .slider__content .content__headline .headline__subheading { font-size: 1.1rem; font-weight: 300; line-height: 1.5; display: block; } .content-slider .content-slider__content-track .slider__content .content__intro { margin-bottom: 20px; } .content-slider .content-slider__content-track .slider__content .content__subheading { line-height: 1.3; font-size: 1rem; font-weight: 300; margin-bottom: 10px; } @media (min-width: 1024px) { .content-slider .content-slider__content-track .slider__content .content__subheading { font-size: 1.1rem; } } .content-slider .content-slider__content-track .slider__content .content__link { word-break: break-word; text-decoration: none; } .content-slider .content-slider__content-track .slider__content .content__link .fa-light { color: var(--dsj-yellow); margin-right: 5px; } .content-slider .content-slider__content-track .slider__content .content__link:hover { text-decoration: none; color: #F5952D; } .cta-section { height: 525px; width: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 30px 15px; } .cta-section .cta__content { display: flex; flex-direction: column; align-items: center; border-radius: 30px; max-width: 1390px; padding: 30px; /* slightly transparent fallback */ background-color: var(--bg-color-fallback); /* if backdrop support: very transparent and blurred */ } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .cta-section .cta__content { background-color: var(--bg-color-blur); backdrop-filter: var(--bg-filter-blur); -webkit-backdrop-filter: var(--bg-filter-blur); } } @media (min-width: 1024px) { .cta-section .cta__content { padding: 50px; } } @media (min-width: 1450px) { .cta-section .cta__content { width: 42%; } } .cta-section .cta__content .button { border-radius: 20px; margin-top: 10px; margin-bottom: 10px; } .cta-section .cta__content p { text-align: center; } .cta-section .cta__content > a:not(.button) { font-size: 0.8rem; text-decoration: none; } .cta-section .cta__content > a:not(.button):hover { color: #F5952D; } .content-overview { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 40px 20px; justify-items: stretch; align-items: stretch; margin-top: 30px; } @media (min-width: 520px) { .content-overview { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .content-overview { column-gap: 40px; } } @media (min-width: 1024px) { .content-overview { grid-template-columns: repeat(3, 1fr); gap: 60px 80px; margin-top: 50px; } } @media (min-width: 1450px) { .content-overview { gap: 80px 100px; } } @media (min-width: 520px) { .content-overview.two-col { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .content-overview.two-col { column-gap: 15px; } } @media (min-width: 1024px) { .content-overview.two-col { gap: 30px; } } @media (min-width: 1450px) { .content-overview.two-col { gap: 30px; } } .content-overview.two-col .content-wrapper { margin: 0; } @media (min-width: 520px) { .content-overview.three-col { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .content-overview.three-col { column-gap: 30px; } } @media (min-width: 1024px) { .content-overview.three-col { grid-template-columns: repeat(3, 1fr); gap: 30px; } } @media (min-width: 1450px) { .content-overview.three-col { gap: 50px; } } .content-overview.three-col .content-wrapper { margin: 0; } .content-overview .content-overview__cell { display: flex; flex-direction: column; position: relative; padding-top: 120px; } .content-overview .content-overview__cell.no-img { padding-top: 0; } .content-overview .content-overview__cell .cell__img, .content-overview .content-overview__cell .cell__logo { position: absolute; top: 0; width: 100px; height: 100px; object-fit: cover; border-radius: 100%; border: 3px solid var(--dsj-yellow); } .content-overview .content-overview__cell .cell__logo { object-fit: contain; } .content-overview .content-overview__cell .cell__headline { line-height: 1.45; font-size: 1.333333rem; font-weight: 300; margin-bottom: 10px; } .content-overview .content-overview__cell .cell__description { font-size: 0.8rem; } .content-overview .content-overview__cell .cell__description > *:last-child { margin-bottom: 0; } .content-overview .content-overview__cell .cell__address { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; border-top: 1px solid var(--dsj-yellow); padding-top: 10px; } .content-overview .content-overview__cell .cell__address .address__name { font-weight: 400; word-break: break-word; } .content-overview .content-overview__cell .cell__address .address__link { word-break: break-word; text-decoration: none; } .content-overview .content-overview__cell .cell__address .address__link .fa-light { color: var(--dsj-yellow); margin-right: 10px; } .content-overview .content-overview__cell .cell__address .address__link:hover { text-decoration: none; color: var(--dsj-yellow); } .content-overview .content-overview__cell .cell__address .button { margin-top: 5px; } .sidebar__component .content-overview.active .content-overview__cell { display: flex; } .sidebar__component .content-overview .content-overview__cell { display: none; } .sidebar__component .content-overview .content-overview__cell:first-of-type, .sidebar__component .content-overview .content-overview__cell:nth-of-type(2), .sidebar__component .content-overview .content-overview__cell:nth-of-type(3) { display: block; } .sidebar__component .content-overview .btn-contact.btn-show-more { display: none; } .sidebar__component .content-overview .content-overview__cell:nth-of-type(4) ~ .btn-contact.btn-show-more { display: flex; } .sidebar__component { border-radius: 30px; box-shadow: 0 0.3px 1.1px rgba(0, 0, 0, 0.022), 0 0.9px 2.7px rgba(0, 0, 0, 0.031), 0 1.8px 5.5px rgba(0, 0, 0, 0.039), 0 3.7px 11.3px rgba(0, 0, 0, 0.048), 0 10px 31px rgba(0, 0, 0, 0.07); padding: 30px; } .sidebar__component:not(:last-of-type) { margin-bottom: 30px; } @media (min-width: 768px) { .sidebar__component:not(:last-of-type) { margin-bottom: 50px; } } @media (min-width: 1450px) { .sidebar__component:not(:last-of-type) { margin-bottom: 100px; } } .sidebar__component:not(:first-child) { margin-top: 30px; } @media (min-width: 768px) { .sidebar__component:not(:first-child) { margin-top: 50px; } } @media (min-width: 1450px) { .sidebar__component:not(:first-child) { margin-top: 100px; } } .sidebar__component .content-overview { grid-template-columns: 1fr; } .sidebar__component .content-wrapper, .sidebar__component .section { margin: 0; } .sidebar__component .headline.headline--aside, .sidebar__component .headline.headline--content, .sidebar__component .headline.headline--content-small, .sidebar__component .headline.headline--section { font-weight: 200; font-size: 1.25rem; margin-bottom: 20px; } @media (min-width: 1024px) { .sidebar__component .headline.headline--aside, .sidebar__component .headline.headline--content, .sidebar__component .headline.headline--content-small, .sidebar__component .headline.headline--section { font-size: 1.44444rem; } } .sidebar__navigation { font-weight: 300; margin-top: 20px; } .sidebar__navigation:not(:last-child) { margin-bottom: 20px; } .sidebar__navigation a:hover { color: #F5952D; } .sidebar__navigation .active::before { content: "\f107"; } .sidebar__navigation .active > a { font-weight: 500; } .sidebar__navigation > ul { padding-left: 25px; } .sidebar__navigation > ul > li { position: relative; display: block; color: var(--dark-grey); } .sidebar__navigation > ul > li:not(:last-child) { margin-bottom: 15px; } .sidebar__navigation > ul > li::before { position: absolute; content: "\f105"; font-family: "Font Awesome 6 Pro"; font-weight: 300; color: var(--dsj-yellow); inset: 5px auto auto -30px; display: block; width: 30px; text-align: center; } .sidebar__navigation > ul > li > ul { margin-top: 5px; } .sidebar__navigation > ul > li > ul > li { display: block; font-size: 0.85rem; font-weight: 500; } .sidebar__navigation > ul > li > ul > li:not(:last-child) { margin-bottom: 10px; } .sidebar__navigation > ul > li > ul > li > ul { padding-left: 20px; } .sidebar__navigation > ul > li > ul > li > ul > li { margin-top: 5px; } .media-wrapper .article__media a { display: contents; } .media-wrapper .article__media img { object-fit: contain; width: 100%; height: auto; } .media-wrapper .article__media video { width: 100%; } .media-wrapper .article__media .media__caption { margin-top: 0; font-size: 0.8em; } .media-wrapper.media--above .article__media, .media-wrapper.media--below .article__media { width: 100%; } .media-wrapper.media--intext .article__media { width: 100%; margin-bottom: 20px; } @media (min-width: 768px) { .media-wrapper.media--intext .article__media { max-width: 340px; } } @media (min-width: 1024px) { .media-wrapper.media--intext .article__media { margin-bottom: 30px; } } @media (min-width: 1800px) { .media-wrapper.media--intext .article__media { max-width: 500px; } } @media (min-width: 768px) { .media-wrapper.media--intext.media--right .article__media { float: right; margin-left: 20px; } } @media (min-width: 1024px) { .media-wrapper.media--intext.media--right .article__media { margin-left: 40px; } } @media (min-width: 768px) { .media-wrapper.media--intext.media--left .article__media { float: left; margin-right: 20px; } } @media (min-width: 1024px) { .media-wrapper.media--intext.media--left .article__media { margin-right: 40px; } } .media-wrapper.media--intext.media--nowrap { display: grid; grid-gap: 20px; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "media" "content"; } .media-wrapper.media--intext.media--nowrap .article__media { grid-area: media; margin: 0; max-width: unset; } .media-wrapper.media--intext.media--nowrap .article__content { grid-area: content; } @media (min-width: 768px) { .media-wrapper.media--intext.media--nowrap.media--right { grid-template-columns: 1fr minmax(250px, 340px); grid-template-areas: "content media"; } .media-wrapper.media--intext.media--nowrap.media--left { grid-template-columns: minmax(250px, 340px) 1fr; grid-template-areas: "media content"; } } @media (min-width: 1024px) { .media-wrapper.media--intext.media--nowrap { grid-gap: 40px; } } @media (min-width: 1800px) { .media-wrapper.media--intext.media--nowrap.media--right { grid-template-columns: 1fr 500px; } .media-wrapper.media--intext.media--nowrap.media--left { grid-template-columns: 500px 1fr; } } .media-wrapper.media--upright { display: grid; grid-gap: 20px; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "media" "content"; } @media (min-width: 768px) { .media-wrapper.media--upright.media--right { grid-template-columns: 1fr minmax(250px, 340px); grid-template-areas: "content media"; } .media-wrapper.media--upright.media--left { grid-template-columns: minmax(250px, 340px) 1fr; grid-template-areas: "media content"; } } .media-wrapper.media--upright .article__media--image { height: 100%; } .media-wrapper.media--upright .article__media--image img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: 100%; max-height: 250px; } .media-wrapper.media--upright .article__content { width: auto; } .meta-pill-content { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; } .meta-info-pill { font-size: 0.8rem; padding: 5px 10px; line-height: 1; font-weight: 500; border-radius: 30px; border: 1px solid var(--dsj-yellow); } .meta-info-pill.pill--lg { font-size: 1rem; font-weight: 400; } .meta-info-pill.pill--error { background-color: var(--error-red); color: white; border-color: #c90000; } .meta-info-pill i { margin-right: 5px; } .info-message { border-radius: 20px; border: 1px solid var(--dsj-yellow); padding: 30px; max-width: 80ch; margin-left: auto; margin-right: auto; } .info-message .message__content { text-align: center; } .contenttable { border-collapse: collapse; } .contenttable caption { margin-bottom: 5px; font-weight: 400; } .contenttable thead tr { background-color: var(--light-grey); border-bottom: 2px solid var(--mid-grey); } .contenttable thead tr th { padding: 5px; } .contenttable tbody tr:nth-child(even) { background-color: var(--light-grey); } .contenttable tbody tr th { padding: 5px; } .contenttable tbody tr td { padding: 5px; } .collapsible { border: 1px solid var(--dsj-yellow); border-radius: 30px; padding: 10px 15px; position: relative; margin-bottom: 20px; } @media (min-width: 1024px) { .collapsible { padding: 20px 30px; margin-bottom: 30px; } } .collapsible::after { content: ""; display: block; clear: both; } .collapsible summary { list-style: none; padding-right: 30px; font-size: 1.2rem; line-height: 1.4rem; } .collapsible summary::-webkit-details-marker, .collapsible summary::marker { display: none; } @media (min-width: 1024px) { .collapsible summary { font-size: 1.4rem; line-height: 2rem; } } .collapsible summary:hover { cursor: pointer; } .collapsible summary .summary__subheadline { font-size: 0.8em; font-weight: 500; } .collapsible summary:before, .collapsible summary::after { font-family: "Font Awesome 6 Pro"; font-weight: 300; position: absolute; top: 10px; right: 15px; height: 1.4rem; width: 1.4rem; text-align: center; line-height: 1.4rem; font-size: 1.4rem; transform-origin: center center; transition: opacity 0.5s ease-in, transform 0.3s ease-in; } @media (min-width: 1024px) { .collapsible summary:before, .collapsible summary::after { top: 20px; right: 30px; line-height: 2rem; font-size: 2rem; height: 2rem; width: 2rem; } } .collapsible summary::before { content: "\f056"; opacity: 0; } .collapsible summary::after { content: "\f055"; } .collapsible[open] > summary { margin-bottom: 10px; } @media (min-width: 1024px) { .collapsible[open] > summary { margin-bottom: 20px; } } .collapsible[open] > summary::before { opacity: 1; transform: rotate(180deg); } .collapsible[open] > summary::after { opacity: 0; transform: rotate(180deg); } .collapsible .collapsible { margin-top: 15px; } @media (min-width: 1024px) { .collapsible .collapsible { margin-top: 30px; } } .media-gallery { --_gallery-border-radius: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 275px)); grid-template-rows: auto; gap: 1rem; justify-items: stretch; align-items: start; justify-content: center; margin-top: 30px; margin-bottom: 30px; } @media (min-width: 1024px) { .media-gallery { grid-template-columns: repeat(3, 1fr); gap: 40px; } } .media-gallery .thumb .image { display: flex; position: relative; } .media-gallery .thumb .image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; } .media-gallery .thumb .description { background-color: rgb(232, 232, 232); padding: 5px 10px 10px; display: block; font-size: 0.8rem; line-height: 1.2; } .media-gallery .thumb .description p:not(:last-child) { margin-bottom: 0.2rem; } .section__main .media-gallery .thumb { overflow: hidden; border-radius: var(--_gallery-border-radius); box-shadow: 0 0.3px 1.1px rgba(0, 0, 0, 0.022), 0 0.9px 2.7px rgba(0, 0, 0, 0.031), 0 1.8px 5.5px rgba(0, 0, 0, 0.039), 0 3.7px 11.3px rgba(0, 0, 0, 0.048), 0 10px 31px rgba(0, 0, 0, 0.07); } .section__sidebar .media-gallery { gap: 0; border-radius: var(--_gallery-border-radius); overflow: hidden; box-shadow: 0 0.7px 1.7px rgba(0, 0, 0, 0.022), 0 1.7px 4.3px rgba(0, 0, 0, 0.031), 0 3.5px 8.9px rgba(0, 0, 0, 0.039), 0 7.3px 18.3px rgba(0, 0, 0, 0.048), 0 20px 50px rgba(0, 0, 0, 0.07); grid-template-columns: repeat(3, 1fr); } @media (min-width: 1024px) { .section__sidebar .media-gallery { grid-template-columns: repeat(2, 1fr); } } .section__sidebar .media-gallery .description, .section__sidebar .media-gallery .image-source { display: none; } .pswp.pswp--open { display: flex; flex-direction: column; justify-content: flex-end; } .pswp .pswp__image-caption { background-color: rgb(232, 232, 232); display: block; line-height: 1.3; padding: 0 1rem; box-shadow: 0 0 2.2px rgba(0, 0, 0, 0.02), 0 0 5.3px rgba(0, 0, 0, 0.028), 0 0 10px rgba(0, 0, 0, 0.035), 0 0 17.9px rgba(0, 0, 0, 0.042), 0 0 33.4px rgba(0, 0, 0, 0.05), 0 0 80px rgba(0, 0, 0, 0.07); } .pswp .pswp__image-caption p { max-width: 69ch; margin-inline: auto; margin-bottom: 0.3rem; } .pswp .pswp__image-caption p:last-child { padding-bottom: 1rem; margin-bottom: 0; } .pswp .pswp__image-caption p:first-child { padding-top: 1rem; } .pswp .pswp__image-source { position: relative; margin-left: auto; } .video-js.vjs-big-play-centered .vjs-big-play-button { background-color: var(--dsj-yellow); background-image: linear-gradient(310deg, hsl(31, 91%, 57%) 0%, hsl(31, 85%, 55%) 11%, hsl(31, 80%, 52%) 22%, hsl(31, 76%, 50%) 33%, hsl(31, 78%, 48%) 44%, hsl(31, 81%, 46%) 56%, hsl(31, 85%, 43%) 67%, hsl(31, 89%, 41%) 78%, hsl(31, 95%, 38%) 89%, hsl(31, 100%, 36%) 100%); height: 100px; width: 100px; margin: 0; transform: translate(-50%, -50%); border-radius: 100%; border: none; } .video-js.vjs-big-play-centered .vjs-big-play-button .vjs-icon-placeholder { position: relative; width: 100%; height: 100%; display: block; } .video-js.vjs-big-play-centered .vjs-big-play-button .vjs-icon-placeholder::before { font-family: "Font Awesome 6 Pro"; content: "\f04b"; font-weight: 300; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; } .media-wrapper .article__media video { width: 100%; } .media-wrapper.media--above .article__media, .media-wrapper.media--below .article__media { width: 100%; } .media-wrapper.media--above .article__media.article__media--video iframe, .media-wrapper.media--below .article__media.article__media--video iframe { width: 100%; } .content-wrapper .mediaconsent_element { width: 100%; } .content-wrapper .mediaconsent_element iframe, .content-wrapper .mediaconsent_element blockquote { width: 100%; } .download-wrapper { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; justify-content: flex-start; } .download-wrapper .download__file { border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease-in-out 0s; font-weight: 300; border: 1px solid var(--dsj-yellow); background-color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; } .download-wrapper .download__file:hover { background-color: #F5952D; } .download-wrapper .download__file:focus { border-color: var(--dark-grey); } .download-wrapper .download__file .file__info { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .download-wrapper .download__file .file__info .file__name { font-weight: 400; } .download-wrapper .download__file .file__info .file__size { font-size: 0.8rem; border-radius: 3px; background-color: var(--dsj-green); color: white; padding: 1px 4px; } .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; margin: 20px auto; } @media (min-width: 768px) { .pagination { margin-top: 30px; margin-bottom: 30px; } } .pagination:last-child { margin-top: 40px; margin-bottom: 0; } @media (min-width: 768px) { .pagination:last-child { margin-top: 60px; } } @media (min-width: 1024px) { .pagination:last-child { margin-top: 80px; } } .pagination li a { line-height: 40px; display: block; text-align: center; height: 40px; width: 40px; border-radius: 100%; border: 1px solid var(--dsj-yellow); transition: background-color 0.3s ease-in-out 0s; } .pagination li a:hover { background-color: var(--dsj-yellow); } .pagination li.current a { background-color: var(--dsj-yellow); color: white; } .pagination .previous a, .pagination .next a { position: relative; } .pagination .previous a:after, .pagination .next a:after { position: absolute; top: 0; left: 0; font-family: "Font Awesome 6 Pro"; content: ""; line-height: 40px; display: block; text-align: center; height: 40px; width: 40px; border-radius: 100%; border: 1px solid var(--dsj-yellow); transition: background-color 0.3s ease-in-out 0s; } .pagination .previous a:after { content: "\f053"; } .pagination .next a:after { content: "\f054"; } @keyframes wiggle { 0% { transform: translateY(0); } 50% { transform: translateY(5px); } 100% { transform: translateY(0); } } .scroll-to-top { position: fixed; bottom: 10px; right: 10px; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: var(--dsj-yellow); color: white; font-size: 1rem; border-radius: 100%; opacity: 0; z-index: 555; box-shadow: 0 0 1.9px rgba(0, 0, 0, 0.024), 0 0 5.3px rgba(0, 0, 0, 0.035), 0 0 12.7px rgba(0, 0, 0, 0.046), 0 0 42px rgba(0, 0, 0, 0.07); transition: all 0.3s ease-in-out 0s; } @media (min-width: 1024px) { .scroll-to-top { bottom: 30px; right: 30px; width: 60px; height: 60px; line-height: 60px; font-size: 1.5rem; } } .scroll-to-top.active { opacity: 0.7; } .scroll-to-top.active:hover { opacity: 1; } .scroll-to-top.active:hover .fa-light { animation: wiggle 0.3s 2 0.1s; } .shariff .orientation-horizontal { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(80px, 120px)); } .shariff .orientation-horizontal.button-style-standard .shariff-button .share_text { display: inline; text-indent: 0; } .shariff .orientation-vertical { display: flex; flex-direction: column; } .shariff > ul { gap: 10px; } .shariff > ul .shariff-button { margin: 0; border-radius: 200px; overflow: hidden; } .shariff .button-style-standard .shariff-button > a { padding-left: 5px; padding-right: 5px; } .shariff .button-style-standard .shariff-button .share_count { top: 0; bottom: 0; right: 0; height: auto; } .shariff .button-style-icon .shariff-button { margin: 0; width: 30px; height: 30px; } .shariff .button-style-icon .shariff-button.twitter .fa-twitter { font-size: 20px; } .shariff .button-style-icon .shariff-button > a { text-align: center; } .shariff .button-style-icon .shariff-button > a span { line-height: 30px; width: 30px; } #social-media { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 30px; margin-bottom: 30px; } @media (min-width: 1024px) { #social-media { margin-top: 50px; margin-bottom: 50px; } } @media (min-width: 1450px) { #social-media { margin-top: 0; margin-bottom: 0; } } #social-media .social__link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: white; background-color: var(--dsj-yellow); border-radius: 40px; transition: background-color 0.3s ease-in-out 0s; } #social-media .social__link--facebook:hover { background-color: #4267B2; } #social-media .social__link--instagram:hover { background-color: #C13584; } #social-media .social__link--twitter:hover { background-color: #000; } #social-media .social__link--youtube:hover { background-color: #212121; } #social-media .social__link--linkedin:hover { background-color: #0A66C2; } #readspeaker-wrapper { margin-top: -26px; } @media (min-width: 768px) { #readspeaker-wrapper { margin-bottom: calc(-50px / 2); } } @media (min-width: 1024px) { #readspeaker-wrapper { margin-top: calc(-100px + 26px); margin-bottom: calc(-50px / 2); } } @media (min-width: 1450px) { #readspeaker-wrapper { margin-bottom: calc(-100px / 2); } } #readspeaker-wrapper .rsbtn { margin: 0; } .partner { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 30px; width: 100%; max-width: 1700px; padding: 0 15px; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; } @media (min-width: 768px) { .partner { margin-top: 50px; margin-bottom: 50px; flex-wrap: nowrap; } } @media (min-width: 1450px) { .partner { margin-top: 100px; margin-bottom: 100px; } } .partner .partner__logo { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; transition: filter 0.3s ease-in-out 0s; } .partner .partner__logo img { max-height: 100px; object-fit: contain; width: 100%; margin-inline: auto; } .partner a.partner__logo:hover { filter: saturate(0); } .logo-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; } .logo-content a { width: 100%; max-width: 180px; height: auto; } .logo-content img { margin-top: 10px; width: 100%; height: auto; max-height: 90px; object-fit: contain; } .logo-content img:first-child, .logo-content img:nth-child(2) { margin-top: 0; } .image-source { position: absolute; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; bottom: 0; border-top-left-radius: 5px; padding: 5px 10px; color: white; background-color: rgba(125, 125, 125, 0.7); right: 0; max-width: 100%; height: 35px; box-sizing: border-box; font-size: 14px; } .image-source i { margin-right: 10px; } .image-source p { box-sizing: border-box; overflow: hidden; max-width: 100%; word-break: break-word; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; } .article__media--image { position: relative; } @-moz-document url-prefix() { .article__media--image .image-source { bottom: 7px; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { .article__media--image .image-source { bottom: 8px; } } .shop-categories { background-color: var(--dsj-yellow); color: white; border-radius: 35px; box-shadow: 0 0.3px 1.1px rgba(0, 0, 0, 0.022), 0 0.9px 2.7px rgba(0, 0, 0, 0.031), 0 1.8px 5.5px rgba(0, 0, 0, 0.039), 0 3.7px 11.3px rgba(0, 0, 0, 0.048), 0 10px 31px rgba(0, 0, 0, 0.07); display: grid; grid-template-areas: "select" "dropdown"; align-items: center; grid-template-rows: auto; } .shop-categories:not(:first-child) { margin-top: 50px; } @media (min-width: 1024px) { .shop-categories { box-shadow: 0 0.7px 1.7px rgba(0, 0, 0, 0.022), 0 1.7px 4.3px rgba(0, 0, 0, 0.031), 0 3.5px 8.9px rgba(0, 0, 0, 0.039), 0 7.3px 18.3px rgba(0, 0, 0, 0.048), 0 20px 50px rgba(0, 0, 0, 0.07); background-color: white; color: var(--text-color); padding: 30px; gap: 15px; } } .shop-categories::after { grid-area: select; content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 300; justify-self: flex-end; font-size: 1.5em; margin-right: 30px; z-index: 1; } @media (min-width: 1024px) { .shop-categories::after { display: none; } } .shop-categories .categories-list__headline { line-height: 1.5; font-weight: 300; font-size: 1.25rem; margin: 0; padding: 15px 30px; grid-area: select; position: relative; z-index: 2; } @media (min-width: 1024px) { .shop-categories .categories-list__headline { font-weight: 200; font-size: 1.625rem; padding: 0; } } .shop-categories .categories__list { display: none; font-weight: 300; grid-area: dropdown; padding: 0 30px 20px; flex-direction: column; gap: 10px; } .shop-categories .categories__list.open { display: flex; } @media (min-width: 1024px) { .shop-categories .categories__list { display: flex; flex-direction: row; gap: 20px 15px; flex-wrap: wrap; padding: 0; } } .shop-categories .categories__list .list__category { list-style-type: none; padding-left: 25px; position: relative; } .shop-categories .categories__list .list__category::before { position: absolute; content: "\f105"; font-family: "Font Awesome 6 Pro"; font-weight: 300; color: white; inset: 9px auto auto 0; display: block; width: 20px; text-align: center; } @media (min-width: 1024px) { .shop-categories .categories__list .list__category::before { display: none; } } @media (min-width: 1024px) { .shop-categories .categories__list .list__category { padding-left: 0; } } .shop-categories .categories__list .list__category a { padding: 5px 0 5px; display: block; font-size: 1rem; } @media (min-width: 1024px) { .shop-categories .categories__list .list__category a { padding: 3px 20px; font-weight: 300; border-radius: 30px; border: 1px solid var(--dsj-yellow); transition: all 0.3s ease-in-out 0s; } .shop-categories .categories__list .list__category a:hover { background-color: var(--dsj-yellow); color: var(--invert-black); } } .shop-item { display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; background-color: white; box-shadow: 0 0.7px 1.7px rgba(0, 0, 0, 0.022), 0 1.7px 4.3px rgba(0, 0, 0, 0.031), 0 3.5px 8.9px rgba(0, 0, 0, 0.039), 0 7.3px 18.3px rgba(0, 0, 0, 0.048), 0 20px 50px rgba(0, 0, 0, 0.07); border-radius: 30px; padding: 30px; } .shop-item:not(:last-of-type) { margin-bottom: 70px; } .shop-item .item__category { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; } .shop-item .item-content-wrapper { display: grid; gap: 20px; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "item-thumbnail" "item-description" "item-footer"; align-items: flex-start; } @media (min-width: 1024px) { .shop-item .item-content-wrapper { grid-template-columns: 95px 1fr; grid-template-areas: "item-thumbnail item-description" "item-thumbnail item-footer"; } } @media (min-width: 1450px) { .shop-item .item-content-wrapper { grid-template-columns: 190px 1fr; } } .shop-item .item-content-wrapper .item__headline { font-weight: 400; font-size: 1.22222rem; } .shop-item .item-content-wrapper .item__thumbnail { grid-area: item-thumbnail; height: auto; box-shadow: 0 0.3px 1.1px rgba(0, 0, 0, 0.022), 0 0.9px 2.7px rgba(0, 0, 0, 0.031), 0 1.8px 5.5px rgba(0, 0, 0, 0.039), 0 3.7px 11.3px rgba(0, 0, 0, 0.048), 0 10px 31px rgba(0, 0, 0, 0.07); } .shop-item .item-content-wrapper .item__content { grid-area: item-description; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 5px; } .shop-item .item-content-wrapper .item__footer { display: flex; flex-wrap: wrap; grid-area: item-footer; gap: 20px; position: relative; } .shop-detail { display: flex; flex-direction: column; gap: 20px; } @media (min-width: 1024px) { .shop-detail { gap: 30px; } } .shop-detail .shop-detail-header { display: flex; flex-wrap: wrap; justify-items: center; gap: 20px; } .shop-detail .shop-detail-header .shop-social { margin-left: auto; } .shop-detail .shop-detail-header .shop-social .shariff .orientation-horizontal { display: flex; flex-wrap: nowrap; } .shop-detail .shop-detail-content-wrapper { display: grid; gap: 20px; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "item-thumbnail" "item-description" "item-footer"; align-items: flex-start; } @media (min-width: 1024px) { .shop-detail .shop-detail-content-wrapper { grid-template-columns: 190px 1fr; grid-template-areas: "item-thumbnail item-description" "item-thumbnail item-footer"; gap: 35px; } } @media (min-width: 1450px) { .shop-detail .shop-detail-content-wrapper { grid-template-columns: 380px 1fr; } } .shop-detail .shop-detail-content-wrapper .detail__thumbnail { grid-area: item-thumbnail; height: auto; box-shadow: 0 0.3px 1.1px rgba(0, 0, 0, 0.022), 0 0.9px 2.7px rgba(0, 0, 0, 0.031), 0 1.8px 5.5px rgba(0, 0, 0, 0.039), 0 3.7px 11.3px rgba(0, 0, 0, 0.048), 0 10px 31px rgba(0, 0, 0, 0.07); } .shop-detail .shop-detail-content-wrapper .detail__description { grid-area: item-description; } .shop-detail .shop-detail-content-wrapper .detail__footer { display: flex; flex-wrap: wrap; grid-area: item-footer; gap: 20px; } .crossselling-item { display: grid; gap: 20px; grid-template-rows: auto; grid-template-columns: 50px 1fr; grid-template-areas: "item-thumbnail item-description" "item-thumbnail item-footer"; align-items: flex-start; padding: 20px; background-color: white; border-radius: 30px; box-shadow: 0 0.7px 1.7px rgba(0, 0, 0, 0.022), 0 1.7px 4.3px rgba(0, 0, 0, 0.031), 0 3.5px 8.9px rgba(0, 0, 0, 0.039), 0 7.3px 18.3px rgba(0, 0, 0, 0.048), 0 20px 50px rgba(0, 0, 0, 0.07); } @media (min-width: 768px) { .crossselling-item { grid-template-columns: 100px 1fr; gap: 30px; } } .crossselling-item .x-selling__thumbnail { grid-area: item-thumbnail; height: auto; box-shadow: 0 0.3px 1.1px rgba(0, 0, 0, 0.022), 0 0.9px 2.7px rgba(0, 0, 0, 0.031), 0 1.8px 5.5px rgba(0, 0, 0, 0.039), 0 3.7px 11.3px rgba(0, 0, 0, 0.048), 0 10px 31px rgba(0, 0, 0, 0.07); } .crossselling-item .x-selling__details { grid-area: item-description; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .crossselling-item .x-selling__details .headline { word-break: break-word; } .crossselling-item .x-selling__details .x-selling__tags { display: flex; flex-wrap: wrap; gap: 10px; word-break: break-word; } .crossselling-item .x-selling__details .x-selling__tags .meta-info-pill { font-size: 0.66667rem; } .crossselling-item .x-selling__footer { display: flex; flex-wrap: wrap; grid-area: item-footer; gap: 10px; } .item-slider-wrapper { position: relative; padding: 50px 0; } @media (min-width: 768px) { .item-slider-wrapper { padding: 100px 0; } } .item-slider-wrapper .item-slider-head { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 20px; gap: 20px 30px; } @media (min-width: 520px) { .item-slider-wrapper .item-slider-head { flex-direction: row; align-items: center; } } @media (min-width: 1024px) { .item-slider-wrapper .item-slider-head { gap: 20px 50px; } } @media (min-width: 1450px) { .item-slider-wrapper .item-slider-head { margin-bottom: 30px; } } .item-slider-wrapper .item-slider-head .headline { font-size: 2rem; font-weight: 100; } @media (min-width: 1450px) { .item-slider-wrapper .item-slider-head .headline { font-size: 2.77778rem; } } .item-slider-wrapper .item-slider-head .head__controls { display: flex; justify-content: space-between; width: 6.5rem; } @media (min-width: 1024px) { .item-slider-wrapper .item-slider-head .head__controls { width: 5.5rem; } } .item-slider-wrapper .item-slider-head .head__controls .button { padding: 10px 15px; font-size: 1rem; background-color: var(--light-grey); color: black; border: none; line-height: 1; } @media (min-width: 1024px) { .item-slider-wrapper .item-slider-head .head__controls .button { padding: 8px 15px; } .item-slider-wrapper .item-slider-head .head__controls .button:hover { background-color: var(--mid-grey); color: var(--invert-black); } } .item-slider-wrapper .item-slider .shop-item, .item-slider-wrapper .item-slider .crossselling-item { box-shadow: none; border: 2px solid var(--dsj-yellow); margin-bottom: 0; } @media (min-width: 1251px) { .item-slider-wrapper .item-slider.item-slider--duo { margin-left: -20px; margin-right: -20px; } .item-slider-wrapper .item-slider.item-slider--duo .slick-slide { padding: 0 20px; } } .item-slider-wrapper .item-slider .slick-dots { position: absolute; inset: auto 0 -35px 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; cursor: pointer; } .item-slider-wrapper .item-slider .slick-dots li { font-size: 0; color: white; height: 15px; width: 15px; border-radius: 100%; background-color: white; border: 1px solid var(--dsj-yellow); transition: background-color 0.3s ease-in-out 0s; } .item-slider-wrapper .item-slider .slick-dots li:not(:last-child) { margin-right: 10px; } .item-slider-wrapper .item-slider .slick-dots li:hover { background-color: var(--dsj-yellow); } .item-slider-wrapper .item-slider .slick-dots li.slick-active { color: var(--dsj-yellow); background-color: var(--dsj-yellow); } .add-to-cart-group { border: 1px solid var(--dsj-yellow); border-radius: 10px; display: flex; overflow: hidden; } .add-to-cart-group .cart-amount { width: 50px; flex: 0 0 auto; text-align: center; -moz-appearance: textfield; } .add-to-cart-group .cart-amount::-webkit-outer-spin-button, .add-to-cart-group .cart-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .add-to-cart-group .button { border-radius: 0; border: none; transition: background-color 0.3s ease 0s; } .add-to-cart-group .button:hover { color: white; background-color: var(--dsj-green); } .add-to-cart-group .button.success .fa-light { animation: cart-jello 1.5s ease-in-out 0s 1 normal forwards; } @keyframes cart-jello { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1.4, 1.4, 1.4); } } .shopping-cart { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .shopping-cart .cart__item { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; padding-bottom: 15px; position: relative; transition: color 0.3s ease-in-out 0s; } .shopping-cart .cart__item:not(:last-of-type) { border-bottom: 1px solid var(--light-grey); } .shopping-cart .cart__item:hover { color: var(--dsj-yellow); } .shopping-cart .cart__item * { display: flex; } .shopping-cart .cart__item form:first-of-type { width: auto; } .shopping-cart .cart__item form:last-of-type { width: 60px; } .shopping-cart .cart__item a { width: 100%; hyphens: auto; flex-direction: column; } @media (min-width: 768px) { .shopping-cart .cart__item a { flex-direction: row; } } .shopping-cart .cart__item .item__count { flex: 0 0 auto; width: 60px; display: flex; } .shopping-cart .cart__item .item__label { line-height: 1.467; } @media (min-width: 768px) { .shopping-cart .cart__item .item__price { position: absolute; right: 60px; } } .shopping-cart .cart__item .button--delete { padding: 5px 10px; position: absolute; right: 0; } .shopping-cart .sumPrice, .shopping-cart .sumWeight, .shopping-cart .sumTotal { text-align: right; } .shopping-cart .quantity { display: none; background-color: white; z-index: 1; position: absolute; left: 0; top: 0; font-size: 0.8rem; padding: 1px 10px; line-height: 1; font-weight: 500; border-radius: 30px; border: 1px solid var(--dsj-yellow); } .sidebar__component .shopping-cart { gap: 10px; margin-bottom: 20px; } .sidebar__component .shopping-cart .cart__item { gap: 5px; padding-bottom: 10px; } .sidebar__component .shopping-cart .cart__item .item__count { width: 60px; } .sidebar__component .shopping-cart .cart__item .item__label { line-height: 1.63; font-size: 0.9rem; } .sidebar__component .shopping-cart .cart__item a { align-items: flex-start; } .checkout-navigation { display: flex; justify-content: flex-start; flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; } @media (min-width: 1024px) { .checkout-navigation { justify-content: center; flex-direction: row; } } .checkout-navigation .checkout__step { padding: 10px 20px; position: relative; font-weight: 200; transition: all 0.3s linear 0s; } @media (min-width: 1450px) { .checkout-navigation .checkout__step { padding: 15px 30px; } } @media (min-width: 1024px) { .checkout-navigation .checkout__step::before { font-family: "Font Awesome 6 Pro"; font-weight: 300; content: "\f054"; left: -6px; position: absolute; top: 50%; transform: translateY(-50%); } } .checkout-navigation .checkout__step::after { border-width: 0 1px; border-color: var(--dsj-yellow); border-style: solid; content: ""; width: 5px; height: 100%; position: absolute; inset: 0 auto 0 0; background-color: white; transition: background-color 0.3s ease-in-out 0s; } @media (min-width: 1024px) { .checkout-navigation .checkout__step::after { border-width: 1px 0; height: 5px; inset: auto 0 -5px; width: 100%; } } .checkout-navigation .checkout__step:first-child::after { border-width: 1px 1px 0; border-radius: 5px 5px 0 0; } @media (min-width: 1024px) { .checkout-navigation .checkout__step:first-child::after { border-radius: 5px 0 0 5px; border-width: 1px 0 1px 1px; } } .checkout-navigation .checkout__step:last-child::after { border-width: 0 1px 1px; border-radius: 0 0 5px 5px; } @media (min-width: 1024px) { .checkout-navigation .checkout__step:last-child::after { border-radius: 0 5px 5px 0; border-width: 1px 1px 1px 0; } } .checkout-navigation .checkout__step--done::after { background-color: var(--dsj-yellow); } .checkout-navigation .checkout__step--done:hover::after { background-color: white; } @media (min-width: 1024px) { .checkout-navigation .checkout__step--done::before { font-family: "Font Awesome 6 Pro"; font-weight: 300; color: var(--dsj-green); content: "\f00c"; left: auto; right: -5px; position: absolute; top: 50%; transform: translateY(-50%); } } .checkout-navigation .checkout__step--current::before { content: ""; position: absolute; inset: 50% auto auto 5px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 5px; border-color: transparent transparent transparent #F0912A; } @media (min-width: 1024px) { .checkout-navigation .checkout__step--current::before { top: auto; left: 50%; bottom: 0; transform: translate(-50%, 0); border-width: 0 10px 5px 10px; border-color: transparent transparent #F0912A transparent; } } .checkout-navigation .checkout__step--current::after { background-color: var(--dsj-yellow); } .checkout-summary { position: relative; border: 1px solid var(--dsj-yellow); border-radius: 30px; padding: 30px; } .checkout-summary .shopping-cart { margin-bottom: 0; } .checkout-summary .edit-button { position: absolute; right: -1px; top: -1px; border-bottom-right-radius: 0; border-top-left-radius: 0; } .checkout-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 20px; justify-items: stretch; align-items: stretch; } @media (min-width: 1024px) { .checkout-grid { gap: 40px; } } @media (min-width: 1450px) { .checkout-grid { gap: 60px; grid-template-columns: 1fr 1fr; } } .checkout-button { margin-top: 20px; } @media (min-width: 1024px) { .checkout-button { margin-top: 40px; } } @media (min-width: 1450px) { .checkout-button { margin-top: 60px; } } .map-aside { margin-bottom: calc(30px / 2); } @media (min-width: 768px) { .map-aside { margin-bottom: calc(50px / 2); } } @media (min-width: 1450px) { .map-aside { margin-bottom: calc(100px / 2); } } .filter-result { border-radius: 20px; padding: 30px; box-shadow: 0 0.3px 1.1px rgba(0, 0, 0, 0.022), 0 0.9px 2.7px rgba(0, 0, 0, 0.031), 0 1.8px 5.5px rgba(0, 0, 0, 0.039), 0 3.7px 11.3px rgba(0, 0, 0, 0.048), 0 10px 31px rgba(0, 0, 0, 0.07); } .filter-result:not(:last-of-type) { margin-bottom: 30px; } .filter-result__date { padding: 5px 10px; line-height: 1; border-radius: 30px; border: 1px solid var(--dsj-yellow); display: inline-block; font-size: 0.8rem; font-weight: 400; margin-bottom: 10px; } .filter-result__address { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 20px; justify-items: stretch; align-items: stretch; } @media (min-width: 520px) { .filter-result__address { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .filter-result__address { grid-template-columns: 1fr; } } @media (min-width: 1024px) { .filter-result__address { grid-template-columns: 1fr 1fr; } } .filter-result__address a { text-decoration: none; transition: color 0.3s ease-in-out 0s; } .filter-result__address a:hover { text-decoration: none; color: var(--dsj-yellow); } .filter-result__address .address__item { display: block; position: relative; margin-left: 20px; line-height: 1.65; } .filter-result__address .address__item::before { position: absolute; content: "\e461"; font-family: "Font Awesome 6 Pro"; font-weight: 300; color: var(--dsj-yellow); inset: 0 auto auto -30px; display: block; width: 30px; text-align: center; } .filter-result__address .address__item--name { font-weight: 400; font-size: 1.1rem; line-height: 1.35; } .filter-result__address .address__item--name::before { font-size: 1rem; content: "\e461"; } .filter-result__address .address__item--mail::before { content: "\f0e0"; } .filter-result__address .address__item--phone::before { content: "\f8d3"; } .filter-result__address .address__item--location::before { content: "\f3c5"; } .filter-result__address .address__item--web::before { content: "\f37e"; } .filter-result__details { margin-top: 30px; } .filter-result__details--thumbnail .thumbnail-grid { display: grid; grid-template-rows: auto; align-items: flex-start; gap: 10px; grid-template-columns: minmax(50px, 30%) minmax(0, 1fr); grid-template-areas: "thumbnail description"; } .filter-result__details--thumbnail .thumbnail-grid .filter-result__thumbnail { grid-area: thumbnail; } .filter-result__details--thumbnail .thumbnail-grid .details__content { grid-area: description; } .filter-result__details .filter-result__thumbnail { width: 100%; height: auto; } .filter-result__details .details__headline { border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease-in-out 0s; font-weight: 300; border: 1px solid var(--dsj-yellow); padding: 5px 10px 5px 2rem; display: inline-block; position: relative; } .filter-result__details .details__headline:hover { background-color: var(--dsj-yellow); } .filter-result__details .details__headline:before, .filter-result__details .details__headline::after { font-family: "Font Awesome 6 Pro"; font-weight: 300; position: absolute; top: 9px; left: 10px; height: 1rem; width: 1rem; text-align: center; line-height: 1rem; font-size: 1rem; transform-origin: center center; transition: opacity 0.5s ease-in, transform 0.3s ease-in; } .filter-result__details .details__headline::before { content: "\f056"; opacity: 0; } .filter-result__details .details__headline::after { content: "\f055"; } .filter-result__details[open] .details__headline { margin-bottom: 30px; } .filter-result__details[open] .details__headline::before { opacity: 1; transform: rotate(180deg); } .filter-result__details[open] .details__headline::after { opacity: 0; transform: rotate(180deg); } .form__checkbox-wrap { display: flex; gap: 10px; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .form__checkbox { position: relative; padding-left: 40px; } .form__checkbox > label { line-height: 1.5rem; height: 1.5rem; width: 1.5rem; top: 0; left: 0; background: #fff; position: absolute; cursor: pointer; overflow: hidden; border-radius: 5px; transition: border-color 0.3s ease-in-out 0s; border: 1px solid var(--mid-grey); } .form__checkbox > label::after { transition: all 0.3s ease-in-out 0s; content: "\f00c"; opacity: 0; position: absolute; font-family: "Font Awesome 6 Pro"; inset: 0; color: white; background: var(--dsj-yellow); text-align: center; } .form__checkbox .form__checkbox-input { display: none; } .form__checkbox .form__checkbox-input:checked + label { border-color: var(--dsj-yellow); } .form__checkbox .form__checkbox-input:checked + label::after { opacity: 1; } .form__checkbox .checkbox__caption { font-size: 0.9rem; } .form__checkbox .checkbox__caption p { display: inline-block; margin: 0; line-height: 1.5rem; } .form__checkbox .checkbox__caption p a { text-decoration: underline; } .form__checkbox .checkbox__caption p a:hover { text-decoration: none; } .form__radio-wrap { display: flex; gap: 10px; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .form__radio { position: relative; padding-left: 40px; } .form__radio .radio__label { line-height: 1.5rem; position: relative; cursor: pointer; } .form__radio .radio__checkmark { display: block; top: 0; left: -40px; background: #fff; position: absolute; height: 1.5rem; width: 1.5rem; border: 1px solid var(--mid-grey); border-radius: 100%; transition: all 0.3s ease-in-out 0s; } .form__radio .form__radio-input { display: none; } .form__radio .form__radio-input:checked + .radio__checkmark { border-color: var(--dsj-yellow); background: var(--dsj-yellow); } .form__field { border-radius: 10px; border: 1px solid var(--mid-grey); height: 2.5rem; line-height: 2.5rem; padding: 0 0.5rem; color: var(--dark-grey); width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; transition: border-color 0.3s ease-in-out 0s; } .form__field:focus { border-color: #F5952D; } .form__field.form__field--textarea { height: 100px; } .form__field.form__field--fileupload { justify-content: space-between; align-items: stretch; cursor: pointer; transition: border-color 0.3s ease-in-out 0s; } .form__field.form__field--fileupload:hover { border-color: var(--dsj-yellow); } .form__field.form__field--fileupload:hover .label__upload-icon { color: var(--dsj-yellow); } .form__field.form__field--fileupload + .powermail_file { display: none; } .form__field.form__field--fileupload .label__caption { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; } .form__field.form__field--fileupload .label__upload-icon { display: inline-block; width: 45px; flex-shrink: 0; flex-grow: 0; position: relative; text-align: center; font-size: 1.2rem; transition: color 0.3s ease-in-out 0s; } .parsley-error { border-color: var(--error-red); outline: 1px solid var(--error-red); } .parsley-errors-list { color: var(--error-red); font-size: 0.833333rem; font-weight: 400; } .parsley-errors-list li { display: block; margin-top: 5px; } .form__inline-wrapper { flex-direction: row; align-items: stretch; justify-content: space-between; display: flex; gap: 20px; } .form__inline-wrapper .form__field { flex: 1 1 100%; } .form__inline-wrapper .button { flex: 0 1 auto; } .form__label { display: block; font-size: 0.9rem; } .map-filter-form { display: grid; grid-template-columns: 1fr 1fr; row-gap: 15px; justify-items: stretch; align-items: flex-start; } .form__select { border-radius: 10px; border: 1px solid var(--mid-grey); height: 2.5rem; line-height: 2.5rem; padding: 0 0.5rem; color: var(--dark-grey); width: 100%; display: grid; grid-template-areas: "select"; align-items: center; } .form__select select { grid-area: select; overflow: hidden; } .form__select::after { grid-area: select; content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 300; color: var(--dark-grey); justify-self: flex-end; font-size: 1.5em; z-index: -1; transition: color 0.3s ease-in-out 0s; } .form__select:hover { cursor: pointer; } .form__select:hover::after { color: #F5952D; } .form__select:focus-within { border-color: #F5952D; } .dsj-event { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 15px; border-radius: 20px; margin-bottom: 40px; box-shadow: 0 0.7px 1.7px rgba(0, 0, 0, 0.022), 0 1.7px 4.3px rgba(0, 0, 0, 0.031), 0 3.5px 8.9px rgba(0, 0, 0, 0.039), 0 7.3px 18.3px rgba(0, 0, 0, 0.048), 0 20px 50px rgba(0, 0, 0, 0.07); } .dsj-event:last-of-type { margin-bottom: 0; } @media (min-width: 768px) { .dsj-event:last-of-type { margin-bottom: 40px; } } @media (min-width: 1024px) { .dsj-event { padding: 30px; } } .dsj-event .event__meta { display: flex; align-items: center; justify-content: flex-start; flex: 1 1 auto; flex-wrap: wrap; gap: 20px; width: 100%; } .dsj-event .event__meta .meta-info-pill { font-weight: 400; font-size: 0.88889rem; } .dsj-event .event__meta .meta-info-pill strong { font-weight: 500; } .dsj-event .event__meta .meta-info-pill .fa-light { margin-right: 0.5em; } @media (min-width: 520px) { .dsj-event .event__meta .event__location { margin-left: auto; } } @media (min-width: 768px) { .dsj-event .event__meta .event__location { margin-left: 0; } } @media (min-width: 1024px) { .dsj-event .event__meta .event__location { margin-left: auto; } } @media (min-width: 768px) { .dsj-event .event__meta .event__details { margin-left: auto; } } .dsj-event .event__meta .event__details { background-color: var(--dsj-yellow); color: white; transition: background-color ease-in-out 0.3s, color ease-in-out 0.3s; } .dsj-event .event__meta .event__details:hover { background-color: white; color: black; } .dsj-event .event__description .event__title { font-weight: 500; font-size: 1.2rem; line-height: 1.4; margin-bottom: 5px; } .dsj-event.dsj-event--highlight { background-color: var(--dsj-yellow-inverted); background-image: linear-gradient(120deg, hsl(31, 91%, 57%) 0%, hsl(31, 85%, 55%) 11%, hsl(31, 80%, 52%) 22%, hsl(31, 76%, 50%) 33%, hsl(31, 78%, 48%) 44%, hsl(31, 81%, 46%) 56%, hsl(31, 85%, 43%) 67%, hsl(31, 89%, 41%) 78%, hsl(31, 95%, 38%) 89%, hsl(31, 100%, 36%) 100%); color: white; } .dsj-event.dsj-event--highlight .meta-info-pill { border-color: white; } .dsj-event.dsj-event--highlight .event__details { border: 2px solid white; background-color: var(--dsj-green); } .dsj-event.dsj-event--highlight .event__details:hover { background-color: white; color: black; } .dsj-event .hit { font-weight: 500; display: inline-block; color: var(--dsj-yellow); } .event-detail-meta { display: flex; align-items: center; justify-content: flex-start; flex: 1 1 auto; flex-wrap: wrap; gap: 20px; width: 100%; margin-bottom: 20px; } .event-detail-meta .meta-info-pill { font-weight: 300; font-size: 1rem; padding: 5px 15px; line-height: normal; } .event-detail-meta .meta-info-pill strong { font-weight: 500; } .event-detail-meta .meta-info-pill .fa-light { margin-left: 0.5em; } .event-detail-btn { margin-top: 30px; } @media (min-width: 768px) { .event-detail-btn { margin-top: 50px; } } .mediaconsent_element { border-left: 7px solid #F5952D; background-image: linear-gradient(310deg, hsl(31, 91%, 57%) 0%, hsl(31, 85%, 55%) 11%, hsl(31, 80%, 52%) 22%, hsl(31, 76%, 50%) 33%, hsl(31, 78%, 48%) 44%, hsl(31, 81%, 46%) 56%, hsl(31, 85%, 43%) 67%, hsl(31, 89%, 41%) 78%, hsl(31, 95%, 38%) 89%, hsl(31, 100%, 36%) 100%); } .mediaconsent_element.video-accept { padding: 20px; background-image: none; } .mediaconsent_element .mediaconsent_wrapper { padding: 20px; background-color: var(--bg-color-blur); } .mediaconsent_element .mediaconsent_element { border-left: 0; } .mediaconsent_element h1 { margin-bottom: 10px; } .mediaconsent_element .form__checkbox { padding-left: 0; } .mediaconsent_element .form__checkbox label { height: 1.2rem; width: 1.2rem; } .mediaconsent_element .form__checkbox .checkbox__caption { text-indent: 2em; } .mediaconsent_element .form__checkbox .checkbox__caption a { text-decoration: underline; } .mediaconsent_element .form__checkbox .checkbox__caption a:hover { text-decoration: none; color: white; } .page__sidebar .content-wrapper .mediaconsent_element .mediaconsent_wrapper .content-wrapper { margin: 0; padding: 0; } .section__sidebar .mediaconsent_wrapper .content-wrapper { margin: 0; padding: 0; } .pages_total { background-color: transparent !important; border: 0 !important; margin-top: 20px; } .pages_total .kesearch_pagebrowser a { transition: color 0.3s ease-in-out 0s; } .pages_total .kesearch_pagebrowser a:hover { color: var(--dsj-yellow); } /*# sourceMappingURL=main.css.map */