/* Clarity – Flip-Kachel-Karussell (draggo_clarity_flipcards)
   Das Swiper-Bundle-CSS lädt nach diesem Stylesheet → Slider-Regeln sind über
   .cl-flipcards .cl-flipcards__swiper … verstärkt, damit sie Swipers Standard schlagen. */
.cl-flipcards { --clf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14h19M15 6l8 8-8 8M9 9l5 5-5 5'/%3E%3C/svg%3E"); --clf-nav-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12H2M9 5l-7 7 7 7'/%3E%3C/svg%3E"); container-type: inline-size; position: relative; }

/* ---- Abschnitts-Grundlage (Dca\Section, Präfix clf) --------------------
   Ohne gewählte Fläche rendert der Controller „eingebettet“: keine Fläche,
   keine Abstände – Altbestände (Überschrift und Innenabstand im Artikel)
   bleiben unverändert. */
.cl-flipcards.cl-flipcards--plain { background-color: transparent; background-image: none; padding-block: 0; overflow: visible; }
.cl-flipcards.cl-flipcards--plain::before { content: none; }

/* Abschnittstitel im Element */
.cl-flipcards .cl-flipcards__head { position: relative; z-index: 1; margin-bottom: 55px; text-align: center; }
.cl-flipcards .cl-flipcards__head--left { text-align: left; }
.cl-flipcards .cl-title, .draggo-canvas .cl-flipcards .cl-title { line-height: 50px; }

/* ---- Slider-Rahmen ---------------------------------------------------- */
.cl-flipcards .cl-flipcards__swiper { --clf-n: var(--clf-n1, 1); position: relative; z-index: 1; display: block; margin: 0; padding: 0 0 102px; overflow: hidden; list-style: none; }
.cl-flipcards.cl-flipcards--nav-bar .cl-flipcards__swiper { padding-bottom: 50px; }
.cl-flipcards.cl-flipcards--nav-none .cl-flipcards__swiper { padding-bottom: 0; }
.cl-flipcards .cl-flipcards__wrapper { position: relative; z-index: 1; display: flex; box-sizing: content-box; width: 100%; height: 100%; }
.cl-flipcards .cl-flipcards__slide { position: relative; display: block; flex-shrink: 0; height: auto; margin: 0; padding: 0; box-sizing: border-box; }
/* Vor dem Start von Swiper bzw. im Editor (kein JS): die ersten Karten nebeneinander */
.cl-flipcards .cl-flipcards__swiper:not(.swiper-initialized) .cl-flipcards__wrapper { gap: var(--clf-gap, 30px); }
.cl-flipcards .cl-flipcards__swiper:not(.swiper-initialized) .cl-flipcards__slide { width: calc((100% - (var(--clf-n) - 1) * var(--clf-gap, 30px)) / var(--clf-n)); }
@container (min-width: 992px) { .cl-flipcards .cl-flipcards__swiper { --clf-n: var(--clf-n2, 2); } }
@container (min-width: 1200px) { .cl-flipcards .cl-flipcards__swiper { --clf-n: var(--clf-n3, 3); } }
@container (min-width: 1500px) { .cl-flipcards .cl-flipcards__swiper { --clf-n: var(--clf-n4, 4); } }

/* ---- Karte ------------------------------------------------------------ */
.cl-flipcards .cl-flipcards__card { position: relative; max-width: 430px; height: var(--clf-h, 498px); border-radius: 10px; overflow: hidden; color: #fff; }
.cl-flipcards .cl-flipcards__flip { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .6s; }
.cl-flipcards .cl-flipcards__card:hover .cl-flipcards__flip, .cl-flipcards .cl-flipcards__card:focus-within .cl-flipcards__flip { transform: rotateY(180deg); }
.cl-flipcards .cl-flipcards__face { position: absolute; inset: 0; }
.cl-flipcards .cl-flipcards__front { z-index: 1; }
.cl-flipcards .cl-flipcards__back { z-index: 2; overflow: hidden; transform: rotateY(180deg) translateZ(1px); display: flex; flex-direction: column; box-sizing: border-box; padding: 160px 30px 110px; }
.cl-flipcards .cl-flipcards__back:not(.has-more) { padding-bottom: 30px; }
.cl-flipcards .cl-flipcards__img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; max-width: none; height: 100%; margin: 0; object-fit: cover; }

/* Vorderseite */
.cl-flipcards .cl-flipcards__front .cl-flipcards__icon { position: absolute; top: 25px; left: 25px; z-index: 2; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--cl-red, #e10419); }
.cl-flipcards .cl-flipcards__front .cl-flipcards__icon img { display: block; width: 72px; height: 72px; max-width: none; object-fit: contain; }
.cl-flipcards .cl-flipcards__front .cl-flipcards__title { position: absolute; left: 0; bottom: 0; z-index: 2; width: 90%; min-height: 96px; display: flex; align-items: center; margin: 0; padding: 28px 75px 28px 25px; border-radius: 0 0 0 10px; background: rgba(2, 4, 31, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--cl-display); font-size: 16px; line-height: 16px; font-weight: 500; color: #f8f6f4; }
.cl-flipcards .cl-flipcards__front .cl-flipcards__more { position: absolute; right: 18px; bottom: 11px; z-index: 3; display: block; width: 85px; height: 85px; border: 6px solid rgba(255, 255, 255, .3); border-radius: 20px; background: var(--cl-red, #e10419) var(--clf-arrow) center / 30px no-repeat; background-clip: padding-box; font-size: 0; color: transparent; text-decoration: none; }

/* Rückseite */
.cl-flipcards .cl-flipcards__back::before { content: ""; position: absolute; top: -130px; left: 0; z-index: 2; width: 100%; height: 230px; border-radius: 50%; background: var(--cl-red, #e10419); }
.cl-flipcards .cl-flipcards__back::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(225, 4, 25, .2) 0%, rgba(143, 8, 21, .2) 100%); }
.cl-flipcards .cl-flipcards__back .cl-flipcards__img { filter: blur(10px); transform: scale(1.1); }
.cl-flipcards .cl-flipcards__back .cl-flipcards__icon { position: absolute; top: 27px; left: 50%; z-index: 3; width: 52px; height: 52px; margin-left: -26px; }
.cl-flipcards .cl-flipcards__back .cl-flipcards__icon img { display: block; width: 52px; height: 52px; max-width: none; object-fit: contain; }
.cl-flipcards .cl-flipcards__back .cl-flipcards__title { position: relative; z-index: 3; flex: none; margin: 0; padding: 0; font-family: var(--cl-display); font-size: 18px; line-height: 25.2px; font-weight: 500; color: #fff; text-align: center; }
.cl-flipcards .cl-flipcards__sub { position: relative; z-index: 3; flex: none; margin: 10px 0 0; font-family: var(--cl-display); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: rgba(248, 246, 244, .9); text-align: center; }
.cl-flipcards .cl-flipcards__text { position: relative; z-index: 3; flex: 0 1 auto; min-height: 0; overflow: hidden; margin: 28.8px 0 0; font-family: var(--cl-sans); font-size: 18px; line-height: 26px; font-weight: 400; color: rgba(248, 246, 244, .9); text-align: center; }
.cl-flipcards .cl-flipcards__sub + .cl-flipcards__text { margin-top: 12px; }
.cl-flipcards .cl-flipcards__text > * + * { margin-top: 12px; }
.cl-flipcards .cl-flipcards__text :is(ul, ol) { margin: 0; padding-left: 20px; text-align: left; }
.cl-flipcards .cl-flipcards__text a { color: #fff; text-decoration: underline; }
.cl-flipcards .cl-flipcards__text p { margin: 0; font: inherit; color: inherit; text-align: inherit; letter-spacing: inherit; text-transform: inherit; }
.cl-flipcards .cl-flipcards__back .cl-flipcards__more { position: relative; z-index: 3; flex: none; margin-top: auto; display: block; height: 70px; padding: 22px 30px; border-radius: 10px; background: rgba(225, 4, 25, .7); color: #fff; font-family: var(--cl-display); font-size: 18px; line-height: 26px; font-weight: 400; text-transform: uppercase; text-decoration: none; transition: letter-spacing .5s ease; }
.cl-flipcards .cl-flipcards__back .cl-flipcards__more::after { content: ""; position: absolute; top: 0; right: 0; width: 70px; height: 70px; border: 6px solid rgba(255, 255, 255, .5); border-radius: 5px; background: var(--clf-arrow) center / 26px no-repeat, linear-gradient(90deg, #e10419 0%, #8f0815 100%); }
.cl-flipcards .cl-flipcards__back .cl-flipcards__more:hover, .cl-flipcards .cl-flipcards__back .cl-flipcards__more:focus-visible { letter-spacing: 3px; color: #fff; }

/* ---- Fortschrittsleiste + runde Pfeile -------------------------------- */
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__pagination { position: absolute; z-index: 10; left: max(40px, calc(50% - 680px)); right: auto; top: auto; bottom: 24px; width: calc(min(1360px, 100% - 80px) - 154px); height: 5px; display: flex; transform: none; text-align: left; line-height: 0; }
.cl-flipcards.cl-flipcards--nav-bar .cl-flipcards__swiper .cl-flipcards__pagination { bottom: 10px; }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__pagination .swiper-pagination-bullet { display: block; flex: 1 1 0; width: auto; height: 4px; margin: 0 6px; padding: 0; border: 0; border-radius: 0; background: #000; opacity: .2; cursor: pointer; transition: all .5s ease; }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__pagination .swiper-pagination-bullet-active { background: var(--cl-red, #e10419); opacity: 1; }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__prev, .cl-flipcards .cl-flipcards__swiper .cl-flipcards__next { position: absolute; z-index: 10; top: auto; bottom: 0; left: auto; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 2px solid var(--cl-red, #e10419); border-radius: 100%; color: var(--cl-red, #e10419); background: transparent; cursor: pointer; transition: all .5s ease; }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__next { right: max(40px, calc(50% - 680px)); }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__prev { right: calc(max(40px, calc(50% - 680px)) + 67px); }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__prev::after, .cl-flipcards .cl-flipcards__swiper .cl-flipcards__next::after { content: none; }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__prev svg, .cl-flipcards .cl-flipcards__swiper .cl-flipcards__next svg { display: none; }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__prev::before, .cl-flipcards .cl-flipcards__swiper .cl-flipcards__next::before { content: ""; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--clf-nav-arrow) center / contain no-repeat; mask: var(--clf-nav-arrow) center / contain no-repeat; }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__next::before { transform: scaleX(-1); }
.cl-flipcards .cl-flipcards__swiper .cl-flipcards__prev:hover, .cl-flipcards .cl-flipcards__swiper .cl-flipcards__next:hover, .cl-flipcards .cl-flipcards__swiper .cl-flipcards__prev:focus-visible, .cl-flipcards .cl-flipcards__swiper .cl-flipcards__next:focus-visible { background: var(--cl-red, #e10419); color: #fff; }
.cl-flipcards .cl-flipcards__swiper .swiper-button-disabled { opacity: .35; cursor: auto; }
.cl-flipcards .cl-flipcards__swiper .swiper-button-lock, .cl-flipcards .cl-flipcards__swiper .swiper-pagination-lock { display: none; }
/* Ohne Swiper (Editor): Leiste als statischer Platzhalter */
.cl-flipcards .cl-flipcards__swiper:not(.swiper-initialized) .cl-flipcards__pagination { background: linear-gradient(90deg, var(--cl-red, #e10419) 0 9%, rgba(0, 0, 0, .2) 9% 100%) 0 0 / 100% 4px no-repeat; }

/* ---- Rückseiten-Variante Nachtblau ------------------------------------ */
.cl-flipcards--back-navy .cl-flipcards__back::before { background: #010317; }
.cl-flipcards--back-navy .cl-flipcards__back::after { background: linear-gradient(90deg, rgba(1, 3, 23, .55) 0%, rgba(2, 6, 38, .75) 100%); }
.cl-flipcards--back-navy .cl-flipcards__back .cl-flipcards__more { background: rgba(1, 3, 23, .7); }
.cl-flipcards--back-navy .cl-flipcards__back .cl-flipcards__more::after { background: var(--clf-arrow) center / 26px no-repeat, linear-gradient(90deg, #010317 0%, #020626 100%); }

@media (max-width: 1399px) {
    .cl-flipcards .cl-flipcards__card { margin: 0 auto; }
}
@media (max-width: 767px) {
    .cl-flipcards .cl-flipcards__slide { padding: 0 20px; }
    .cl-flipcards .cl-title, .draggo-canvas .cl-flipcards .cl-title { line-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-flipcards .cl-flipcards__flip, .cl-flipcards .cl-flipcards__more { transition: none; }
}

/* Editor-Arbeitsfläche: Draggos Standard-Typografie (.draggo-canvas h1–h6, p, a) nicht durchschlagen lassen */
.draggo-canvas .cl-flipcards .cl-flipcards__text p { margin: 0; font: inherit; color: inherit; }
.draggo-canvas .cl-flipcards .cl-flipcards__more { text-decoration: none; }
.draggo-canvas .cl-flipcards .cl-flipcards__sub { margin: 10px 0 0; font-family: var(--cl-display); font-size: 15px; line-height: 22px; color: rgba(248, 246, 244, .9); }
.draggo-canvas .cl-flipcards .cl-flipcards__text { font-family: var(--cl-sans); color: rgba(248, 246, 244, .9); }