/* Clarity – Split mit Bild (draggo_clarity_split)
   Raster über die volle Fensterbreite: [Rand] [Text] [Abstand] [Bild] [Rand].
   Rand = max(20px, (100% − 1400px) / 2) → Text in der 1400-px-Flucht; „randabfallend“ belegt die Randspur mit. */
.cl-split__grid {
    --clsp-side: max(20px, calc((100% - 1400px) / 2));
    --clsp-gap: 80px;
    --clsp-t: 6fr;
    --clsp-i: 6fr;
    display: grid;
    grid-template-columns: var(--clsp-side) minmax(0, var(--clsp-t)) var(--clsp-gap) minmax(0, var(--clsp-i)) var(--clsp-side);
    align-items: center;
}
.cl-split--r57 .cl-split__grid { --clsp-t: 5fr; --clsp-i: 7fr; }
.cl-split--r75 .cl-split__grid { --clsp-t: 7fr; --clsp-i: 5fr; }
.cl-split--img-left .cl-split__grid { grid-template-columns: var(--clsp-side) minmax(0, var(--clsp-i)) var(--clsp-gap) minmax(0, var(--clsp-t)) var(--clsp-side); }
.cl-split--v-top .cl-split__grid { align-items: start; }

.cl-split__body { grid-row: 1; grid-column: 2 / 3; min-width: 0; }
.cl-split--img-left .cl-split__body { grid-column: 4 / 5; }
.cl-split.cl-split--noimg .cl-split__body { grid-column: 2 / 5; }
.cl-split__media { grid-row: 1; grid-column: 4 / 5; position: relative; min-width: 0; }
.cl-split--img-left .cl-split__media { grid-column: 2 / 3; }
.cl-split--bleed .cl-split__media { grid-column: 4 / 6; }
.cl-split--bleed.cl-split--img-left .cl-split__media { grid-column: 1 / 3; }

/* Textspalte */
.cl-sec.cl-split .cl-split__title { margin-bottom: 24px; }
.cl-split__lead { margin: 0 0 20px; font-family: var(--cl-sans); font-size: 20px; line-height: 30px; color: var(--cl-sub); }
.cl-split__lead :is(p, li) { margin: 0; font: inherit; color: inherit; }
.cl-split__lead > * + * { margin-top: 12px; }
.cl-split__lead :is(strong, b) { font-weight: 600; }
.cl-split__lead a { color: #e10419; }
.cl-on-dark .cl-split__lead a { color: #fff; }
.cl-sec.cl-split .cl-split__subtitle { margin: 6px 0 12px; }
.cl-split__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cl-split__title + .cl-split__chips { margin-top: 6px; }
.cl-split__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* Bild */
.cl-split__frame { position: relative; display: block; height: 560px; overflow: hidden; }
.cl-split--bleed .cl-split__frame { border-radius: 30px 0 0 30px; }
.cl-split--bleed.cl-split--img-left .cl-split__frame { border-radius: 0 30px 30px 0; }
.cl-split--framed .cl-split__frame { border-radius: 30px 120px 30px 30px; box-shadow: 0 30px 60px rgba(2, 6, 38, .18); }
.cl-split--framed.cl-split--img-left .cl-split__frame { border-radius: 120px 30px 30px 30px; }
.cl-split__img { display: block; width: 100%; max-width: none; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; translate: 0 var(--clsp-py, 0px); transition: scale .8s ease; }
.cl-split__media:hover .cl-split__img { scale: 1.05; }
/* Bildmodus „logo“: unbeschnitten auf weißer Karte */
.cl-split--logo .cl-split__frame { display: flex; align-items: center; justify-content: center; height: auto; min-height: 380px; padding: 60px; border-radius: 30px; background: #fff; box-shadow: 0 20px 60px rgba(2, 6, 38, .12); box-sizing: border-box; }
.cl-split--logo .cl-split__img { width: auto; max-width: 100%; height: auto; max-height: 300px; margin: 0; object-fit: contain; translate: none; }
.cl-split--logo .cl-split__media:hover .cl-split__img { scale: 1.03; }
/* Siegel über der inneren unteren Bildecke */
.cl-split__badge { position: absolute; z-index: 2; bottom: -34px; left: -50px; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; pointer-events: none; }
.cl-split--img-left .cl-split__badge { left: auto; right: -50px; }
.cl-split__badge img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(2, 6, 38, .25)); }

/* Einblenden: Bild wird von der Kante her aufgedeckt, Siegel springt nach */
[data-cl-anim] .cl-split__media.cl-anim { opacity: 1; transform: none; }
[data-cl-anim] .cl-split__media .cl-split__frame { clip-path: inset(0 0 0 100%); transition: clip-path .8s cubic-bezier(.65, 0, .35, 1) var(--cl-delay, 0ms); }
[data-cl-anim].cl-split--img-left .cl-split__media .cl-split__frame { clip-path: inset(0 100% 0 0); }
[data-cl-anim] .cl-split__media.is-in .cl-split__frame { clip-path: inset(-80px); }
[data-cl-anim] .cl-split__media .cl-split__badge { opacity: 0; scale: .6; transition: opacity .5s ease .7s, scale .5s ease .7s; }
[data-cl-anim] .cl-split__media.is-in .cl-split__badge { opacity: 1; scale: 1; }

/* Editor-Arbeitsfläche: kein JS → Endzustand */
.draggo-canvas [data-cl-anim] .cl-split__media .cl-split__frame { clip-path: none; }
.draggo-canvas [data-cl-anim] .cl-split__media .cl-split__badge { opacity: 1; scale: 1; }
.draggo-canvas .cl-split .cl-split__lead :is(p, li) { font: inherit; color: inherit; }
.draggo-canvas .cl-sec.cl-split .cl-split__subtitle { font-family: var(--cl-display); font-size: 24px; line-height: 1.33; font-weight: 500; color: var(--cl-sub); }

@media (max-width: 1199px) {
    .cl-split__grid { --clsp-gap: 50px; }
    .cl-split__frame { height: 480px; }
}
@media (max-width: 991px) {
    .cl-split .cl-split__grid, .cl-split.cl-split--img-left .cl-split__grid { grid-template-columns: 20px minmax(0, 1fr) 20px; row-gap: 40px; align-items: start; }
    .cl-split .cl-split__media, .cl-split.cl-split--img-left .cl-split__media { grid-column: 2 / 3; grid-row: 1; }
    .cl-split.cl-split--bleed .cl-split__media { grid-column: 1 / -1; }
    .cl-split .cl-split__body, .cl-split.cl-split--img-left .cl-split__body { grid-column: 2 / 3; grid-row: 2; }
    .cl-split.cl-split--noimg .cl-split__body { grid-column: 2 / 3; grid-row: 1; }
    .cl-split__frame { height: 420px; }
    .cl-split.cl-split--bleed .cl-split__frame { border-radius: 0; }
    .cl-split .cl-split__badge, .cl-split.cl-split--img-left .cl-split__badge { left: auto; right: 16px; bottom: -30px; width: 120px; height: 120px; }
}
@media (max-width: 767px) {
    .cl-split__frame { height: 260px; }
    .cl-split.cl-split--framed .cl-split__frame { border-radius: 20px 60px 20px 20px; }
    .cl-split.cl-split--framed.cl-split--img-left .cl-split__frame { border-radius: 60px 20px 20px 20px; }
    .cl-split.cl-split--logo .cl-split__frame { min-height: 0; padding: 30px; border-radius: 20px; }
    .cl-split--logo .cl-split__img { max-height: 180px; }
    .cl-split__lead { font-size: 18px; line-height: 27px; }
    .cl-split .cl-split__badge, .cl-split.cl-split--img-left .cl-split__badge { width: 90px; height: 90px; bottom: -24px; }
    .cl-split__actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-split.cl-split .cl-split__media .cl-split__frame { clip-path: none; transition: none; }
    .cl-split.cl-split .cl-split__media .cl-split__badge { opacity: 1; scale: 1; transition: none; }
    .cl-split__img { translate: none; }
}

/* Arbeitsfläche: Draggos img-Grundregel (height:auto) überstimmen */
.draggo-canvas .cl-split .cl-split__frame .cl-split__img { height: calc(100% + 60px); max-width: none; }
.draggo-canvas .cl-split.cl-split--logo .cl-split__frame .cl-split__img { width: auto; height: auto; max-width: 100%; }