/* Clarity – Zitat-Band (draggo_clarity_quote) */
.cl-quote__grid { display: grid; grid-template-columns: 3fr 9fr; gap: 60px; align-items: center; margin: 0; }
.cl-quote__mark { display: flex; justify-content: center; }
.cl-quote__glyph { display: block; height: 180px; font-family: var(--cl-display); font-size: 300px; line-height: 1; font-weight: 700; color: #e10419; }
.cl-sec--red .cl-quote__glyph { color: #fff; }
.cl-quote__logo { display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; padding: 34px; border-radius: 50%; background: #fff; box-shadow: 0 10px 40px rgba(2, 6, 38, .12); box-sizing: border-box; }
.cl-quote__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-quote__text { margin: 0; font-family: var(--cl-sans); font-size: 26px; line-height: 38px; color: var(--cl-sub); }
.cl-quote__text p { margin: 0; font: inherit; color: inherit; }
.cl-quote__text p + p { margin-top: 16px; }
.cl-quote__caption { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; padding-top: 26px; position: relative; }
.cl-quote__caption::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 4px; background: #e10419; }
.cl-sec--red .cl-quote__caption::before { background: #fff; }
.cl-quote__name { font-family: var(--cl-display); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--cl-head); }
.cl-quote__name a { color: inherit; text-decoration: none; }
.cl-quote__name a:hover { color: #e10419; }
.cl-quote__role { font-family: var(--cl-sans); font-size: 16px; line-height: 24px; color: var(--cl-text); }
/* Anführungszeichen wächst beim Einblenden */
[data-cl-anim] .cl-quote__mark.cl-anim { transform: scale(.6); }
[data-cl-anim] .cl-quote__mark.cl-anim.is-in { transform: none; }

.draggo-canvas .cl-quote__text p { font-family: var(--cl-sans); font-size: 26px; line-height: 38px; color: var(--cl-sub); }
.draggo-canvas .cl-quote__glyph { font-family: var(--cl-display); color: #e10419; }
.draggo-canvas .cl-sec--red .cl-quote__glyph { color: #fff; }

@media (max-width: 991px) {
    .cl-quote__grid { grid-template-columns: 1fr; gap: 10px; }
    .cl-quote__mark { justify-content: flex-start; }
    .cl-quote__glyph { height: 110px; font-size: 180px; }
    .cl-quote__logo { width: 140px; height: 140px; padding: 22px; }
}
@media (max-width: 767px) {
    .cl-quote__text, .draggo-canvas .cl-quote__text p { font-size: 20px; line-height: 30px; }
}