/* Clarity – Stufen / Zeitleiste (draggo_clarity_steps) */
.cl-steps { --clst-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E"); }
.cl-steps--tail { background-image: linear-gradient(to top, #f4f4f6 0, #f4f4f6 var(--clst-tail, 100px), transparent var(--clst-tail, 100px)); }
.cl-steps__head { margin-bottom: 60px; }
.cl-steps__head--split { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: end; }
.cl-steps__list { position: relative; margin: 0; padding: 0; list-style: none; }
.cl-steps__step { position: relative; margin: 0; padding: 0; list-style: none; }
.cl-steps__step::marker { content: none; }

/* ---- Karte (gemeinsam) -------------------------------------------------- */
.cl-steps__card { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; background-color: #fff; background-image: var(--clst-bg, none); background-size: cover; background-position: center; box-sizing: border-box; }
.cl-steps__card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cl-steps__step--grey .cl-steps__card { background-color: #f4f4f6; }
.cl-steps__step--red .cl-steps__card { background-color: #e10419; background-image: var(--clst-bg, linear-gradient(135deg, #e10419, #8f0815)); }
.cl-steps__step--light.has-bg .cl-steps__card::before { background: rgba(255, 255, 255, .88); }
.cl-steps__step--grey.has-bg .cl-steps__card::before { background: rgba(244, 244, 246, .9); }
.cl-steps__step--red.has-bg .cl-steps__card::before { background: linear-gradient(135deg, rgba(225, 4, 25, .92), rgba(143, 8, 21, .88)); }
.cl-sec--light .cl-steps__step--light:not(.has-bg) .cl-steps__card { box-shadow: inset 0 0 0 1px #ececf0; }

.cl-steps .cl-steps__mark { margin: 0 0 12px; font-family: var(--cl-display); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #e10419; }
.cl-steps .cl-steps__title { margin: 0; font-family: var(--cl-display); font-size: 42px; line-height: 1.2; font-weight: 500; color: #e10419; overflow-wrap: break-word; hyphens: auto; }
.cl-steps .cl-steps__text { margin-top: 18px; font-family: var(--cl-sans); font-size: 18px; line-height: 26px; color: #686868; }
.cl-steps .cl-steps__text :is(p, li) { margin: 0; font: inherit; color: inherit; }
.cl-steps .cl-steps__text > * + * { margin-top: 12px; }
.cl-steps .cl-steps__text :is(ul, ol) { padding-left: 22px; }
.cl-steps .cl-steps__text li::marker { color: #e10419; }
.cl-steps .cl-steps__text a { color: #e10419; }
.cl-steps__step--red .cl-steps__mark, .cl-steps__step--red .cl-steps__title { color: #fff; }
.cl-steps__step--red .cl-steps__text { color: rgba(255, 255, 255, .85); }
.cl-steps .cl-steps__step--red .cl-steps__text :is(a, li::marker) { color: #fff; }
.cl-steps__media { overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 2; background: #e9e9ee; box-shadow: 0 20px 40px rgba(2, 6, 38, .14); }
.cl-steps .cl-steps__img { display: block; width: 100%; max-width: none; height: 100%; margin: 0; object-fit: cover; transition: transform .6s ease; }
.cl-steps__card:hover .cl-steps__img { transform: scale(1.05); }

/* ---- Zeitleiste --------------------------------------------------------- */
.cl-steps--timeline .cl-steps__step { --clst-gap: 40px; padding-bottom: var(--clst-gap); }
.cl-steps--timeline .cl-steps__step.is-last { --clst-gap: 0px; }
.cl-steps--timeline .cl-steps__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 140px; align-items: center; padding: 60px; }
.cl-steps--timeline .cl-steps__content { grid-area: 1 / 1; }
.cl-steps--timeline .cl-steps__media { grid-area: 1 / 2; }
.cl-steps--timeline .is-flip .cl-steps__content { grid-area: 1 / 2; }
.cl-steps--timeline .is-flip .cl-steps__media { grid-area: 1 / 1; }
.cl-steps--timeline .no-media .cl-steps__content { grid-column: 1 / -1; }
/* Linie: je Schritt ein Stück; über der Karte in Kartenfarbe, im Zwischenraum rot */
.cl-steps__line { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: 2px; margin-left: -1px; pointer-events: none;
    background: linear-gradient(to bottom, var(--clst-track-card, #dcdce2) calc(100% - var(--clst-gap)), #dcdce2 calc(100% - var(--clst-gap))); }
.cl-steps__fill { position: absolute; inset: 0; transform: scaleY(var(--clst-p, 1)); transform-origin: top;
    background: linear-gradient(to bottom, var(--clst-fill-card, #e10419) calc(100% - var(--clst-gap)), #e10419 calc(100% - var(--clst-gap))); }
.cl-steps__step--red { --clst-track-card: rgba(255, 255, 255, .35); --clst-fill-card: #fff; }
.cl-steps__dot { position: absolute; top: calc((100% - var(--clst-gap)) / 2); left: 50%; z-index: 4; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #dcdce2; border-radius: 50%; background: #fff; box-sizing: border-box; transition: background-color .4s, border-color .4s, box-shadow .4s, transform .4s; }
.cl-steps__step.is-lit .cl-steps__dot, .cl-steps:not(.is-ready) .cl-steps__dot { border-color: #fff; background: #e10419; box-shadow: 0 0 0 6px rgba(225, 4, 25, .22); transform: scale(1.1); }
.cl-steps__step--red.is-lit .cl-steps__dot, .cl-steps:not(.is-ready) .cl-steps__step--red .cl-steps__dot { border-color: #e10419; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .3); }

/* ---- Stufen ------------------------------------------------------------- */
.cl-steps--stairs .cl-steps__list { display: grid; grid-template-columns: repeat(var(--clst-n, 3), minmax(0, 1fr)); gap: 60px 50px; align-items: stretch; padding-bottom: calc((var(--clst-n, 3) - 1) * 40px); }
.cl-steps--stairs .cl-steps__step { display: flex; transform: translateY(calc(var(--clst-i, 0) * 40px)); }
.cl-steps--stairs .cl-steps__card { display: flex; flex-direction: column; flex: 1; gap: 26px; padding: 30px; transition: transform .4s ease, box-shadow .4s ease, opacity .8s ease var(--cl-delay, 0ms); }
.cl-steps--stairs .cl-steps__card:hover { box-shadow: 0 24px 50px rgba(2, 6, 38, .14); }
.cl-steps--stairs .cl-steps__media { order: -1; box-shadow: none; }
.cl-steps--stairs .cl-steps__title { font-size: 32px; }
.cl-steps__arrow { position: absolute; top: 50%; right: -43px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #e10419; color: #fff; box-shadow: 0 0 0 5px #fff; }
.cl-sec--grey .cl-steps__arrow { box-shadow: 0 0 0 5px #f4f4f6; }
.cl-on-dark .cl-steps__arrow { box-shadow: none; }
.cl-steps__arrow::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--clst-arrow) center / contain no-repeat; mask: var(--clst-arrow) center / contain no-repeat; }

/* ---- Editor-Arbeitsfläche ---------------------------------------------- */
.draggo-canvas .cl-steps .cl-steps__title { font-family: var(--cl-display); font-size: 42px; line-height: 1.2; color: #e10419; }
.draggo-canvas .cl-steps--stairs .cl-steps__title { font-size: 32px; }
.draggo-canvas .cl-steps .cl-steps__step--red .cl-steps__title, .draggo-canvas .cl-steps .cl-steps__step--red .cl-steps__mark { color: #fff; }
.draggo-canvas .cl-steps .cl-steps__mark { font-family: var(--cl-display); font-size: 14px; color: #e10419; }
.draggo-canvas .cl-steps .cl-steps__text :is(p, li) { font-family: var(--cl-sans); font-size: 18px; line-height: 26px; color: #686868; }
.draggo-canvas .cl-steps .cl-steps__step--red .cl-steps__text :is(p, li) { color: rgba(255, 255, 255, .85); }
.draggo-canvas .cl-steps__fill { transform: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1199px) {
    .cl-steps--timeline .cl-steps__card { column-gap: 100px; padding: 44px; }
    .cl-steps .cl-steps__title, .draggo-canvas .cl-steps .cl-steps__title { font-size: 36px; }
    .cl-steps--stairs .cl-steps__list { gap: 50px 40px; }
    .cl-steps--stairs .cl-steps__arrow { right: -38px; }
    .cl-steps--stairs .cl-steps__title, .draggo-canvas .cl-steps--stairs .cl-steps__title { font-size: 26px; }
}
@media (max-width: 991px) {
    .cl-steps__head--split { grid-template-columns: 1fr; gap: 20px; }
    .cl-steps__head { margin-bottom: 40px; }
    /* Zeitleiste: Linie links, Einträge rechts */
    .cl-steps--timeline .cl-steps__step { padding-left: 46px; }
    .cl-steps--timeline .cl-steps__line { left: 15px; }
    .cl-steps--timeline .cl-steps__dot { top: 44px; left: 15px; }
    .cl-steps--timeline .cl-steps__card { grid-template-columns: minmax(0, 1fr); row-gap: 26px; padding: 34px 30px; }
    .cl-steps--timeline .cl-steps__content, .cl-steps--timeline .is-flip .cl-steps__content { grid-area: 1 / 1; }
    .cl-steps--timeline .cl-steps__media, .cl-steps--timeline .is-flip .cl-steps__media { grid-area: 2 / 1; }
    /* Linie im Kartenbereich links neben der Karte: Kartenfarbe spielt keine Rolle */
    .cl-steps__step--red { --clst-track-card: #dcdce2; --clst-fill-card: #e10419; }
    .cl-steps__step--red.is-lit .cl-steps__dot, .cl-steps:not(.is-ready) .cl-steps__step--red .cl-steps__dot { border-color: #fff; background: #e10419; box-shadow: 0 0 0 6px rgba(225, 4, 25, .22); }
    /* Stufen: gestapelt, Pfeile nach unten */
    .cl-steps--stairs .cl-steps__list { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: 0; }
    .cl-steps--stairs .cl-steps__step { transform: none; }
    .cl-steps--stairs .cl-steps__arrow, .cl-steps--stairs .cl-steps__arrow { top: auto; right: auto; bottom: -46px; left: 50%; margin: 0 0 0 -18px; transform: rotate(90deg); }
}
@media (max-width: 767px) {
    .cl-steps--timeline .cl-steps__step { --clst-gap: 30px; padding-left: 34px; }
    .cl-steps--timeline .cl-steps__step.is-last { --clst-gap: 0px; }
    .cl-steps--timeline .cl-steps__line { left: 9px; }
    .cl-steps--timeline .cl-steps__dot { left: 9px; top: 36px; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
    .cl-steps--timeline .cl-steps__card, .cl-steps--stairs .cl-steps__card { padding: 26px 20px; border-radius: 16px; }
    .cl-steps .cl-steps__title, .draggo-canvas .cl-steps .cl-steps__title, .cl-steps--stairs .cl-steps__title { font-size: 28px; }
    .cl-steps .cl-steps__text, .draggo-canvas .cl-steps .cl-steps__text :is(p, li) { font-size: 16px; line-height: 24px; }
    .cl-steps__media { border-radius: 12px; }
    .cl-steps--tail { --clst-tail: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-steps__dot, .cl-steps__img, .cl-steps--stairs .cl-steps__card { transition: none; }
}