/* ==========================================================================
   LIVE DEMO — "Drei Wege zu Ihrem digitalen Produkt". Three bronze-bordered
   cards, each holding a real device-mockup image (tablet / laptop / phone).
   ========================================================================== */
#live-demo { padding: 72px 0; }
#live-demo .section__title { font-size: clamp(24px, 2.6vw, 34px); }
#live-demo .section__lede { font-size: clamp(14px, 1.1vw, 16px); }

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: 22px;
  margin-top: 40px;
}
/* Border, radius, shadow and hover-lift now come from the shared
   .dh-card / .dh-card--media system (css/cards.css). */
.demo-card {
  height: 460px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* Higher specificity than the shared ".dh-card--media > img" rule so the
   full-bleed absolute cover layout is preserved. */
.demo-card .demo-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Top-anchored scrim behind this card's real text/link — kept permanent
   (not faded on hover, unlike the shared decorative ::after gradient)
   since it holds functional content and must stay legible and clickable.
   It complements, rather than duplicates, the shared bottom-to-top
   .dh-card--media::after gradient, which darkens the opposite, text-free
   half of the image. */
.demo-card__overlay {
  position: relative;
  z-index: 2;
  padding: 20px 20px 18px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10,8,6,.94) 0%, rgba(10,8,6,.72) 44%, rgba(10,8,6,.18) 82%, transparent 100%);
}

.demo-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
}
.demo-card__badge { grid-row: 1; display: flex; align-items: center; gap: 8px; justify-self: start; line-height: 1; }
.demo-card__badge:first-child { grid-column: 1; }
.demo-card__badge--spacer { grid-column: 3; visibility: hidden; }
.demo-card__num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: var(--gold-champagne);
}
.demo-card__divider {
  width: 1px;
  height: 15px;
  background: var(--bronze-border);
}
.demo-card__icon { color: var(--gold-muted); display: flex; align-items: center; }
.demo-card__icon svg { width: 14px; height: 14px; display: block; }

.demo-card:nth-child(1) .demo-card__overlay { background: linear-gradient(180deg, rgba(9,10,12,.94) 0%, rgba(9,10,12,.68) 48%, rgba(9,10,12,.14) 84%, transparent 100%); }
.demo-card:nth-child(2) .demo-card__overlay { background: linear-gradient(180deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.66) 48%, rgba(10,10,10,.12) 84%, transparent 100%); }
.demo-card:nth-child(3) .demo-card__overlay { background: linear-gradient(180deg, rgba(7,9,12,.94) 0%, rgba(7,9,12,.68) 48%, rgba(7,9,12,.14) 84%, transparent 100%); }

.demo-card:nth-child(1) .demo-card__num,
.demo-card:nth-child(1) .demo-card__link { color: #d9a86c; }
.demo-card:nth-child(2) .demo-card__num,
.demo-card:nth-child(2) .demo-card__link { color: #9bb8ff; }
.demo-card:nth-child(3) .demo-card__num,
.demo-card:nth-child(3) .demo-card__link { color: #8fe0c2; }

.demo-card:nth-child(1) .demo-card__divider { background: rgba(217,168,108,.35); }
.demo-card:nth-child(2) .demo-card__divider { background: rgba(155,184,255,.35); }
.demo-card:nth-child(3) .demo-card__divider { background: rgba(143,224,194,.35); }

.demo-card__title {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ivory);
  text-align: center;
  white-space: nowrap;
}
.demo-card__link {
  grid-row: 2;
  grid-column: 2;
  text-align: center;
  color: var(--gold-muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(168,170,172,.4);
  transition: color var(--transition-fast);
}
.demo-card__link:hover { color: var(--silver-light); }
.demo-card__link .arrow { transition: transform var(--transition-fast); display: inline-block; }
.demo-card__link:hover .arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
  .demo-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}