/* Compare: CLIPFABRIK vs the alternatives. Light page style, our column as a black card. */
.cmp-soft { color: #a1a1aa; -webkit-text-fill-color: #a1a1aa; }
.cmp-scroll { margin-top: 56px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 18px 4px 24px; }
.cmp { --lab: 210px; --us: 280px; position: relative; display: grid; grid-template-columns: var(--lab) var(--us) repeat(3, minmax(170px, 1fr)); min-width: 980px; }
/* The highlight card behind column 2. */
.cmp::before { content: ""; position: absolute; top: -14px; bottom: -14px; left: var(--lab); width: var(--us); border-radius: var(--radius); z-index: 0;
  background: radial-gradient(120% 60% at 50% 0%, #2a2a2e, #0b0b0d 60%); box-shadow: 0 30px 60px -24px rgba(9,9,11,.55), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(9,9,11,.9); }
.cmp-cell { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 16px;
  font: 500 .95rem/1.35 var(--sf); letter-spacing: -.015em; color: #52525b; border-top: 1px solid var(--line); }
.cmp-cell.us { color: #fff; font-weight: 600; border-top-color: rgba(255,255,255,.1); }
.cmp-rl { justify-content: flex-start; text-align: left; color: var(--ink); font-weight: 600; font-size: .9rem; }
/* Header row. */
.cmp-h, .cmp-corner { border-top: 0; flex-direction: column; gap: 12px; padding: 26px 14px 24px; }
.cmp-h b { font: 600 .8rem/1.2 var(--sf); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.cmp-h.us b { font-size: 1.1rem; letter-spacing: -.03em; text-transform: none; color: #fff; }
.cmp-h.us small { margin-top: -8px; font: 600 .68rem/1 var(--sf); letter-spacing: .18em; text-transform: uppercase; color: #a1a1aa; }
.cmp-h.us img { width: 56px; height: 56px; border-radius: 16px; background: #fff; padding: 4px; mix-blend-mode: normal;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.2); }
.cmp-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(9,9,11,.4); }
.cmp-ico svg { width: 20px; height: 20px; }

/* Our channels strip. */
.cmp-strip { margin-top: 34px; display: flex; align-items: stretch; flex-wrap: wrap; border-radius: var(--radius); background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(9,9,11,.35); overflow: hidden; }
.cmp-sk { display: flex; align-items: center; gap: 10px; padding: 18px 22px; font: 600 .85rem/1 var(--sf); color: var(--ink); border-right: 1px solid var(--line); }
.cmp-sk svg { width: 18px; height: 18px; }
.cmp-ch { flex: 1 1 160px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 22px; text-decoration: none;
  border-right: 1px solid var(--line); transition: background .2s; }
.cmp-ch:last-child { border-right: 0; }
.cmp-ch:hover { background: var(--mist); }
.cmp-ch b { font: 700 1rem/1.1 var(--sf); letter-spacing: -.03em; color: var(--ink); }
.cmp-ch span { font: 500 .8rem/1 var(--sf); color: var(--soft); }
.cmp-foot { max-width: 46rem; margin: 40px auto 0; text-align: center; font: 400 1.08rem/1.6 var(--sf); letter-spacing: -.02em; color: var(--text); }
.cmp-foot b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .cmp { --lab: 150px; --us: 220px; min-width: 860px; }
  .cmp-sk { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .cmp-ch { flex-basis: 50%; border-bottom: 1px solid var(--line); }
}
#vergleich .h2 { font-size: clamp(2rem, 4.3vw, 3.9rem); max-width: none; line-height: 1.05; }
.cmp-swipe { display: none; margin: 34px 0 -30px; text-align: center; font: 500 .8rem/1 var(--sf); color: var(--soft); }
@media (max-width: 1040px) { .cmp-swipe { display: block; } }