/* Clarity – Titel-Spalten (draggo_clarity_columns) */
.cl-columns { --clcl-line: rgba(2, 6, 38, .12); }
.cl-columns.cl-on-dark { --clcl-line: rgba(255, 255, 255, .3); }

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

/* Raster: gleich breit (fr-Spalten) und je Reihe gleich hoch (stretch) */
.cl-columns__grid { --clcl-gap: 80px; display: grid; grid-template-columns: repeat(var(--clcl-cols, 2), minmax(0, 1fr)); gap: 60px var(--clcl-gap); align-items: stretch; }
.cl-columns__cell { position: relative; display: flex; min-width: 0; }
.cl-columns__col { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cl-columns__body { display: flex; flex-direction: column; flex: 1 1 auto; }

.cl-columns__kicker { margin: 0 0 10px; font-family: var(--cl-display); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #e10419; }
.cl-columns__title { margin: 0 0 20px; font-family: var(--cl-display); font-size: 36px; line-height: 44px; font-weight: 500; color: var(--cl-head); overflow-wrap: break-word; hyphens: auto; }
.cl-columns__title--red { color: #e10419; }
.cl-columns__sub { margin: -6px 0 20px; font-family: var(--cl-display); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--cl-sub); }
.cl-columns__action { margin-top: auto; padding-top: 30px; }
.cl-columns__media { margin: 0 0 30px; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 10; background: #f4f4f6; }
.cl-columns__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cl-columns__col:hover .cl-columns__media img { transform: scale(1.05); }

/* Auf Rot: Kicker/rote Titel weiß */
.cl-sec--red .cl-columns__kicker, .cl-sec--red .cl-columns__title--red { color: #fff; }

/* Hinweis als volle Zeile */
.cl-sec .cl-columns__note { margin-top: 60px; padding: 30px 40px; border-left: 4px solid #e10419; border-radius: 0 10px 10px 0; background: #f4f4f6; }
.cl-sec--grey .cl-columns__note, .cl-sec--image-light .cl-columns__note { background: #fff; }
.cl-on-dark .cl-columns__note { background: rgba(255, 255, 255, .1); }
.cl-sec--red .cl-columns__note { border-left-color: #fff; }

/* ---- Stil: Linien ----------------------------------------------------- */
/* Linien liegen mittig im Spaltenabstand; die Linie vor der ersten Spalte bzw. über der ersten Reihe schneidet overflow ab. */
.cl-columns--lines .cl-columns__grid { overflow: hidden; }
.cl-columns--lines .cl-columns__cell::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--clcl-gap) / -2); width: 1px; background: var(--clcl-line); }
.cl-columns--lines .cl-columns__cell::after { content: ""; position: absolute; top: -30px; left: calc(var(--clcl-gap) / -2); right: calc(var(--clcl-gap) / -2); height: 1px; background: var(--clcl-line); }

/* ---- Stil: Karten ----------------------------------------------------- */
.cl-columns--cards .cl-columns__grid { --clcl-gap: 30px; gap: 30px; }
.cl-columns--cards .cl-columns__col { --cl-text: #686868; --cl-head: #000; --cl-sub: #020626; overflow: hidden; padding: 50px 40px 40px; border: 1px solid #e6e6ea; border-radius: 20px; background: #fff; box-shadow: 0 10px 40px rgba(2, 6, 38, .08); transition: transform .4s ease, box-shadow .4s ease; }
.cl-columns--cards .cl-columns__col::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 6px; background: #e10419; transition: width .5s ease; }
.cl-columns--cards .cl-columns__col:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(2, 6, 38, .16); }
.cl-columns--cards .cl-columns__col:hover::before { width: 100%; }
.cl-columns--cards .cl-columns__media { margin: -50px -40px 30px; border-radius: 0; }
/* Weiße Karte auf dunkler/roter Fläche: Farben der Karte behalten */
.cl-sec--red .cl-columns--cards .cl-columns__kicker, .cl-sec--red .cl-columns--cards .cl-columns__title--red,
.cl-sec--red.cl-columns--cards .cl-columns__kicker, .cl-sec--red.cl-columns--cards .cl-columns__title--red { color: #e10419; }
.cl-on-dark.cl-columns--cards .cl-text a { color: #e10419; }
.cl-sec--red.cl-columns--cards .cl-text li::marker { color: #e10419; }
.cl-sec--red.cl-columns--cards .cl-columns__btn { background: #e10419; border-color: #e10419; color: #fff; }
.cl-sec--red.cl-columns--cards .cl-columns__btn:hover { background: #8f0815; border-color: #8f0815; color: #fff; }

/* ---- Editor-Arbeitsfläche: Draggos Standardtypografie überstimmen ---- */
.draggo-canvas .cl-columns__kicker { margin: 0 0 10px; font-family: var(--cl-display); font-size: 16px; line-height: 24px; font-weight: 600; color: #e10419; }
.draggo-canvas .cl-columns__title { margin: 0 0 20px; font-family: var(--cl-display); font-size: 36px; line-height: 44px; font-weight: 500; color: var(--cl-head); }
.draggo-canvas .cl-columns__title--red { color: #e10419; }
.draggo-canvas .cl-sec--red .cl-columns__kicker, .draggo-canvas .cl-sec--red .cl-columns__title--red { color: #fff; }
.draggo-canvas .cl-sec--red.cl-columns--cards .cl-columns__kicker, .draggo-canvas .cl-sec--red.cl-columns--cards .cl-columns__title--red { color: #e10419; }
.draggo-canvas .cl-columns__sub { margin: -6px 0 20px; font-family: var(--cl-display); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--cl-sub); }

@media (max-width: 1199px) {
    .cl-columns__grid { --clcl-gap: 60px; }
    .cl-columns__title, .draggo-canvas .cl-columns__title { font-size: 30px; line-height: 38px; }
    .cl-columns--cards .cl-columns__col { padding: 44px 30px 34px; }
    .cl-columns--cards .cl-columns__media { margin: -44px -30px 26px; }
}
@media (max-width: 991px) {
    .cl-columns__head--split { grid-template-columns: minmax(0, 1fr); }
    .cl-columns--c3 .cl-columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .cl-columns__head { margin-bottom: 40px; }
    .cl-columns .cl-columns__grid { grid-template-columns: minmax(0, 1fr); gap: 60px; }
    .cl-columns--cards .cl-columns__grid { gap: 24px; }
    /* Linien werden horizontal */
    .cl-columns--lines .cl-columns__cell::before { display: none; }
    .cl-columns--lines .cl-columns__cell::after { left: 0; right: 0; }
    .cl-columns__title, .draggo-canvas .cl-columns__title { font-size: 26px; line-height: 34px; }
    .cl-columns__sub, .draggo-canvas .cl-columns__sub { font-size: 18px; line-height: 26px; }
    .cl-columns--cards .cl-columns__col { padding: 40px 24px 30px; }
    .cl-columns--cards .cl-columns__media { margin: -40px -24px 24px; }
    .cl-sec .cl-columns__note { margin-top: 40px; padding: 24px; }
}

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

/* Editor-Arbeitsfläche: Draggo setzt img{height:auto} */
.draggo-canvas .cl-columns .cl-columns__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }