/* Clarity – Sticky-Titel (draggo_clarity_sticky) */
/* position: sticky braucht Vorfahren ohne Scroll-Container: overflow:hidden der Abschnitts-Grundlage durch clip ersetzen */
.cl-sec.cl-sticky { overflow: visible; overflow: clip; }
.cl-sticky { --clsy-line: rgba(2, 6, 38, .12); --clsy-top: 160px; }
.cl-sticky.cl-on-dark { --clsy-line: rgba(255, 255, 255, .25); }

.cl-sticky__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 80px; }
.cl-sticky__grid--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cl-sticky__grid--flip .cl-sticky__aside { order: 2; }
/* Kopfzeile der Seite ist fixiert (138 px) → Abstand oben */
.cl-sticky__pin { position: sticky; top: var(--clsy-top); }
.cl-sec .cl-sticky__lead { margin-top: 24px; font-size: 22px; line-height: 32px; color: var(--cl-sub); }
.cl-sticky__action { margin-top: 32px; }

.cl-sticky__sub { margin: 0 0 16px; font-family: var(--cl-display); font-size: 24px; line-height: 32px; font-weight: 600; color: var(--cl-head); }
.cl-sticky__block + .cl-sticky__block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--clsy-line); }
/* Initial-Lead: erster Absatz des ersten Blocks größer */
.cl-sec .cl-sticky__block--lead .cl-sticky__text > p:first-child { font-size: 22px; line-height: 32px; color: var(--cl-sub); }

/* Hinweis-Box */
.cl-sticky__block.cl-sticky__block--note { padding: 30px 36px; border-top: 0; border-left: 4px solid #e10419; border-radius: 0 10px 10px 0; background: #f4f4f6; }
.cl-sticky__block--note + .cl-sticky__block { border-top: 0; padding-top: 0; }
.cl-sec--grey .cl-sticky__block--note, .cl-sec--image-light .cl-sticky__block--note { background: #fff; }
.cl-on-dark .cl-sticky__block--note { background: rgba(255, 255, 255, .1); }
.cl-sec--red .cl-sticky__block--note { border-left-color: #fff; }

/* ---- Editor-Arbeitsfläche: Draggos Standardtypografie überstimmen ---- */
.draggo-canvas .cl-sticky__sub { margin: 0 0 16px; font-family: var(--cl-display); font-size: 24px; line-height: 32px; font-weight: 600; color: var(--cl-head); }
.draggo-canvas .cl-sec .cl-sticky__lead :is(p, li) { font-family: var(--cl-sans); font-size: 22px; line-height: 32px; color: var(--cl-sub); }
.draggo-canvas .cl-sec .cl-sticky__block--lead .cl-sticky__text > p:first-child { font-size: 22px; line-height: 32px; color: var(--cl-sub); }

@media (max-width: 1199px) {
    .cl-sticky__grid, .cl-sticky__grid--flip { column-gap: 60px; }
}
@media (max-width: 991px) {
    .cl-sticky__grid, .cl-sticky__grid--flip { grid-template-columns: minmax(0, 1fr); }
    .cl-sticky__grid--flip .cl-sticky__aside { order: 0; }
    .cl-sticky__pin { position: static; }
}
@media (max-width: 767px) {
    .cl-sec .cl-sticky__lead, .cl-sec .cl-sticky__lead :is(p, li),
    .cl-sec .cl-sticky__block--lead .cl-sticky__text > p:first-child,
    .draggo-canvas .cl-sec .cl-sticky__lead :is(p, li) { font-size: 18px; line-height: 28px; }
    .cl-sticky__sub, .draggo-canvas .cl-sticky__sub { font-size: 20px; line-height: 28px; }
    .cl-sticky__block + .cl-sticky__block { margin-top: 30px; padding-top: 30px; }
    .cl-sticky__block.cl-sticky__block--note { padding: 24px; }
}

/* Lange Einzelwörter im Titel (z. B. „Unternehmensportrait“) nicht mitten im Wort brechen */
/* Titelgröße an die Breite der Titelspalte koppeln (Container-Einheiten), damit lange Einzelwörter
   wie „Unternehmensportrait“ ohne Bruch passen (Chromiums Silbentrennung trennt hier falsch) */
.cl-sticky__pin { container-type: inline-size; }
.cl-sec .cl-sticky__aside .cl-title, .draggo-canvas .cl-sec .cl-sticky__aside .cl-title { font-size: clamp(22px, 6.9cqi, 50px); line-height: 1.12; }
/* Absatzabstand im Text (Grundlage setzt p-Ränder auf 0 und überstimmt > * + *) */
.cl-sec :is(.cl-sticky__text, .cl-sticky__lead) > :is(p, ul, ol, h3, h4) + :is(p, ul, ol, h3, h4) { margin-top: 14px; }