/* =========================================================
   VORSCHAU Leistungen (06.10.2026): jede Leistung in ihrem eigenen Medium
   statt vier gleich gebauter Karten. Runde, moderne Grundoptik bleibt.
   ========================================================= */
.lx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.lx h3 { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin: 0; }
.lx p { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; max-width: 38ch; }

/* Fahrzeug: randloses Foto, Text als weißer Aufkleber unten links */
.lx-fzg { grid-column: span 7; position: relative; min-height: 520px; border-radius: var(--r-card); overflow: hidden; background: #ddd; }
.lx-fzg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 55%;
  transition: scale .9s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lx-fzg:hover img { scale: 1.03; } }
.lx-sticker { position: absolute; right: 20px; bottom: 20px; left: auto; width: calc(100% - 40px); max-width: 360px; padding: 24px 26px 22px;
  background: #fff; border-radius: var(--r-sm); }
.lx-sticker p { color: #3E4047; }
.lx-sticker .nx-link { margin-top: 16px; display: inline-flex; }

/* Video: schwarze Fläche, Reel läuft im Handy */
.lx-video { grid-column: span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 30px; border-radius: var(--r-card); background: var(--ink); color: #fff; overflow: hidden; }
.lx-video p { color: rgba(255,255,255,.78); }
.lx-phone { position: relative; align-self: center; width: min(180px, 52%); aspect-ratio: 9 / 19; padding: 7px;
  border-radius: 32px; background: #1d1e22; box-shadow: inset 0 0 0 1.5px #3a3c42, 0 30px 50px -24px rgba(0,0,0,.8); }
.lx-phone::before { content: ""; position: absolute; z-index: 1; top: 15px; left: 50%; width: 30%; height: 15px; translate: -50% 0;
  border-radius: 20px; background: #000; }
.lx-phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: #000; }

/* Logo: drei echte Logos nebeneinander, ohne Rahmen */
.lx-logo { grid-column: span 7; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  padding: 30px; border-radius: var(--r-card); background: #fff; border: 1.5px solid var(--line); }
.lx-logo p { color: #3E4047; }
.lx-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; align-items: center; gap: 36px; padding: 0 6px 8px; }
.lx-logos img { display: block; width: 100%; height: auto; max-height: 150px; object-fit: contain; }

/* Werbemittel: Visitenkarte als Objekt, leicht schräg auf einem weißen Kartenstapel */
.lx-print { grid-column: span 5; position: relative; display: flex; flex-direction: column; gap: 24px; padding: 30px;
  border-radius: var(--r-card); background: var(--tint); overflow: hidden; }
.lx-print p { color: #3E4047; }
.lx-cards { position: relative; margin: auto 0 6px; height: 200px; }
.lx-cards i, .lx-cards img { position: absolute; left: 50%; top: 50%; width: min(300px, 80%); aspect-ratio: 85 / 55; border-radius: 10px; }
.lx-cards i { background: #fff; translate: -46% -44%; rotate: 7deg; box-shadow: 0 18px 30px -18px rgba(12, 74, 110, .45); }
.lx-cards img { object-fit: cover; translate: -54% -56%; rotate: -6deg; box-shadow: 0 24px 36px -18px rgba(12, 74, 110, .6);
  transition: rotate .5s var(--ease-out), translate .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lx-print:hover .lx-cards img { rotate: -2deg; translate: -54% -60%; } }

@media (max-width: 1024px) {
  .lx-fzg, .lx-video, .lx-logo, .lx-print { grid-column: span 6; }
  .lx-fzg { min-height: 440px; }
}
@media (max-width: 760px) {
  .lx { grid-template-columns: 1fr; }
  .lx-fzg, .lx-video, .lx-logo, .lx-print { grid-column: 1 / -1; }
  .lx-fzg { min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); }
  .lx-fzg img { position: static; height: 240px; }
  .lx-sticker { position: static; width: auto; max-width: none; padding: 22px 22px 24px; border-radius: 0; }
  .lx-phone { width: 170px; }
  .lx-logos { gap: 18px; }
  .lx-cards { height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .lx-fzg img, .lx-cards img { transition: none; } }