/* Clarity – Bildfläche mit zweispaltigem Text (draggo_clarity_imageband) */
.cl-imageband .cl-imageband__title { margin: 0 0 40px; }
.cl-imageband--align-center .cl-imageband__title { text-align: center; }
.cl-imageband__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: start; }
.cl-imageband .cl-imageband__sub { position: relative; margin: 0 0 16px; padding-top: 24px; }
.cl-imageband .cl-imageband__sub::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 4px; background: #e10419; }
.cl-imageband.cl-sec--red .cl-imageband__sub::before { background: #fff; }
.cl-imageband__btn { margin-top: 30px; }
.cl-imageband .cl-btn { padding: 10px 22px; font-size: 18px; line-height: 18px; }
/* Spalten gleiten von links bzw. rechts ein */
.cl-imageband[data-cl-anim] .cl-imageband__col--left:not(.is-in) { transform: translateX(-40px); }
.cl-imageband[data-cl-anim] .cl-imageband__col--right:not(.is-in) { transform: translateX(40px); }

/* Startseiten-Look (Abschnitt 05 „Clarity integriert KI“) */
.cl-imageband--look-start.cl-sec { --cl-text: #fff; --cl-head: #fff; --cl-sub: #fff; }
.cl-imageband--look-start.cl-sec--has-bg::before { background: rgba(0, 0, 0, .5); }
.cl-imageband--look-start.cl-sec--sp-normal { padding-top: max(5%, 50px); padding-bottom: calc(max(5%, 50px) + 10px); }
.cl-imageband--look-start .cl-imageband__title { margin-bottom: 30px; line-height: 50px; }
.cl-imageband--look-start .cl-imageband__grid { gap: 20px; padding-inline: 10px; }
.cl-imageband--look-start .cl-imageband__text { text-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.cl-imageband--look-start .cl-imageband__text > * + * { margin-top: 0; }
.cl-imageband--look-start .cl-imageband__col--right .cl-imageband__text > * + * { margin-top: 26px; }
.cl-imageband--look-start .cl-imageband__text a { color: #fff; text-decoration: underline; }
.cl-imageband--look-start .cl-imageband__btn { margin-top: 20px; }

.draggo-canvas .cl-imageband[data-cl-anim] .cl-imageband__col:not(.is-in) { transform: none; }
.draggo-canvas .cl-imageband .cl-imageband__sub { font-family: var(--cl-display); font-size: 24px; line-height: 1.33; font-weight: 500; color: var(--cl-sub); }
.draggo-canvas .cl-imageband--look-start .cl-imageband__title { line-height: 50px; }
.draggo-canvas .cl-imageband--look-start .cl-imageband__text :is(p, li) { margin: 0; }
.draggo-canvas .cl-imageband--look-start .cl-imageband__col--right .cl-imageband__text > * + * { margin-top: 26px; }

@media (max-width: 767px) {
    .cl-imageband__grid, .cl-imageband--look-start .cl-imageband__grid { grid-template-columns: 1fr; gap: 40px; padding-inline: 0; }
    .cl-imageband .cl-imageband__title { margin-bottom: 24px; }
    .cl-imageband--look-start .cl-imageband__title, .draggo-canvas .cl-imageband--look-start .cl-imageband__title { margin-bottom: 20px; font-size: 36px; line-height: 40px; }
    .cl-imageband--look-start .cl-imageband__grid { gap: 20px; }
    .cl-imageband[data-cl-anim] .cl-imageband__col--right:not(.is-in) { transform: translateX(-40px); }
}