/* Störer „Black Friday“ (Spec 110, 05.11.2026): dunkle Weltall-Karte im Stil der Black-Friday-Seite. Erd-Band (Video über Standbild),
   Lime-Laser zieht alle 7 s über die Karte, „-71 %“ in Pink-Blau schwebt leicht mit Lichtreflex, Countdown, Knopf in Lime.
   Kompakt wie Spec 107 (Desktop rund 150 px). Hausregeln: Radius höchstens 8 px, Knopf 6 px und 48 px, keine Versalien, kein text-shadow. */
@font-face { font-family: "LZB Display"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/assets/fonts/unbounded-var-latin.woff2") format("woff2"); }
.lzb { --lzb-lime: #d4ff3a; --lzb-pb: linear-gradient(90deg, #4d8dff, #a66bff 50%, #ff4fc8); margin: 20px 0 0; max-width: 480px; text-transform: none; }
.lzb[hidden] { display: none; }
.lzb.is-mitte { margin-left: auto; margin-right: auto; }
.lzb.is-gross { max-width: 540px; }
.lzb__karte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36%); min-height: 148px; overflow: hidden; border-radius: 8px; background: #05040c; color: #fff; text-align: left;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(166, 107, 255, 0.28), 0 24px 48px -26px rgba(77, 46, 160, 0.7); transition: box-shadow 0.3s ease, translate 0.3s ease; }
.lzb__karte:hover { translate: 0 -2px; box-shadow: 0 0 0 1px rgba(166, 107, 255, 0.45), 0 30px 56px -24px rgba(77, 46, 160, 0.8); }
[dir="rtl"] .lzb__karte { text-align: right; }
.lzb__link { position: absolute; inset: 0; z-index: 6; border-radius: 8px; }
.lzb__link:focus-visible { outline: 3px solid var(--lzb-lime); outline-offset: 3px; }

/* Erd-Band als Hintergrund, links dunkel für die Schrift */
.lzb__all { position: absolute; inset: 0; z-index: 0; }
.lzb__all picture { display: contents; }
.lzb__bild, .lzb__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 62%; }
.lzb__video { opacity: 0; transition: opacity 0.6s ease; }
.lzb__video.is-an { opacity: 1; }
.lzb__all::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 4, 12, 0.92) 0%, rgba(5, 4, 12, 0.78) 38%, rgba(5, 4, 12, 0.18) 72%, rgba(5, 4, 12, 0) 100%); }
[dir="rtl"] .lzb__all::after { background: linear-gradient(270deg, rgba(5, 4, 12, 0.92) 0%, rgba(5, 4, 12, 0.78) 38%, rgba(5, 4, 12, 0.18) 72%, rgba(5, 4, 12, 0) 100%); }

/* Laser: gebackener Lime-Strahl, zieht schräg über die Karte, dann Pause */
.lzb__laser { position: absolute; z-index: 2; left: -20%; top: 50%; width: 140%; max-width: none; height: 46px; object-fit: fill; mix-blend-mode: screen; opacity: 0; pointer-events: none; transform: translateY(-140px) rotate(-9deg); }
.ist-sichtbar .lzb__laser { animation: lzb-laser 7s cubic-bezier(0.45, 0.05, 0.35, 1) 0.8s infinite; }
@keyframes lzb-laser {
  0% { opacity: 0; transform: translateY(-110px) rotate(-9deg); }
  4% { opacity: 0.95; }
  20% { opacity: 0.85; transform: translateY(90px) rotate(-9deg); }
  24%, 100% { opacity: 0; transform: translateY(110px) rotate(-9deg); }
}

/* -71 % in Pink-Blau: schwebt und kippt kaum merklich, Lichtreflex gleitet hinter dem Laser her */
.lzb__minus { position: relative; z-index: 3; grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: 92%; perspective: 700px; pointer-events: none; }
  /* Bild mit gebackenem ovalem Auslauf (minus-71p-badge): dunkler Hof hinter den Ziffern statt Kasten, auch über dem hellen Erdrand lesbar */
.lzb__minus-in { display: grid; transform-origin: 50% 60%; }
.lzb__minus-in img { grid-area: 1 / 1; display: block; width: 100%; height: auto; max-width: none; }
.lzb__glanz { -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 42%, #000 50%, rgba(0, 0, 0, 0) 58%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 42%, #000 50%, rgba(0, 0, 0, 0) 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 85% 0; mask-position: 85% 0; }
.ist-sichtbar .lzb__minus-in { animation: lzb-schweben 9s ease-in-out infinite; }
.ist-sichtbar .lzb__glanz { animation: lzb-glanz 7s cubic-bezier(0.45, 0.05, 0.35, 1) 1.5s infinite; }
@keyframes lzb-schweben { 0%, 100% { transform: rotateY(-9deg) rotateX(5deg) translateY(1px); } 50% { transform: rotateY(8deg) rotateX(-3deg) translateY(-4px); } }
@keyframes lzb-glanz { 0% { -webkit-mask-position: 85% 0; mask-position: 85% 0; } 22%, 100% { -webkit-mask-position: 15% 0; mask-position: 15% 0; } }

/* Text */
.lzb__in { position: relative; z-index: 4; grid-column: 1; grid-row: 1; display: grid; align-content: center; gap: 5px; padding: 14px 4px 14px 18px; }
[dir="rtl"] .lzb__in { padding: 14px 18px 14px 4px; }
.lzb__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 9px; }
.lzb__titel { font: 800 23px/1 "LZB Display", "Montserrat", Arial, sans-serif; letter-spacing: -0.045em; color: #fff; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.lzb__bis { font-size: 12px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }
.lzb__sub { font-size: 13px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
.lzb__rab { font-weight: 800; color: transparent; background: var(--lzb-pb); -webkit-background-clip: text; background-clip: text; white-space: nowrap; }
.lzb__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.lzb__cd { display: grid; gap: 1px; min-width: 0; }
.lzb__cdl { font-size: 11px; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.lzb__cdz { font-size: 15px; font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.lzb__cdd { margin-right: 0.08em; }
.lzb__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 16px; border-radius: 6px; background: var(--lzb-lime); color: #000; font-weight: 700; font-size: 14.5px; line-height: 1.1; white-space: nowrap; transition: background-color 0.2s ease; }
.lzb__cta svg { width: 16px; height: 16px; fill: currentColor; }
[dir="rtl"] .lzb__cta svg { transform: scaleX(-1); }
.lzb__karte:hover .lzb__cta { background: #e6ff8a; }

/* Handy: -71 % rechts oben kleiner, Knopf über die Textbreite */
@media (max-width: 480px) {
  .lzb__karte { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); min-height: 0; }
  .lzb__minus { align-self: start; margin-top: 14px; width: 100%; }
  .lzb__in { padding: 13px 0 13px 14px; gap: 4px; }
  [dir="rtl"] .lzb__in { padding: 13px 14px 13px 0; }
  .lzb__titel { font-size: 20px; }
  .lzb__sub { font-size: 12.5px; }
  .lzb__cta { min-height: 46px; padding: 0 13px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lzb__karte { transition: none; } .lzb__karte:hover { translate: none; }
  .ist-sichtbar .lzb__laser, .ist-sichtbar .lzb__minus-in, .ist-sichtbar .lzb__glanz { animation: none; }
}