/* Clarity – Personenkarten (draggo_clarity_people) */
.cl-people { --clpp-cols: 3; --clpp-gap: 30px; }
.cl-people--c4 { --clpp-cols: 4; }

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

/* ---- Karten: gleich breit (fr) und je Reihe gleich hoch (stretch) ---- */
.cl-people__grid { display: grid; grid-template-columns: repeat(var(--clpp-cols), minmax(0, 1fr)); gap: var(--clpp-gap); align-items: stretch; }
.cl-people__cell { display: flex; min-width: 0; }
.cl-people__card { --cl-text: #686868; --cl-head: #000; --cl-sub: #020626; position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; 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-people__card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(2, 6, 38, .16); }
.cl-people__body { display: flex; flex-direction: column; flex: 1 1 auto; box-sizing: border-box; width: 100%; padding: 36px 30px 32px; }

.cl-people__name { margin: 0; font-family: var(--cl-display); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--cl-head); overflow-wrap: break-word; hyphens: auto; }
.cl-people__name a { color: inherit; text-decoration: none; }
.cl-people__name a:hover { color: #e10419; }
.cl-people__name::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 14px; background: #e10419; transition: width .4s ease; }
.cl-people__card:hover .cl-people__name::after, .cl-people__slide:hover .cl-people__name::after { width: 80px; }
.cl-people__role { margin: 14px 0 0; font-family: var(--cl-sans); font-size: 16px; line-height: 24px; color: var(--cl-text); }
.cl-sec .cl-people__text { margin-top: 12px; font-size: 16px; line-height: 24px; }
.cl-on-dark .cl-people__card .cl-text a { color: #e10419; }

.cl-people__social { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 20px 0 0; list-style: none; }
.cl-people__social li { margin: 0; padding: 0; }
.cl-people__soc { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f4f4f6; color: #e10419; font-size: 15px; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
a.cl-people__soc:hover, a.cl-people__soc:focus-visible { background: #e10419; color: #fff; }

/* Foto: Kreis / Hochformat */
.cl-people__photo { margin: 0; overflow: hidden; background: #f4f4f6; }
.cl-people__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cl-people__card:hover .cl-people__photo img { transform: scale(1.05); }
.cl-people--photo-circle .cl-people__card { align-items: center; text-align: center; }
.cl-people--photo-circle .cl-people__photo { flex: none; width: 140px; height: 140px; margin-top: 40px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #e6e6ea, 0 10px 30px rgba(2, 6, 38, .12); }
.cl-people--photo-circle .cl-people__body { align-items: center; padding-top: 26px; }
.cl-people--photo-circle .cl-people__name::after { margin-inline: auto; }
.cl-people--photo-circle .cl-people__social { justify-content: center; }
.cl-people--photo-portrait .cl-people__photo { flex: none; aspect-ratio: 4 / 5; }

/* ---- Foto-Akkordeon ---- */
.cl-people__acc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 60px; align-items: center; }
.cl-people__acc--full { grid-template-columns: minmax(0, 1fr); }
.cl-people__intro .cl-people__lead { margin-top: 24px; }
.cl-people__stage { min-width: 0; }
.cl-people__track { display: flex; gap: 12px; height: 560px; }
.cl-people__slide { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 20px; background: #020626; cursor: pointer; outline: none; transition: flex-grow .6s ease; }
.cl-people__slide.is-active { flex-grow: 4; cursor: default; }
.cl-people__slide:focus-visible { box-shadow: 0 0 0 3px #e10419; }
.cl-people__slideimg { position: absolute; inset: 0; margin: 0; }
.cl-people__slideimg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cl-people__slide:hover .cl-people__slideimg img { transform: scale(1.05); }
.cl-people__slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1, 3, 23, .15) 0%, rgba(1, 3, 23, .6) 100%); pointer-events: none; transition: opacity .6s ease; }
.cl-people__slide.is-active::after { background: linear-gradient(180deg, rgba(1, 3, 23, 0) 45%, rgba(1, 3, 23, .92) 100%); }
.cl-people__vertical { position: absolute; left: 50%; bottom: 30px; z-index: 2; margin: 0; white-space: nowrap; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-family: var(--cl-display); font-size: 22px; line-height: 28px; font-weight: 600; color: #fff; transition: opacity .3s ease; }
.cl-people__slide.is-active .cl-people__vertical { opacity: 0; }
.cl-people__info { position: absolute; left: 0; bottom: 0; z-index: 2; box-sizing: border-box; width: 100%; min-width: 320px; padding: 0 36px 34px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.cl-people__slide.is-active .cl-people__info { opacity: 1; visibility: visible; transition-delay: .35s; }
.cl-people__info .cl-people__name { font-size: 26px; line-height: 32px; color: #fff; }
.cl-people__info .cl-people__role { color: rgba(255, 255, 255, .85); }
.cl-people__info .cl-text { --cl-text: rgba(255, 255, 255, .85); }
.cl-people__slide .cl-people__social { position: absolute; top: 24px; right: 24px; z-index: 2; flex-direction: column; margin: 0; padding: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.cl-people__slide.is-active .cl-people__social { opacity: 1; visibility: visible; transition-delay: .35s; }
.cl-people__slide .cl-people__soc { background: rgba(255, 255, 255, .95); }
.cl-people__dots { display: none; }

/* ---- Editor-Arbeitsfläche (kein JS): Typografie + Aufklappen per Hover ---- */
.draggo-canvas .cl-people__name { margin: 0; font-family: var(--cl-display); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--cl-head); }
.draggo-canvas .cl-people__info .cl-people__name { font-size: 26px; line-height: 32px; color: #fff; }
.draggo-canvas .cl-people__role { margin: 14px 0 0; font-family: var(--cl-sans); font-size: 16px; line-height: 24px; color: var(--cl-text); }
.draggo-canvas .cl-people__info .cl-people__role { color: rgba(255, 255, 255, .85); }
.draggo-canvas .cl-people__vertical { margin: 0; font-family: var(--cl-display); font-size: 22px; line-height: 28px; font-weight: 600; color: #fff; }
.draggo-canvas .cl-people__social { margin: auto 0 0; list-style: none; }
.draggo-canvas .cl-people__track:hover .cl-people__slide { flex-grow: 1; }
.draggo-canvas .cl-people__track:hover .cl-people__slide:hover { flex-grow: 4; }
.draggo-canvas .cl-people__track:hover .cl-people__slide:not(:hover) :is(.cl-people__info, .cl-people__social) { opacity: 0; visibility: hidden; transition-delay: 0s; }
.draggo-canvas .cl-people__track:hover .cl-people__slide:not(:hover) .cl-people__vertical { opacity: 1; }
.draggo-canvas .cl-people__track .cl-people__slide:hover :is(.cl-people__info, .cl-people__social) { opacity: 1; visibility: visible; }
.draggo-canvas .cl-people__track .cl-people__slide:hover .cl-people__vertical { opacity: 0; }

@media (max-width: 1199px) {
    .cl-people--c4 { --clpp-cols: 3; }
    .cl-people__acc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
    .cl-people__track { height: 500px; }
    .cl-people__info { min-width: 280px; padding: 0 26px 28px; }
}
@media (max-width: 991px) {
    .cl-sec.cl-people { --clpp-cols: 2; }
    .cl-people__head--split, .cl-people__acc { grid-template-columns: minmax(0, 1fr); }
    .cl-people__track { height: 480px; }
}
@media (max-width: 767px) {
    .cl-sec.cl-people { --clpp-cols: 1; --clpp-gap: 20px; }
    .cl-people__head { margin-bottom: 40px; }
    /* Viele Personen mit Foto: 2 kompakte Spalten */
    .cl-sec.cl-people--many { --clpp-cols: 2; --clpp-gap: 12px; }
    .cl-people--many .cl-people__body { padding: 18px 12px 16px; }
    .cl-people--many .cl-people__name { font-size: 15px; line-height: 21px; }
    .cl-people--many .cl-people__name::after { margin-top: 10px; }
    .cl-people--many .cl-people__role { margin-top: 10px; font-size: 13px; line-height: 19px; }
    .cl-people--many.cl-people--photo-circle .cl-people__photo { width: 96px; height: 96px; margin-top: 22px; }
    .cl-people--many .cl-people__soc { width: 30px; height: 30px; font-size: 13px; }
    /* Foto-Akkordeon wird Wisch-Slider */
    .cl-people__track { height: 440px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .cl-people__track::-webkit-scrollbar { display: none; }
    .cl-people__slide, .cl-people__slide.is-active { flex: 0 0 84%; scroll-snap-align: start; cursor: default; }
    .cl-people__slide::after { background: linear-gradient(180deg, rgba(1, 3, 23, 0) 45%, rgba(1, 3, 23, .92) 100%); }
    .cl-people__vertical { display: none; }
    .cl-people__info, .cl-people__slide .cl-people__social { opacity: 1; visibility: visible; }
    .cl-people__info { min-width: 0; padding: 0 22px 24px; }
    .cl-people__info .cl-people__name, .draggo-canvas .cl-people__info .cl-people__name { font-size: 22px; line-height: 28px; }
    .cl-people__slide .cl-people__social { top: 16px; right: 16px; }
    .cl-people__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    .cl-people__dots button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 6px; background: rgba(2, 6, 38, .2); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
    .cl-on-dark .cl-people__dots button { background: rgba(255, 255, 255, .35); }
    .cl-people__dots button.is-active { width: 28px; background: #e10419; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-people__slide, .cl-people__info, .cl-people__vertical, .cl-people__slideimg img { transition: none; }
}

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

/* Editor-Arbeitsfläche: Draggo setzt img{height:auto} → Fotos füllen ihren Rahmen nicht */
.draggo-canvas .cl-people .cl-people__slideimg img, .draggo-canvas .cl-people .cl-people__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Nur für Screenreader: Name des Netzwerks steht als Text im Inhalt (zusätzlich zum aria-label).
   Auch in der Editor-Arbeitsfläche unsichtbar, damit die Symbole dort nicht auseinandergezogen werden. */
.cl-people .cl-sr-only, .draggo-canvas .cl-people .cl-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Kacheln mit längerem Text (z. B. Clarity Clients): Verlauf früher und dunkler, damit Titel und Text auf hellen Motiven lesbar bleiben */
.cl-people__slide.is-active:has(.cl-people__text)::after { background: linear-gradient(180deg, rgba(1, 3, 23, 0) 20%, rgba(1, 3, 23, .7) 55%, rgba(1, 3, 23, .95) 100%); }
@media (max-width: 767px) {
    .cl-people__slide:has(.cl-people__text)::after, .cl-people__slide.is-active:has(.cl-people__text)::after { background: linear-gradient(180deg, rgba(1, 3, 23, .1) 0%, rgba(1, 3, 23, .75) 40%, rgba(1, 3, 23, .95) 100%); }
    .cl-people__track:has(.cl-people__text) { height: 500px; }
}