/*! download5.min.css -- erzeugt aus download5.css (1a4b4f4aa5f586e1e1a3315000af40747d9c885f) durch bin/css_minify.php. Nicht von Hand ändern. */
.dl5 {
--dl5-content-max: 1400px;
--dl5-gutter: clamp(24px, 5vw, 56px);
--dl5-section-gap: clamp(48px, 7vw, 86px);
--dl5-tile-gap-row: 28px;
--dl5-tile-gap-column: 20px;
--dl5-filter-gap: 18px;
--dl5-line: rgba(255, 255, 255, .6);
--dl5-text: #d8d8d8;
--dl5-tile: rgba(255, 255, 255, .07);
--dl5-tile-hover: rgba(255, 255, 255, .21);
--dl5-visual: rgba(255, 255, 255, .11);
}
.cms-element.dl5 { padding-top: 0; }
.dl5 a:focus,
.dl5 button:focus { outline: 0; }
.dl5 a:focus-visible,
.dl5 button:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.dl5 .dl5-card-visual:focus-visible,
.dl5 .dl5-folder-card:focus-visible { outline-offset: -2px; }
.dl5 .dl5-content {
width: min(100%, calc(var(--dl5-content-max) + (var(--dl5-gutter) * 2)));
margin: 0 auto;
padding: 0 var(--dl5-gutter);
}
.dl5 .dl5-section {
padding-top: clamp(28px, 5vw, 44px);
padding-bottom: var(--dl5-section-gap);
}
.dl5 .dl5-section-tight { padding-top: 12px; }
.dl5 .dl5-hero-title {
margin: 0;
color: #fff;
font-size: 36px;
font-weight: 300;
line-height: 40px;
text-align: center;
}
.dl5 .dl5-section-head,
.dl5 .dl5-listing-head,
.dl5 .dl5-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 72px;
border-top: 1px solid var(--dl5-line);
}
.dl5 .dl5-listing-head .dl5-title {
flex: 1 1 auto;
min-height: 0;
border-top: 0;
}
.dl5 .dl5-section-head h2,
.dl5 .dl5-title,
.dl5 .dl5-detail-title {
margin: 0;
color: #fff;
font-size: 28px;
font-weight: 300;
line-height: 32px;
}
.dl5 .dl5-title { justify-content: flex-start; gap: 18px; }
.dl5 .dl5-title-icon { flex: none; height: 48px; width: auto; }
.dl5 .dl5-detail-title { margin-bottom: 34px; }
@media (min-width: 992px) {
.dl5 .dl5-hero-title { font-size: 48px; line-height: 52px; }
.dl5 .dl5-section-head h2,
.dl5 .dl5-title { font-size: 32px; line-height: 36px; }
}
@media (max-width: 767px) {
.dl5 .dl5-section-head { align-items: flex-start; gap: 14px; padding: 18px 0; }
.dl5 .dl5-listing-head {
align-items: flex-start;
flex-direction: column;
gap: 0;
min-height: 0;
padding: 0;
}
.dl5 .dl5-listing-head .dl5-title { width: 100%; padding: 12px 0; }
.dl5 .dl5-sort-wrap {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 0;
padding-top: 12px;
border-top: 1px solid var(--dl5-line);
}
.dl5 .dl5-title { min-height: 0; padding: 12px 0; }
}
@media (max-width: 480px) {
.dl5 .dl5-hero-title { font-size: 28px; line-height: 32px; }
.dl5 .dl5-section-head h2,
.dl5 .dl5-title,
.dl5 .dl5-detail-title { font-size: 24px; line-height: 28px; }
}
.dl5 .dl5-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--dl5-tile-gap-row) var(--dl5-tile-gap-column);
align-items: stretch;
padding-top: 48px;
}
@media (max-width: 1131px) {
.dl5 .dl5-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 819px) {
.dl5 .dl5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
.dl5 .dl5-grid { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
.dl5 { --dl5-gutter: 30px; }
}
@media (max-width: 767px) {
.dl5 { --dl5-gutter: 14px; }
}
.dl5 .dl5-swiper {
position: relative;
padding-top: 48px;
padding-bottom: 42px;
}
.dl5 .dl5-swiper-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (3 * var(--dl5-tile-gap-column))) / 4);
gap: var(--dl5-tile-gap-column);
align-items: stretch;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
cursor: grab;
user-select: none;
}
.dl5 .dl5-swiper-track::-webkit-scrollbar { display: none; }
.dl5 .dl5-swiper-track.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
scroll-snap-type: none;
}
.dl5 .dl5-swiper-track.is-dragging a,
.dl5 .dl5-swiper-track.is-dragging button { pointer-events: none; }
.dl5 .dl5-swiper-slide {
display: flex;
min-width: 0;
height: 100%;
scroll-snap-align: start;
}
.dl5 .dl5-swiper-slide > .dl5-card { width: 100%; height: 100%; }
@media (max-width: 1131px) {
.dl5 .dl5-swiper-track { grid-auto-columns: calc((100% - (2 * var(--dl5-tile-gap-column))) / 3); }
}
@media (max-width: 819px) {
.dl5 .dl5-swiper-track { grid-auto-columns: calc((100% - var(--dl5-tile-gap-column)) / 2); }
}
@media (max-width: 527px) {
.dl5 .dl5-swiper-track { grid-auto-columns: 100%; }
}
.dl5 .dl5-swiper-footer {
position: absolute;
left: 0;
right: 0;
bottom: 4px;
display: flex;
align-items: flex-end;
justify-content: space-between;
min-height: 24px;
}
.dl5 .dl5-swiper-footer[hidden] { display: none; }
.dl5 .dl5-swiper-control {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 10px;
padding: 0 6px;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}
.dl5 .dl5-swiper-control:hover { background: transparent; color: var(--dl5-text); }
.dl5 .dl5-swiper-control .cms-icon::before { top: 3px; }
.dl5 .dl5-swiper-dots {
display: inline-flex;
align-items: flex-end;
justify-content: center;
gap: 12px;
padding: 0 42px;
}
.dl5 .dl5-swiper-dot {
position: relative;
width: 13px;
height: 11px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
transition: height .25s ease;
}
.dl5 .dl5-swiper-dot::before {
position: absolute;
left: 4px;
bottom: 3px;
width: 5px;
height: 5px;
border-radius: 5px;
background: #fff;
content: "";
transition: height .25s ease;
}
.dl5 .dl5-swiper-dot.is-active { height: 21px; }
.dl5 .dl5-swiper-dot.is-active::before { height: 15px; }
.dl5 .dl5-card,
.dl5 .dl5-folder-card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 0;
color: var(--dl5-text);
text-align: left;
text-decoration: none;
}
.dl5 .dl5-card { scroll-margin-top: 92px; }
.dl5 .dl5-card.is-target {
outline: 2px solid #fff;
outline-offset: 0;
}
.dl5 .dl5-card-visual,
.dl5 .dl5-folder-visual {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0;
aspect-ratio: 4 / 3;
padding: 20px;
background: var(--dl5-visual);
overflow: hidden;
transition: background-color .25s ease;
}
.dl5 .dl5-card-visual img,
.dl5 .dl5-folder-visual img {
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.dl5 .dl5-card-visual-symbol img {
width: 56px;
height: 60px;
max-width: none;
max-height: none;
}
.dl5 .dl5-card-visual-symbol img[src*="icon-download-href"] {
width: 72px;
height: 60px;
}
.dl5 .dl5-folder-visual img {
display: block;
width: auto;
height: 140px;
max-width: 100%;
max-height: 72%;
}
.dl5 .dl5-folder-visual-foto { padding: 0; }
.dl5 .dl5-folder-visual-foto img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
}
.dl5 .dl5-folder-title {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 0;
padding: 16px 14px;
background: var(--dl5-tile);
color: var(--dl5-text);
font-size: 14px;
line-height: 20px;
transition: background-color .25s ease;
}
.dl5 .dl5-folder-path {
align-self: stretch;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--dl5-line);
overflow-wrap: anywhere;
}
.dl5 .dl5-folder-card:hover { color: var(--dl5-text); text-decoration: none; }
.dl5 .dl5-folder-card:hover .dl5-folder-title { background: var(--dl5-tile-hover); }
.dl5 .dl5-folder-card:hover .dl5-folder-visual { background: rgba(255, 255, 255, .16); }
.dl5 .dl5-card-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 260px;
padding: 16px 14px;
background: var(--dl5-tile);
transition: background-color .25s ease;
}
.dl5 .dl5-card:hover .dl5-card-body,
.dl5 .dl5-card.is-plang-open .dl5-card-body { background-color: var(--dl5-tile-hover); }
.dl5 .dl5-card:hover .dl5-card-visual,
.dl5 .dl5-card.is-plang-open .dl5-card-visual { background-color: rgba(255, 255, 255, .16); }
.dl5 .dl5-card-copy { flex: 1 1 auto; }
.dl5 .dl5-card-copy h3 {
margin: 0 0 8px;
color: var(--dl5-text);
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.dl5 .dl5-card-copy h3 a { color: inherit; text-decoration: none; }
.dl5 .dl5-card-copy h3 a:hover { color: #fff; text-decoration: none; }
.dl5 .dl5-card-copy p {
margin: 0;
color: var(--dl5-text);
font-size: 14px;
line-height: 20px;
hyphens: auto;
overflow-wrap: break-word;
word-break: normal;
}
.dl5 .dl5-card-meta {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px dashed var(--dl5-line);
color: var(--dl5-text);
font-size: 14px;
line-height: 20px;
overflow-wrap: anywhere;
}
.dl5 .dl5-card-copy + .dl5-card-meta { margin-top: 16px; }
.dl5 .dl5-card-actions {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
gap: 12px;
margin-top: auto;
padding: 12px 0;
border-top: 1px dashed var(--dl5-line);
}
.dl5 .dl5-card-meta + .dl5-card-actions { margin-top: 12px; }
.dl5 .dl5-card-action {
display: inline-flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--dl5-text);
font: inherit;
font-size: 14px;
line-height: 20px;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: color .16s ease;
}
.dl5 .dl5-card-action:hover { color: #fff; text-decoration: none; }
.dl5 .dl5-card-action svg {
flex: 0 0 17px;
width: 17px;
height: 17px;
color: currentColor;
transition: color .16s ease;
}
.dl5 .dl5-card-action svg.dl5-icon-chevron {
width: 12px;
height: 12px;
}
.dl5 .dl5-card-action + .dl5-card-action-info {
padding-top: 12px;
border-top: 1px dashed var(--dl5-line);
}
.dl5 .dl5-plang {
position: fixed;
z-index: 120;
display: flex;
flex-direction: column;
padding: 12px 0;
background: #fff;
color: #121212;
box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.dl5 .dl5-plang[hidden] { display: none; }
.dl5 .dl5-plang::after {
position: absolute;
right: var(--dl5-plang-pfeil, 20px);
bottom: -8px;
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom: 0;
border-top-color: #fff;
content: "";
}
.dl5 .dl5-plang a {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
width: 100%;
padding: 8px 14px;
color: #121212;
font-size: 14px;
line-height: 18px;
text-decoration: none;
}
.dl5 .dl5-plang a:hover { background: #ececec; color: #121212; text-decoration: none; }
.dl5 .dl5-plang a svg {
flex: 0 0 15px;
width: 15px;
height: 15px;
color: currentColor;
}
.dl5 .dl5-order-info {
position: relative;
top: -1px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 9px;
padding: 0;
border: 0;
background: transparent;
color: var(--dl5-text);
vertical-align: middle;
cursor: pointer;
}
.dl5 .dl5-order-info .cms-icon { font-size: 14px; line-height: 18px; }
.dl5 .dl5-order-info:hover { color: #fff; }
.dl5 .dl5-order-popover {
position: fixed;
z-index: 120;
width: 276px;
max-width: calc(100vw - 24px);
padding: 11px 16px;
background: #fff;
color: #121212;
font-size: 14px;
line-height: 20px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.dl5 .dl5-order-popover[hidden] { display: none; }
.dl5 .dl5-order-popover::before {
position: absolute;
left: -8px;
top: var(--dl5-order-pfeil, 50%);
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #fff;
transform: translateY(-50%);
content: "";
}
.dl5 .dl5-order-popover a {
border-bottom: 1px solid #121212;
color: #121212;
text-decoration: none;
}
.dl5 .dl5-plang-warten {
padding: 8px 14px;
color: #6b6b6b;
font-size: 14px;
line-height: 18px;
}
.dl5-lizenz-modal {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.62);
padding: 24px;
}
.dl5-lizenz-modal[hidden] { display: none; }
body.dl5-modal-open { overflow: hidden; }
.dl5-lizenz-dialog {
position: relative;
width: min(100%, 560px);
background: #fff;
color: #000;
box-shadow: 0 22px 65px rgba(0,0,0,.55);
}
.dl5-lizenz-head {
display: flex;
align-items: center;
padding: 26px 66px 20px 26px;
}
.dl5-lizenz-head strong {
color: #000;
font-size: 24px;
font-weight: 400;
line-height: 30px;
}
.dl5-lizenz-close {
position: absolute;
top: 24px;
right: 24px;
border: 0;
background: transparent;
color: #111;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.dl5-lizenz-close:hover { color: #3a3a3a; }
.dl5-lizenz-body { padding: 0 26px 26px; }
.dl5-lizenz-intro {
margin: 0 0 18px;
color: #495057;
font-size: 14px;
line-height: 20px;
}
.dl5-lizenz-intro em { font-style: italic; }
.dl5-lizenz-label {
display: block;
margin: 0 0 9px;
color: #000;
font-size: 14px;
line-height: 20px;
}
.dl5-lizenz-label span { color: #000; }
.dl5-mac-inputs {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.dl5-mac-inputs input {
width: 48px;
min-height: 38px;
border: 1px solid #a9a9a9;
border-radius: 0;
padding: 6px 7px;
font-size: 16px;
line-height: 24px;
color: #495057;
text-align: center;
text-transform: uppercase;
}
.dl5-mac-inputs input:focus {
border-color: #111;
outline: 0;
box-shadow: none;
}
.dl5-mac-inputs span {
display: inline-flex;
min-height: 38px;
align-items: center;
color: #495057;
font-size: 16px;
line-height: 24px;
}
.dl5-lizenz-melden {
margin-top: 18px;
padding: 12px 14px;
font-size: 14px;
line-height: 20px;
}
.dl5-lizenz-melden[hidden] { display: none; }
.dl5-lizenz-melden.is-ok      { background: #e7f4e9; color: #1c5b2a; }
.dl5-lizenz-melden.is-fehler  { background: #fbeaea; color: #8a1c1c; }
.dl5-lizenz-melden.is-warten  { background: #eef0f2; color: #495057; }
.dl5-lizenz-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.dl5 .dl5-lizenz-actions .dl5-action {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-height: 40px;
margin: 0;
padding: 0 26px;
border: 1px solid #111;
border-radius: 20px;
background: #111;
box-shadow: none;
color: #fff;
font: inherit;
font-size: 16px;
line-height: 38px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease;
}
.dl5 .dl5-lizenz-actions .dl5-action:hover,
.dl5 .dl5-lizenz-actions .dl5-action:focus {
background: #242424;
border-color: #242424;
color: #fff;
outline: 0;
}
.dl5 .dl5-lizenz-actions .dl5-action[disabled] {
opacity: .55;
pointer-events: none;
}
.dl5 .dl5-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 38px 0 0;
color: #8f8f8f;
font-size: 12px;
line-height: 16px;
}
@media (max-width: 767px) {
.dl5 .dl5-crumbs { row-gap: 6px; }
}
.dl5 .dl5-crumbs a { color: #8f8f8f; text-decoration: none; }
.dl5 .dl5-crumbs a:hover { color: #fff; text-decoration: none; }
.dl5 .dl5-crumbs .is-active { color: #8f8f8f; }
.dl5 .dl5-crumbs .dl5-crumb-sep {
display: inline-flex;
align-items: center;
justify-content: center;
left: 1px;
width: 1em;
height: 1em;
color: #8f8f8f;
font-size: 10px;
line-height: 1;
}
.dl5 .dl5-crumbs .dl5-crumb-sep::before {
position: static;
top: auto;
line-height: 1;
}
.dl5 .dl5-lead {
margin: 12px 0 0;
max-width: 68ch;
color: rgba(216, 216, 216, .82);
}
.dl5 .dl5-detail {
display: grid;
grid-template-columns: minmax(0, 1fr) calc((100% - var(--dl5-filter-gap) * 2) / 3);
gap: clamp(28px, 5vw, 58px);
padding-top: 20px;
border-top: 1px solid var(--dl5-line);
}
@media (max-width: 1199px) {
.dl5 .dl5-detail { grid-template-columns: 1fr; }
}
.dl5 .dl5-detail-text { margin-top: 16px; max-width: 72ch; }
.dl5 .dl5-detail-text p { margin: 0 0 1em; }
.dl5 .dl5-detail-text h2 { font-size: 20px; line-height: 26px; margin: 1.4em 0 .6em; }
.dl5 .dl5-shots {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.dl5 .dl5-shot {
display: block;
max-width: 12rem;
background: var(--dl5-visual);
}
.dl5 .dl5-shot img { display: block; max-width: 100%; height: auto; }
.dl5 .dl5-notes {
margin-top: 28px;
color: rgba(216, 216, 216, .82);
font-size: 16px;
line-height: 24px;
}
.dl5 .dl5-notes p {
margin: 0;
padding: 12px 0;
border-top: 1px dashed rgba(255, 255, 255, .45);
}
.dl5 .dl5-notes p:last-child { padding-bottom: 0; }
.dl5 .dl5-detail-text a,
.dl5 .dl5-notes a {
padding-bottom: 2px;
border-bottom: 1px solid rgba(216, 216, 216, .55);
color: inherit;
text-decoration: none;
transition: color .16s ease, border-color .16s ease;
}
.dl5 .dl5-detail-text a:hover,
.dl5 .dl5-detail-text a:focus,
.dl5 .dl5-notes a:hover,
.dl5 .dl5-notes a:focus {
border-bottom-color: #fff;
color: #fff;
text-decoration: none;
}
.dl5 .dl5-notes a.dl5-notes-faq {
padding-bottom: 0;
border-bottom: 0;
}
.dl5 .dl5-meta {
background: var(--dl5-tile);
padding: 22px;
}
.dl5 .dl5-badges {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.dl5 .dl5-badge {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: fit-content;
height: 26px;
min-height: 26px;
padding: 4px 10px;
background: #26adce;
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 18px;
white-space: nowrap;
}
.dl5 .dl5-badge-ok {
background: #6da424;
color: #fff;
}
.dl5 .dl5-meta-row {
display: flex;
gap: 12px;
padding: 12px 0;
font-size: 14px;
line-height: 18px;
}
.dl5 .dl5-meta-row + .dl5-meta-row {
border-top: 1px dashed rgba(255, 255, 255, .45);
}
.dl5 .dl5-meta-key { flex: 0 0 42%; color: rgba(216, 216, 216, .72); }
.dl5 .dl5-meta-value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dl5 .dl5-action {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 40px;
margin-top: 20px;
padding: 0 22px;
border: 1px solid #fff;
border-radius: 20px;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 3px 1px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .14);
color: #000;
font: inherit;
font-size: 14px;
font-weight: 400;
line-height: 38px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .16s ease, color .16s ease;
}
.dl5 .dl5-action:hover,
.dl5 .dl5-action:focus {
background: #e7e7e7;
color: #000;
box-shadow: none;
text-decoration: none;
}
.dl5 .dl5-action svg {
flex: 0 0 14px;
width: 14px;
height: 14px;
color: currentColor;
}
.dl5 .dl5-hint {
margin-top: 14px;
color: rgba(216, 216, 216, .72);
font-size: 12px;
line-height: 17px;
}
.dl5 .dl5-files {
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.dl5 .dl5-file {
border-bottom: 1px dashed rgba(255, 255, 255, .45);
}
.dl5 .dl5-file:first-child {
border-top: 1px dashed rgba(255, 255, 255, .45);
}
.dl5 .dl5-file > a {
display: grid;
grid-template-columns: 15px 1fr auto;
align-items: baseline;
gap: 10px;
padding: 12px 0;
color: var(--dl5-text);
font-size: 14px;
line-height: 18px;
text-decoration: none;
transition: color .16s ease;
}
.dl5 .dl5-file > a:hover,
.dl5 .dl5-file > a:focus {
color: #fff;
text-decoration: none;
}
.dl5 .dl5-file > a svg {
width: 15px;
height: 15px;
align-self: start;
margin-top: 2px;
}
.dl5 .dl5-file-info {
color: rgba(216, 216, 216, .72);
font-size: 14px;
white-space: nowrap;
}
.dl5 .dl5-archive-wrap { padding-bottom: var(--dl5-section-gap); }
.dl5 .dl5-action-zurueck {
display: block;
margin-top: 14px;
color: var(--dl5-text);
font-size: 14px;
line-height: 20px;
text-align: center;
text-decoration: none;
}
.dl5 .dl5-action-zurueck:hover { color: #fff; text-decoration: none; }
.dl5 .dl5-archive {
width: 100%;
margin-top: clamp(34px, 4vw, 58px);
border-top: 1px solid rgba(255, 255, 255, .45);
border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.dl5 .dl5-archive summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 14px 18px 0;
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style: none;
cursor: pointer;
}
.dl5 .dl5-archive summary::-webkit-details-marker { display: none; }
.dl5 .dl5-archive summary::after {
flex: 0 0 9px;
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
content: "";
}
.dl5 .dl5-archive[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.dl5 .dl5-archive-list { padding: 8px 0 28px; }
.dl5 .dl5-archive-note {
max-width: 95ch;
margin: 0 0 28px;
color: var(--dl5-text);
font-size: 16px;
line-height: 26px;
}
.dl5 .dl5-hero {
padding: clamp(52px, 8vw, 96px) var(--dl5-gutter) 0;
}
.dl5 .dl5-filter-row {
position: relative;
z-index: 30;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--dl5-filter-gap);
margin-top: clamp(44px, 6vw, 72px);
}
@media (max-width: 767px) {
.dl5 .dl5-filter-row { grid-template-columns: 1fr; }
}
.dl5 .dl5-filter-control {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 46px;
padding: 0 16px;
border: 1px solid var(--dl5-line);
border-radius: 0;
background: rgba(0, 0, 0, .02);
color: #fff;
font: inherit;
font-size: 14px;
line-height: 24px;
text-align: left;
cursor: pointer;
transition: border-color .16s ease;
}
.dl5 .dl5-filter-control:hover,
.dl5 .dl5-filter-control:focus-visible,
.dl5 .dl5-qa-wrap.is-open .dl5-filter-control,
.dl5 .dl5-lang-wrap.is-open .dl5-filter-control { border-color: #fff; }
.dl5 .dl5-filter-control > svg { flex: none; width: 18px; height: 18px; }
.dl5 .dl5-qa-wrap .dl5-filter-control > svg { flex: 0 0 30px; width: 30px; height: 30px; }
.dl5 .dl5-lang-wrap .dl5-filter-control > svg { width: 9px; height: 10px; }
.dl5 .dl5-qa-wrap,
.dl5 .dl5-lang-wrap {
position: relative;
width: 100%;
min-width: 0;
}
.dl5 .dl5-qa-wrap.is-open::after,
.dl5 .dl5-lang-wrap.is-open::after {
position: absolute;
left: 50%;
top: calc(100% - 6px);
z-index: 71;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #fff;
transform: translateX(-50%);
pointer-events: none;
content: "";
}
.dl5 .dl5-qa-overlay {
position: absolute;
z-index: 70;
left: 0;
top: calc(100% + 12px);
display: none;
grid-template-columns: calc((100% - var(--dl5-filter-gap) * 2) / 3 + var(--dl5-filter-gap) / 2) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
width: calc(300% + var(--dl5-filter-gap) * 2);
min-height: 0;
max-height: 58vh;
overflow: hidden;
background: #fff;
color: #121212;
box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.dl5 .dl5-qa-overlay:not([hidden]) { display: grid; }
.dl5 .dl5-qa-left {
padding: 20px;
border-right: 1px solid #dbdbdb;
}
.dl5 .dl5-qa-right {
min-height: 0;
padding: 20px;
overflow-y: auto;
}
.dl5 .dl5-qa-fade {
position: absolute;
left: calc((100% - var(--dl5-filter-gap) * 2) / 3 + var(--dl5-filter-gap) / 2);
right: 0;
z-index: 3;
height: 24px;
opacity: 0;
pointer-events: none;
transition: opacity .16s ease;
}
.dl5 .dl5-qa-fade--top {
top: 0;
background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, .84) 48%, rgba(255, 255, 255, 0) 100%);
}
.dl5 .dl5-qa-fade--bottom {
bottom: 0;
background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, .84) 48%, rgba(255, 255, 255, 0) 100%);
}
.dl5 .dl5-qa-overlay.is-scroll-up .dl5-qa-fade--top,
.dl5 .dl5-qa-overlay.is-scroll-down .dl5-qa-fade--bottom { opacity: 1; }
.dl5 .dl5-qa-root-link,
.dl5 .dl5-qa-path-row button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 40px;
padding: 8px 20px;
border: 0;
border-radius: 20px;
background: transparent;
color: #121212;
font: inherit;
font-size: 14px;
line-height: 1.15;
letter-spacing: .35px;
text-align: left;
cursor: pointer;
}
.dl5 .dl5-qa-root-link > span:first-child,
.dl5 .dl5-qa-path-row button > span:first-child { min-width: 0; }
.dl5 .dl5-qa-root-link:hover,
.dl5 .dl5-qa-path-row button:hover { background: rgba(0, 0, 0, .05); color: #121212; }
.dl5 .dl5-qa-overlay.is-root .dl5-qa-root-link { font-weight: 700; }
.dl5 .dl5-qa-path-row button:disabled { cursor: default; opacity: 1; }
.dl5 .dl5-qa-path-row button.current-level { background: transparent; font-weight: 700; }
.dl5 .dl5-qa-path-row button.current-level:hover { background: transparent; }
.dl5 .dl5-qa-path-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 10px;
margin-right: -4px;
color: #121212;
transform: translateX(-8px);
transition: transform .12s ease;
}
.dl5 .dl5-qa-root-link:hover .dl5-qa-path-icon,
.dl5 .dl5-qa-path-row button:not(.current-level):hover .dl5-qa-path-icon { transform: translateX(0); }
.dl5 .dl5-qa-chevron {
display: block;
width: 10px;
height: 16px;
margin: auto;
color: currentColor;
overflow: visible;
}
.dl5 .dl5-qa-chevron-up    { transform: rotate(-90deg); }
.dl5 .dl5-qa-chevron-down  { transform: rotate(90deg); }
.dl5 .dl5-qa-chevron-right { transform: none; }
.dl5 .dl5-qa-toolbar {
display: flex;
align-items: center;
margin: 0;
}
.dl5 .dl5-qa-current-title {
box-sizing: border-box;
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
align-items: center;
min-height: 40px;
border: 0;
border-radius: 20px;
background: transparent;
color: #121212;
font-size: 14px;
font-weight: 700;
line-height: 1.15;
letter-spacing: .35px;
text-align: left;
text-decoration: none;
}
.dl5 .dl5-qa-current-title > span:first-child { min-width: 0; padding: 8px 20px; }
.dl5 .dl5-qa-current-title:hover {
background: rgba(0, 0, 0, .05);
color: #121212;
text-decoration: none;
}
.dl5 .dl5-qa-folder-icon {
justify-self: center;
width: 35px;
height: 35px;
transform: translateX(-2px);
filter: brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(98%) contrast(88%);
}
.dl5 .dl5-qa-children {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.dl5 .dl5-qa-item {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
align-items: center;
min-height: 40px;
}
.dl5 .dl5-qa-category-button,
.dl5 .dl5-qa-item-label {
box-sizing: border-box;
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
align-items: center;
width: 100%;
min-width: 0;
min-height: 40px;
border: 1px solid transparent;
border-radius: 20px;
background: transparent;
color: #121212;
font: inherit;
font-size: 14px;
line-height: 1.15;
letter-spacing: .35px;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.dl5 .dl5-qa-category-button > span:first-child,
.dl5 .dl5-qa-item-label > span:first-child { min-width: 0; padding: 8px 20px; }
.dl5 .dl5-qa-category-button:hover,
.dl5 .dl5-qa-item-label:hover {
background: rgba(0, 0, 0, .05);
color: #121212;
text-decoration: none;
}
.dl5 .dl5-qa-category-button .dl5-qa-chevron {
justify-self: center;
opacity: 0;
transform: translateX(-12px);
transition: opacity .12s ease, transform .12s ease;
}
.dl5 .dl5-qa-category-button:hover .dl5-qa-chevron,
.dl5 .dl5-qa-category-button:focus-visible .dl5-qa-chevron {
opacity: 1;
transform: translateX(0);
}
.dl5 .dl5-qa-arrow {
justify-self: center;
width: 19px;
height: 19px;
color: #aaa;
transform: translateX(-2px);
overflow: visible;
}
.dl5 .dl5-qa-hinweis {
margin: 0;
padding: 8px 20px;
color: #6b6b6b;
font-size: 14px;
line-height: 1.15;
}
@media (max-width: 767px) {
.dl5 .dl5-qa-overlay {
width: 100%;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
}
.dl5 .dl5-qa-left,
.dl5 .dl5-qa-right { padding: 18px 14px; }
.dl5 .dl5-qa-left { border-right: 0; border-bottom: 1px solid #d8d8d8; }
.dl5 .dl5-qa-fade { left: 0; }
}
.dl5 .dl5-language-overlay {
position: absolute;
z-index: 70;
left: 0;
top: calc(100% + 12px);
display: none;
width: 100%;
max-height: 419px;
padding: 0;
overflow: hidden;
background: #fff;
color: #121212;
}
.dl5 .dl5-language-overlay:not([hidden]) { display: block; }
.dl5 .dl5-language-list {
max-height: 419px;
padding: 12px 0;
overflow-y: auto;
}
.dl5 .dl5-language-item {
position: relative;
display: block;
width: 100%;
padding: 8px 34px 8px 18px;
color: #1c1c1c;
font-size: 14px;
line-height: 18px;
text-align: left;
text-decoration: none;
}
.dl5 .dl5-language-item:hover { background: #ececec; color: #1c1c1c; text-decoration: none; }
.dl5 .dl5-language-item.is-active::after {
position: absolute;
right: 18px;
top: 50%;
width: 0;
height: 0;
border: 5px solid #000;
border-radius: 5px;
transform: translateY(-50%);
content: "";
}
.dl5 .dl5-language-fade {
position: absolute;
left: 0;
right: 0;
z-index: 2;
height: 26px;
opacity: 0;
pointer-events: none;
transition: opacity .16s ease;
}
.dl5 .dl5-language-fade--top {
top: 0;
background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, .84) 45%, rgba(255, 255, 255, 0) 100%);
}
.dl5 .dl5-language-fade--bottom {
bottom: 0;
background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, .84) 45%, rgba(255, 255, 255, 0) 100%);
}
.dl5 .dl5-language-overlay.is-scroll-up .dl5-language-fade--top,
.dl5 .dl5-language-overlay.is-scroll-down .dl5-language-fade--bottom { opacity: 1; }
@media (max-width: 767px) {
.dl5 .dl5-language-overlay { max-height: min(380px, 90vh); }
}
.dl5 .dl5-sort-wrap { position: relative; }
.dl5 .dl5-listing-head .dl5-sort-wrap { margin-top: -4px; }
.dl5 .dl5-sort-button {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-width: 0;
height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
font: inherit;
font-size: 14px;
line-height: 24px;
white-space: nowrap;
cursor: pointer;
}
.dl5 .dl5-sort-button:hover,
.dl5 .dl5-sort-button:focus-visible { background: transparent; }
.dl5 .dl5-sort-button svg {
flex: 0 0 auto;
display: block;
width: 15px;
height: 8px;
}
.dl5 .dl5-sort-overlay {
position: absolute;
z-index: 70;
right: 0;
top: calc(100% + 14px);
display: none;
width: 300px;
max-width: 90vw;
padding: 12px 0;
border-radius: 0;
background: #fff;
color: #121212;
box-shadow: 0 3px 20px rgba(0, 0, 0, .5);
}
.dl5 .dl5-sort-overlay:not([hidden]) { display: block; }
.dl5 .dl5-sort-overlay::before {
position: absolute;
right: 24px;
top: -16px;
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: #fff;
content: "";
}
.dl5 .dl5-sort-item {
position: relative;
display: block;
width: 100%;
padding: 8px 14px;
border: 0;
background: transparent;
color: #121212;
font-size: 14px;
line-height: 18px;
text-align: left;
text-decoration: none;
}
.dl5 .dl5-sort-item:hover { background: #ececec; color: #121212; text-decoration: none; }
.dl5 .dl5-sort-item.is-active::after {
position: absolute;
right: 14px;
top: 50%;
width: 0;
height: 0;
border: 5px solid #000;
border-radius: 5px;
transform: translateY(-50%);
content: "";
}
.dl5 .dl5-language-noscript { display: flex; gap: 8px; }
.dl5 .dl5-language-noscript select { flex: 1 1 auto; min-width: 0; }
.dl5 .dl5-search-wrap {
position: relative;
width: 100%;
min-width: 0;
}
.dl5 input.dl5-filter-control.dl5-search {
appearance: none;
justify-content: flex-start;
padding-right: 44px;
background-image: none;
color: rgba(255, 255, 255, .6);
outline: 0;
cursor: text;
}
.dl5 input.dl5-filter-control.dl5-search::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.dl5 input.dl5-filter-control.dl5-search:focus { border-color: #fff; color: #fff; }
.dl5 .dl5-search-wrap .cms-icon-search {
position: absolute;
right: 16px;
top: 50%;
color: #fff;
font-size: 18px;
line-height: 18px;
transform: translateY(-50%);
pointer-events: none;
}
.dl5 .dl5-search-topline {
padding-top: 20px;
border-top: 1px solid var(--dl5-line);
}
.dl5 .dl5-search-topline .dl5-title {
min-height: 0;
border-top: 0;
gap: 5px;
}
.dl5 .dl5-search-topline .dl5-title .cms-icon-search {
margin-right: 13px;
font-size: 22px;
line-height: 22px;
}
.dl5 .dl5-search-topline .dl5-title strong { font-weight: 700; }
.dl5 .dl5-search-section + .dl5-search-section { margin-top: var(--dl5-section-gap); }
.dl5 .dl5-facets + .dl5-search-section .dl5-title { border-top: 0; }
.dl5 .dl5-search-more {
display: flex;
justify-content: center;
padding-top: 34px;
}
.dl5 .dl5-search-more[hidden] { display: none; }
.dl5 .dl5-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 22px;
border: 1px solid #fff;
border-radius: 20px;
background: #fff;
color: #000;
font: inherit;
font-size: 14px;
line-height: 38px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background-color .16s ease, color .16s ease;
}
.dl5 .dl5-pill:hover { background: transparent; color: #fff; }
.dl5 .dl5-search-empty {
margin: 0;
padding-top: 18px;
border-top: 1px solid var(--dl5-line);
color: #fff;
font-size: 28px;
font-weight: 300;
line-height: 38px;
}
.dl5 .dl5-facets {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.dl5 .dl5-facet {
flex: 0 1 auto;
max-width: 100%;
padding: 6px 14px;
border: 1px solid rgba(255, 255, 255, .28);
color: rgba(216, 216, 216, .82);
font-size: 13px;
line-height: 18px;
text-decoration: none;
}
.dl5 .dl5-facet:hover { background: var(--dl5-tile); color: var(--dl5-text); text-decoration: none; }
.dl5 .dl5-facet.is-active {
background: var(--dl5-text);
border-color: var(--dl5-text);
color: #121212;
}
.dl5 .dl5-empty {
padding: 32px 0;
color: rgba(216, 216, 216, .72);
}
.pswp {
--gira-pswp-edge: 12px;
--gira-scrollbar-width: var(--gira-lightbox-scrollbar-width, 0px);
}
.pswp .pswp__button--arrow {
position: fixed !important;
top: 50% !important;
width: 60px !important;
height: 60px !important;
margin-top: -30px !important;
}
.pswp .pswp__button--arrow--prev { left: var(--gira-pswp-edge) !important; right: auto !important; }
.pswp .pswp__button--arrow--next {
right: calc(var(--gira-pswp-edge) - var(--gira-scrollbar-width)) !important;
left: auto !important;
}
.pswp .pswp__button--arrow .pswp__icn {
top: 0 !important;
bottom: auto !important;
width: 60px !important;
height: 60px !important;
margin: 0 !important;
opacity: 0 !important;
}
.pswp .pswp__button--arrow::before {
position: absolute;
left: 50%;
top: 50%;
width: 22px;
height: 22px;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .72)) drop-shadow(0 0 10px rgba(0, 0, 0, .45));
content: "";
}
.pswp .pswp__button--arrow--prev::before { transform: translate(-32%, -50%) rotate(135deg); }
.pswp .pswp__button--arrow--next::before { transform: translate(-68%, -50%) rotate(-45deg); }
.dl5 .dl5-shot { cursor: zoom-in; }
.pswp .pswp__img { cursor: pointer; }
.pswp.pswp--zoomed-in .pswp__img { cursor: grab; }
.pswp.pswp--zoomed-in .pswp__img:active { cursor: grabbing; }