/* Clarity – Bild/Video mit überlappender Textkarte (draggo_clarity_overlap) */
.cl-overlap__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; align-items: start; }
.cl-overlap__media { grid-row: 1; grid-column: 1 / 9; position: relative; z-index: 1; min-width: 0; }
.cl-overlap__card { grid-row: 1; grid-column: 8 / 13; position: relative; z-index: 2; margin-top: 80px; min-width: 0; }
.cl-overlap--img-right .cl-overlap__media { grid-column: 5 / 13; }
.cl-overlap--img-right .cl-overlap__card { grid-column: 1 / 6; }
.cl-overlap.cl-overlap--nomedia .cl-overlap__card { grid-column: 1 / 13; margin-top: 0; }
.cl-overlap.cl-overlap--nocard .cl-overlap__media { grid-column: 1 / 13; }

.cl-overlap__frame { position: relative; height: 600px; overflow: hidden; border-radius: 20px; background: linear-gradient(135deg, #010317, #020626); }
.cl-overlap--h480 .cl-overlap__frame { height: 480px; }
.cl-overlap--auto .cl-overlap__grid { align-items: stretch; }
.cl-overlap--auto .cl-overlap__card { margin-block: 80px; }
.cl-overlap--auto .cl-overlap__frame { height: 100%; min-height: 480px; }
.cl-overlap .cl-overlap__media--video .cl-overlap__frame { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
.cl-overlap__img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cl-overlap__media:hover .cl-overlap__img { transform: scale(1.04); }

/* Video (2-Klick): Vorschau, roter Play-Kreis, Hinweis */
.cl-overlap__media--video .cl-overlap__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 50%, rgba(1, 3, 23, .15), rgba(1, 3, 23, .55)); pointer-events: none; }
.cl-overlap__media--video .cl-overlap__img { position: absolute; inset: 0; }
.cl-overlap__frame.is-playing::before { content: none; }
.cl-overlap__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cl-overlap__play { position: absolute; z-index: 2; inset: 0; width: 96px; height: 96px; margin: auto; padding: 0; border: 0; border-radius: 50%; background: #e10419; box-shadow: 0 12px 30px rgba(143, 8, 21, .35); cursor: pointer; transition: background-color .3s, transform .3s; }
.cl-overlap__play::after { content: ""; position: absolute; inset: -12px; border: 2px solid rgba(255, 255, 255, .75); border-radius: 50%; opacity: 0; }
.cl-overlap__play:hover, .cl-overlap__play:focus-visible { background: #8f0815; transform: scale(1.06); }
.cl-overlap__play:hover::after, .cl-overlap__play:focus-visible::after { animation: clov-pulse 1.4s ease-out infinite; }
.cl-overlap__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cl-overlap__play-icon { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; transform: translate(-38%, -50%); }
.cl-overlap__consent { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 20px 14px; background: linear-gradient(rgba(1, 3, 23, 0), rgba(1, 3, 23, .85)); color: rgba(255, 255, 255, .9); font-family: var(--cl-sans); font-size: 13px; line-height: 18px; text-align: center; }
@keyframes clov-pulse { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }

/* Textkarte */
.cl-overlap__card { --cl-text: #686868; --cl-head: #000; --cl-sub: #020626; padding: 50px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgba(2, 6, 38, .16); box-sizing: border-box; }
.cl-overlap__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #e10419; }
.cl-overlap__card--grey { background: #f4f4f6; }
.cl-overlap__card--red { --cl-text: rgba(255, 255, 255, .85); --cl-head: #fff; --cl-sub: #fff; background: linear-gradient(135deg, #e10419, #8f0815); }
.cl-overlap__card--red::before { background: #020626; }
.cl-overlap__card--navy { --cl-text: rgba(255, 255, 255, .85); --cl-head: #fff; --cl-sub: #fff; background: linear-gradient(135deg, #010317, #020626); }
.cl-sec.cl-overlap .cl-overlap__title { margin-bottom: 20px; font-size: 40px; line-height: 1.2; }
.cl-sec.cl-overlap .cl-overlap__subtitle { margin: 0 0 16px; font-size: 22px; line-height: 30px; }
.cl-overlap__lead { margin: 0 0 16px; font-family: var(--cl-sans); font-size: 20px; line-height: 30px; color: var(--cl-sub); }
.cl-overlap__lead :is(p, li) { margin: 0; font: inherit; color: inherit; }
.cl-overlap__lead > * + * { margin-top: 12px; }
.cl-overlap__lead :is(strong, b) { font-weight: 600; }
.cl-overlap__actions { margin-top: 30px; }
/* Farben der Karte gehen vor die Fläche des Abschnitts */
.cl-overlap .cl-overlap__card:not(.cl-overlap__card--red) .cl-kicker.cl-overlap__kicker { color: #e10419; }
.cl-overlap .cl-overlap__card.cl-overlap__card--red .cl-kicker.cl-overlap__kicker { color: #fff; }
.cl-overlap .cl-overlap__card:not(.cl-overlap__card--red) .cl-title.cl-title--red, .cl-overlap .cl-overlap__card:not(.cl-overlap__card--red) .cl-title.cl-overlap__title span { color: #e10419; }
.cl-overlap .cl-overlap__card.cl-overlap__card--red .cl-title.cl-title--red, .cl-overlap .cl-overlap__card.cl-overlap__card--red .cl-title.cl-overlap__title span { color: #fff; }
.cl-overlap .cl-overlap__card:is(.cl-overlap__card--white, .cl-overlap__card--grey) .cl-text a, .cl-overlap .cl-overlap__card:is(.cl-overlap__card--white, .cl-overlap__card--grey) .cl-overlap__lead a { color: #e10419; }
.cl-overlap .cl-overlap__card:is(.cl-overlap__card--red, .cl-overlap__card--navy) .cl-text a, .cl-overlap .cl-overlap__card:is(.cl-overlap__card--red, .cl-overlap__card--navy) .cl-overlap__lead a { color: #fff; }
.cl-overlap .cl-overlap__card:is(.cl-overlap__card--red) .cl-text li::marker { color: #fff; }
.cl-overlap .cl-overlap__card:not(.cl-overlap__card--red) .cl-btn.cl-overlap__btn { background: #e10419; border-color: #e10419; color: #fff; }
.cl-overlap .cl-overlap__card:not(.cl-overlap__card--red) .cl-btn.cl-overlap__btn:hover { background: #8f0815; border-color: #8f0815; }
.cl-overlap .cl-overlap__card.cl-overlap__card--red .cl-btn.cl-overlap__btn { background: #fff; border-color: #fff; color: #e10419; }
.cl-overlap .cl-overlap__card.cl-overlap__card--red .cl-btn.cl-overlap__btn:hover { background: #020626; border-color: #020626; color: #fff; }

/* Einblenden: Bild von der Bildseite, Karte 200 ms später von der Gegenseite */
[data-cl-anim] .cl-overlap__media.cl-anim { transform: translateX(-60px); }
[data-cl-anim].cl-overlap--img-right .cl-overlap__media.cl-anim { transform: translateX(60px); }
[data-cl-anim] .cl-overlap__card.cl-anim { transform: translateX(60px); transition-delay: calc(var(--cl-delay, 0ms) + 200ms); }
[data-cl-anim].cl-overlap--img-right .cl-overlap__card.cl-anim { transform: translateX(-60px); }
[data-cl-anim] .cl-overlap__grid .cl-anim.is-in { transform: none; }

/* Editor-Arbeitsfläche */
.draggo-canvas [data-cl-anim] .cl-overlap__grid .cl-anim { opacity: 1; transform: none; }
.draggo-canvas .cl-sec.cl-overlap .cl-overlap__title { font-size: 40px; line-height: 1.2; color: var(--cl-head); }
.draggo-canvas .cl-sec.cl-overlap .cl-overlap__card:not(.cl-overlap__card--red) .cl-title--red { color: #e10419; }
.draggo-canvas .cl-sec.cl-overlap .cl-overlap__subtitle { font-family: var(--cl-display); font-size: 22px; line-height: 30px; font-weight: 500; color: var(--cl-sub); }
.draggo-canvas .cl-overlap .cl-overlap__lead :is(p, li) { font: inherit; color: inherit; }
.draggo-canvas .cl-overlap .cl-overlap__consent { font-family: var(--cl-sans); font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .9); }

@media (max-width: 1199px) {
    .cl-overlap__grid { column-gap: 20px; }
    .cl-overlap__card { padding: 40px; }
    .cl-sec.cl-overlap .cl-overlap__title, .draggo-canvas .cl-sec.cl-overlap .cl-overlap__title { font-size: 34px; }
}
@media (max-width: 991px) {
    .cl-overlap__grid { display: block; }
    .cl-overlap__frame, .cl-overlap--h480 .cl-overlap__frame, .cl-overlap--auto .cl-overlap__frame { height: 420px; min-height: 0; }
    .cl-overlap .cl-overlap__card, .cl-overlap--auto .cl-overlap__card { margin: -40px 20px 0; }
    .cl-overlap.cl-overlap--nomedia .cl-overlap__card { margin: 0; }
    [data-cl-anim] .cl-overlap__grid .cl-anim:not(.is-in) { transform: translateY(24px); }
}
@media (max-width: 767px) {
    .cl-overlap__frame, .cl-overlap--h480 .cl-overlap__frame, .cl-overlap--auto .cl-overlap__frame { height: 280px; }
    .cl-overlap__card { padding: 34px 24px 30px; }
    .cl-sec.cl-overlap .cl-overlap__title, .draggo-canvas .cl-sec.cl-overlap .cl-overlap__title { font-size: 30px; line-height: 36px; }
    .cl-sec.cl-overlap .cl-overlap__subtitle { font-size: 20px; line-height: 28px; }
    .cl-overlap__lead { font-size: 18px; line-height: 27px; }
    .cl-overlap__play { width: 72px; height: 72px; }
    .cl-overlap__play-icon { border-width: 12px 0 12px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-cl-anim] .cl-overlap__grid .cl-anim { transform: none !important; }
    .cl-overlap__play:hover::after { animation: none; }
}

/* Lange Karten: das Bild bleibt beim Lesen stehen (overflow:clip statt hidden, sonst greift sticky nicht) */
.cl-sec.cl-overlap { overflow: hidden; overflow: clip; }
@media (min-width: 992px) {
    .cl-overlap:not(.cl-overlap--auto) .cl-overlap__media { position: sticky; top: 140px; }
}
@media (max-width: 767px) {
    .cl-sec.cl-overlap .cl-overlap__title, .draggo-canvas .cl-sec.cl-overlap .cl-overlap__title { font-size: 26px; line-height: 32px; hyphens: auto; overflow-wrap: normal; }
}

/* Arbeitsfläche: Draggos img-Grundregel (height:auto) überstimmen */
.draggo-canvas .cl-overlap .cl-overlap__frame .cl-overlap__img { width: 100%; height: 100%; max-width: none; }

/* Mobil/Tablet mit Video: Karte nicht über das Vorschaubild schieben (verdeckt sonst den Datenschutz-Hinweis) */
@media (max-width: 991px) {
    .cl-overlap:has(.cl-overlap__media--video) .cl-overlap__card { margin-top: 20px; }
}