/* Abschnitt „Beispiele“: Desktop-Bild mit dem Handy als Briefmarke darauf */
.bsp-head { margin-bottom: clamp(40px, 6vw, 80px); }
.bsp-lead { max-width: 38em; margin-top: 24px; font-size: 1.1rem; color: var(--ink-2); }
.bsp-list { display: grid; gap: clamp(56px, 8vw, 112px); }
.bsp-item { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.bsp-item:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.bsp-item:nth-child(even) .bsp-shots { order: 2; }
.bsp-shots { position: relative; margin-bottom: clamp(48px, 7vw, 96px); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.bsp-desk { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-hi); box-shadow: 0 1px 0 var(--line), 0 18px 40px -22px rgba(20,33,61,.45); }
.bsp-stamp { position: absolute; right: -4%; bottom: calc(-1 * clamp(36px, 6vw, 80px)); width: clamp(96px, 17%, 170px); padding: 9px; background: var(--paper-hi); transform: rotate(3deg); transition: transform .35s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 10px 14px rgba(20,33,61,.28)); }
.bsp-item:nth-child(even) .bsp-stamp { right: auto; left: -4%; transform: rotate(-3deg); }
.bsp-stamp img { width: 100%; height: auto; aspect-ratio: 780 / 1688; object-fit: cover; }
/* Zähnung: Kreise in Papierfarbe über den Rand */
.bsp-stamp::before { content: ""; position: absolute; inset: -5px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 50% 0, var(--paper) 4.5px, transparent 5px) 0 0 / 12px 10px repeat-x,
    radial-gradient(circle at 50% 100%, var(--paper) 4.5px, transparent 5px) 0 100% / 12px 10px repeat-x,
    radial-gradient(circle at 0 50%, var(--paper) 4.5px, transparent 5px) 0 0 / 10px 12px repeat-y,
    radial-gradient(circle at 100% 50%, var(--paper) 4.5px, transparent 5px) 100% 0 / 10px 12px repeat-y; }
.bsp-text { position: relative; }
.bsp-no { font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 6rem); line-height: 1; font-weight: 400; color: var(--red); letter-spacing: -0.03em; margin-bottom: 8px; }
.bsp-branche { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.bsp-firma { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; margin-bottom: 16px; }
.bsp-link { text-decoration: none; }
.bsp-link::after { content: ""; position: absolute; inset: -20px -12px -60px; z-index: 2; }
.bsp-satz { color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.bsp-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 600; color: var(--red-dk); }
.bsp-go span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; }
.bsp-go svg { transition: transform .25s ease; }
.bsp-item:hover .bsp-go svg { transform: translateX(6px); }
.bsp-item:hover .bsp-shots { transform: translateY(-4px); }
.bsp-item:hover .bsp-stamp { transform: rotate(0deg) translateY(-6px); }
.bsp-item:has(.bsp-link:focus-visible) .bsp-go { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 3px; }
.bsp-link:focus-visible { outline: none; }
@media (max-width: 820px) {
  .bsp-item, .bsp-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bsp-item:nth-child(even) .bsp-shots { order: 0; }
  .bsp-shots { margin-bottom: 56px; }
  .bsp-stamp, .bsp-item:nth-child(even) .bsp-stamp { right: 4px; left: auto; width: clamp(92px, 28%, 130px); bottom: -48px; }
  .bsp-no { font-size: 3rem; }
  .bsp-link::after { inset: -20px -8px -10px; }
}
@media (prefers-reduced-motion: reduce) { .bsp-shots, .bsp-stamp, .bsp-go svg { transition: none; } }