/* Clarity – Feature-Icon-Raster (draggo_clarity_features) */
.cl-features { --clft-cols: 3; --clft-gap: 30px; --clft-line: rgba(2, 6, 38, .12); }
.cl-features--c2 { --clft-cols: 2; }
.cl-features--c4 { --clft-cols: 4; }
.cl-features.cl-on-dark { --clft-line: rgba(255, 255, 255, .25); }

/* Kopf */
.cl-features__head { margin-bottom: 60px; }
.cl-features__head--center { text-align: center; }
.cl-features__head .cl-features__intro { margin-top: 20px; }
.cl-features__head--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px 60px; align-items: end; }
.cl-features__head--split .cl-features__intro { margin-top: 0; }

/* Raster: feste Spaltenbreite (gleich breit), Flex-Reihen strecken (gleich hoch), letzte Reihe optional mittig */
.cl-features__grid { display: flex; flex-wrap: wrap; gap: var(--clft-gap); counter-reset: clft; }
.cl-features--center-last .cl-features__grid { justify-content: center; }
.cl-features__cell { display: flex; flex: 0 0 calc((100% - (var(--clft-cols) - 1) * var(--clft-gap)) / var(--clft-cols)); min-width: 0; counter-increment: clft; }
.cl-features__item { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; transition: transform .4s ease, box-shadow .4s ease; }
.cl-features__body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.cl-features__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 24px; border-radius: 6px; background: #e10419; color: #fff; font-size: 22px; line-height: 1; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.cl-features__icon img { display: block; width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); transition: filter .3s ease; }
.cl-features__item:hover .cl-features__icon { background: #8f0815; transform: rotate(8deg); }

.cl-features__sub { margin: 0 0 6px; font-family: var(--cl-display); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #e10419; }
.cl-features__title { margin: 0 0 12px; font-family: var(--cl-display); font-size: 22px; line-height: 30px; font-weight: 600; color: var(--cl-head); overflow-wrap: break-word; hyphens: auto; }
.cl-features__more { margin: auto 0 0; padding-top: 20px; }
.cl-features__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cl-sans); font-size: 16px; line-height: 24px; font-weight: 600; color: #e10419; text-decoration: none; transition: gap .3s ease, color .3s ease; }
.cl-features__link:hover { gap: 12px; color: #8f0815; }

/* Hover: Eintrag hebt sich */
.cl-features__item:hover { transform: translateY(-6px); }

/* ---- Stil: Karte / Raute (weiße Karten, Farben bleiben auch auf dunkler Fläche) ---- */
.cl-features--card .cl-features__item, .cl-features--diamond .cl-features__item { --cl-text: #686868; --cl-head: #000; --cl-sub: #020626; border: 1px solid #e6e6ea; background: #fff; }
.cl-features--card .cl-features__item { padding: 40px 30px 36px; border-radius: 6px; box-shadow: 0 4px 14px rgba(2, 6, 38, .06); }
.cl-features--card .cl-features__item:hover, .cl-features--diamond .cl-features__item:hover { box-shadow: 0 20px 45px rgba(2, 6, 38, .14); }
.cl-on-dark.cl-features--card .cl-text a, .cl-on-dark.cl-features--diamond .cl-text a { color: #e10419; }
.cl-sec--red.cl-features--card .cl-text li::marker, .cl-sec--red.cl-features--diamond .cl-text li::marker { color: #e10419; }

/* ---- Stil: Offen ---- */
.cl-features--open .cl-features__item { padding: 4px 0 4px 30px; border-left: 3px solid #e10419; }
.cl-features--open .cl-features__icon { width: 48px; height: 48px; margin-bottom: 20px; font-size: 20px; }
.cl-features--open .cl-features__icon img { width: 28px; height: 28px; }

/* ---- Stil: Nummer (Ziffer ist Dekor per CSS-Counter) ---- */
.cl-features--number .cl-features__item { padding-top: 56px; }
.cl-features--number .cl-features__item::before { content: counter(clft, decimal-leading-zero); position: absolute; top: 0; left: -3px; z-index: 0; font-family: var(--cl-display); font-size: 90px; line-height: 80px; font-weight: 700; color: transparent; -webkit-text-stroke: 2px #e10419; opacity: .2; pointer-events: none; transition: opacity .4s ease; }
.cl-features--number .cl-features__item:hover::before { opacity: .45; }

/* Offen/Nummer auf roter bzw. dunkler Fläche */
.cl-sec--red.cl-features--open .cl-features__item { border-left-color: #fff; }
.cl-sec--red.cl-features--open .cl-features__icon { background: #fff; color: #e10419; }
.cl-sec--red.cl-features--open .cl-features__icon img { filter: none; }
.cl-sec--red.cl-features--open .cl-features__sub, .cl-sec--red.cl-features--number .cl-features__sub,
.cl-on-dark.cl-features--open .cl-features__link, .cl-on-dark.cl-features--number .cl-features__link { color: #fff; }
.cl-on-dark.cl-features--number .cl-features__item::before { -webkit-text-stroke-color: #fff; opacity: .3; }

/* ---- Stil: Raute ---- */
.cl-features--diamond .cl-features__item { align-items: center; padding: 56px 30px 40px; border-radius: 20px; text-align: center; box-shadow: 0 10px 40px rgba(2, 6, 38, .08); }
.cl-features--diamond .cl-features__body { align-items: center; width: 100%; }
.cl-features--diamond .cl-features__icon { width: 72px; height: 72px; margin: 14px 0 44px; border: 2px solid #e10419; border-radius: 14px; background: #fff; color: #e10419; font-size: 26px; transform: rotate(45deg); }
.cl-features--diamond .cl-features__icon > * { transform: rotate(-45deg); }
.cl-features--diamond .cl-features__icon img { width: 40px; height: 40px; filter: none; }
.cl-features--diamond .cl-features__item:hover .cl-features__icon { border-color: #8f0815; background: #8f0815; color: #fff; transform: rotate(53deg); }
.cl-features--diamond .cl-features__item:hover .cl-features__icon img { filter: brightness(0) invert(1); }

/* ---- Editor-Arbeitsfläche: Draggos Standardtypografie überstimmen ---- */
.draggo-canvas .cl-features__sub { margin: 0 0 6px; font-family: var(--cl-display); font-size: 14px; line-height: 20px; font-weight: 600; color: #e10419; }
.draggo-canvas .cl-sec--red.cl-features--open .cl-features__sub, .draggo-canvas .cl-sec--red.cl-features--number .cl-features__sub { color: #fff; }
.draggo-canvas .cl-features__title { margin: 0 0 12px; font-family: var(--cl-display); font-size: 22px; line-height: 30px; font-weight: 600; color: var(--cl-head); }
.draggo-canvas .cl-features__more { margin: auto 0 0; padding-top: 20px; font-family: var(--cl-sans); }

/* Bild neben dem Raster */
.cl-features__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.cl-features__layout--right .cl-features__media { order: 2; }
.cl-features__media { margin: 0; padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 24px 50px rgba(2, 6, 38, .12); }
.cl-features__media img { display: block; width: 100%; height: auto; border-radius: 10px; }

@media (max-width: 1199px) {
    .cl-features--c4 { --clft-cols: 3; }
    .cl-sec.cl-features--media { --clft-cols: 2; }
    .cl-features__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .cl-features__layout--right .cl-features__media { order: 0; }
    .cl-features__media { justify-self: center; width: 100%; max-width: 760px; }
    .cl-features--card .cl-features__item { padding: 34px 24px 30px; }
}
@media (max-width: 991px) {
    .cl-features--c3, .cl-features--c4 { --clft-cols: 2; }
    .cl-features__head--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .cl-sec.cl-features { --clft-cols: 1; --clft-gap: 20px; }
    .cl-features__head { margin-bottom: 40px; }
    .cl-features__title, .draggo-canvas .cl-features__title { font-size: 20px; line-height: 28px; }
    .cl-features--diamond .cl-features__item { padding: 44px 24px 34px; }
    .cl-features--number .cl-features__item { padding-top: 46px; }
    .cl-features--number .cl-features__item::before { font-size: 72px; line-height: 64px; }
    /* Offen wird zur Liste: Icon links, Trennlinien */
    .cl-features--open .cl-features__grid { gap: 0; }
    .cl-features--open .cl-features__item { flex-direction: row; gap: 18px; padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--clft-line); }
    .cl-features--open .cl-features__cell:first-child .cl-features__item { border-top: 1px solid var(--clft-line); }
    .cl-features--open .cl-features__icon { width: 40px; height: 40px; margin: 0; font-size: 17px; }
    .cl-features--open .cl-features__item:hover { transform: none; }
}

/* Absatzabstand im Text (Grundlage setzt p-Ränder auf 0 und überstimmt > * + *) */
.cl-sec :is(.cl-features__text, .cl-features__intro) > :is(p, ul, ol, h3, h4) + :is(p, ul, ol, h3, h4) { margin-top: 12px; }