/* Clarity – Rechtstext mit Sprungnavigation (draggo_clarity_document) */
/* overflow:clip statt hidden, damit die Navigation sticky bleiben kann */
.cl-sec.cl-document { overflow: clip; }
.cl-document--runout { padding-bottom: 200px; }
.cl-document--runout::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 100px; background: #f4f4f6; pointer-events: none; }

.cl-document__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 60px; align-items: start; }
.cl-document__grid--nonav { grid-template-columns: minmax(0, 1fr); }
.cl-document__aside { position: sticky; top: 130px; align-self: start; }

/* Navigation */
.cl-document__nav { margin: 0; }
.cl-document__summary { display: block; margin: 0 0 16px; list-style: none; font-family: var(--cl-display); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #e10419; pointer-events: none; }
.cl-document__summary::-webkit-details-marker { display: none; }
.cl-document__navlist { max-height: calc(100vh - 220px); margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; scrollbar-width: thin; }
.cl-document__navlist li { margin: 0; }
.cl-document__navlist a { display: block; padding: 9px 12px 9px 18px; border-left: 2px solid #e6e6ea; font-family: var(--cl-sans); font-size: 15px; line-height: 22px; color: var(--cl-text); text-decoration: none; transition: color .25s, border-color .25s, background-color .25s; }
.cl-document__navlist a:hover { color: #e10419; }
.cl-document__navlist a.is-active { border-left: 4px solid #e10419; padding-left: 16px; color: #e10419; font-weight: 600; }
.cl-on-dark .cl-document__navlist a { border-left-color: rgba(255, 255, 255, .2); }
.cl-sec--red .cl-document__navlist a.is-active { color: #fff; border-left-color: #fff; }

/* Hauptspalte */
.cl-document__title { margin-bottom: 40px !important; }
.cl-document__entries { --cldc-h: #686868; }
.cl-on-dark .cl-document__entries { --cldc-h: rgba(255, 255, 255, .75); }
.cl-document__entry { content-visibility: auto; contain-intrinsic-size: auto 420px; scroll-margin-top: 130px; }
.cl-document__entry--l1 { margin-top: 56px; }
.cl-document__entry--l2 { margin-top: 30px; }
.cl-document__entry--plain { margin-top: 20px; }
.cl-document__entries > :first-child { margin-top: 0; }
.cl-document__h1 { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font-family: var(--cl-display); font-size: 26px; line-height: 34px; font-weight: 600; color: var(--cldc-h); }
.cl-document__h1::before { content: ""; flex: 0 0 36px; height: 4px; background: #e10419; }
.cl-sec--red .cl-document__h1::before { background: #fff; }
.cl-document__h2 { margin: 0 0 12px; font-family: var(--cl-display); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--cldc-h); }
.cl-document .is-dark > :is(.cl-document__h1, .cl-document__h2, .cl-document__fact-title) { color: var(--cl-head); }
.cl-document .cl-text .is-dark { color: var(--cl-sub); }
.cl-document__text { overflow-wrap: break-word; }

/* Fakten-Kacheln */
.cl-document__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; margin-top: 40px; }
.cl-document__facts + .cl-document__entry, .cl-document__entry + .cl-document__facts { margin-top: 56px; }
.cl-document__fact { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 28px 28px; border-radius: 16px; background: #f4f4f6; scroll-margin-top: 130px; transition: transform .3s, box-shadow .3s; }
.cl-document__fact::before { content: ""; position: absolute; top: 0; left: 28px; width: 40px; height: 4px; background: #e10419; }
.cl-document__fact:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(2, 6, 38, .1); }
.cl-sec--grey .cl-document__fact, .cl-sec--image-light .cl-document__fact { background: #fff; }
.cl-on-dark .cl-document__fact { background: rgba(255, 255, 255, .08); }
.cl-document__fact-title { margin: 0; font-family: var(--cl-display); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cldc-h); }

/* Nach oben */
.cl-document__totop-wrap { display: flex; justify-content: flex-end; margin: 50px 0 0; }
.cl-document__totop { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 2px solid #e10419; border-radius: 3px; font-family: var(--cl-display); font-size: 15px; line-height: 20px; font-weight: 500; color: #e10419; text-decoration: none; transition: background-color .3s, color .3s, transform .3s; }
.cl-document__totop svg { width: 18px; height: 18px; }
.cl-document__totop:hover, .cl-document__totop:focus-visible { background: #e10419; color: #fff; transform: translateY(-2px); }
.cl-on-dark .cl-document__totop { border-color: #fff; color: #fff; }

/* Editor-Arbeitsfläche */
.draggo-canvas .cl-document__h1 { font-family: var(--cl-display); font-size: 26px; line-height: 34px; font-weight: 600; color: var(--cldc-h); margin: 0 0 18px; }
.draggo-canvas .cl-document__h2 { font-family: var(--cl-display); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--cldc-h); margin: 0 0 12px; }
.draggo-canvas .cl-document__fact-title { font-family: var(--cl-display); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cldc-h); margin: 0; }
.draggo-canvas .cl-document .is-dark > :is(.cl-document__h1, .cl-document__h2, .cl-document__fact-title) { color: var(--cl-head); }
.draggo-canvas .cl-document__entry { content-visibility: visible; }

@media (max-width: 1199px) {
    .cl-document__grid { gap: 40px; }
    .cl-document__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .cl-document__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .cl-document__aside { position: static; }
    .cl-document__nav { border-radius: 14px; background: #f4f4f6; }
    .cl-sec--grey .cl-document__nav { background: #fff; }
    .cl-on-dark .cl-document__nav { background: rgba(255, 255, 255, .08); }
    .cl-document__summary { position: relative; margin: 0; padding: 18px 56px 18px 22px; pointer-events: auto; cursor: pointer; }
    .cl-document__summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s; }
    .cl-document__nav[open] .cl-document__summary::after { transform: rotate(-135deg); margin-top: -2px; }
    .cl-document__navlist { max-height: 60vh; padding: 0 16px 16px; }
}
@media (max-width: 767px) {
    .cl-sec .cl-title.cl-document__title, .draggo-canvas .cl-sec .cl-title.cl-document__title { margin-bottom: 26px !important; font-size: 26px; line-height: 32px; hyphens: auto; }
    .cl-document__entry--l1 { margin-top: 40px; }
    .cl-document__h1, .draggo-canvas .cl-document__h1 { gap: 12px; font-size: 21px; line-height: 28px; }
    .cl-document__h1::before { flex-basis: 24px; }
    .cl-document__h2, .draggo-canvas .cl-document__h2 { font-size: 17px; line-height: 24px; }
    .cl-document__facts { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 14px; }
    .cl-document__fact { padding: 24px 22px 22px; }
    .cl-document--runout { padding-bottom: 120px; }
    .cl-document--runout::after { height: 60px; }
    .cl-document__totop { width: auto; }
}