/* Homepage only: compact, scalable truck illustration of the shipping service. */
/* Native fragment links also clear the expanded/compact header without changing layout. */
#versand { scroll-margin-top: 138px; }
.site-header.is-compact ~ main #versand { scroll-margin-top: 116px; }
@media (max-width: 800px) {
  #versand { scroll-margin-top: 106px; }
  .site-header.is-compact ~ main #versand { scroll-margin-top: 84px; }
}
#versand .logistics-points { min-height: 0; padding-top: 0; gap: 12px 26px; }
.logistics-truck { grid-column: 1 / -1; min-width: 0; margin: 0 0 2px; }
.logistics-truck-scene { display: block; width: 100%; height: auto; overflow: visible; }
.logistics-truck-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 25px; margin: -3px 0 3px; }
#versand .logistics-truck-caption > span { color: var(--gray); font-size: .69rem; letter-spacing: .015em; }
.logistics-truck-replay { display: inline-flex; align-items: center; gap: 4px; padding: 3px 0 3px 8px; border: 0; background: none; color: var(--gray); font: inherit; font-size: .68rem; white-space: nowrap; cursor: pointer; }
.logistics-truck-replay[hidden] { display: none; }
.logistics-truck-replay:hover { color: var(--red); }
.logistics-truck-replay:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
#versand .logistics-truck-replay span { color: inherit; font-size: 1rem; line-height: 1; }
.truck-assemble { --truck-x: 0px; --truck-y: 0px; --truck-delay: 0s; opacity: 1; transform-box: fill-box; transform-origin: center; }
.truck-side-panel { clip-path: inset(0 0 0 0); transform-box: fill-box; }
.logistics-truck.is-pending .truck-assemble { opacity: 0; }
.logistics-truck.is-running .truck-assemble { animation: bm-truck-assemble 1.05s cubic-bezier(.2,.74,.24,1) calc(var(--truck-delay) * 1.4) both; }
@keyframes bm-truck-assemble {
  from { opacity: 0; transform: translate(var(--truck-x), var(--truck-y)); }
  to { opacity: 1; transform: translate(0, 0); }
}
@media (min-width: 1001px) {
  #versand.logistics { min-height: min(610px, calc(100svh - 104px)); }
}
@media (min-width: 1001px) and (max-height: 780px) {
  #versand.logistics { padding-top: 24px; padding-bottom: 24px; }
  #versand .logistics-points { gap: 8px 22px; }
  #versand .logistics-points p { padding-top: 10px; padding-bottom: 9px; min-height: 88px; }
  #versand .logistics-points strong { font-size: .94rem; }
  #versand .logistics-points p > span { font-size: .83rem; }
}
@media (max-width: 1000px) {
  .logistics-truck { width: 100%; max-width: 680px; justify-self: center; }
}
@media (max-width: 560px) {
  #versand .logistics-points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .logistics-truck { margin-bottom: 14px; }
  .logistics-truck-caption { flex-wrap: wrap; gap: 3px 12px; margin-top: 0; }
  #versand .logistics-truck-caption > span { font-size: .67rem; }
  .logistics-truck-replay { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .logistics-truck .truck-assemble { animation: none !important; opacity: 1 !important; transform: none !important; }
  .logistics-truck .truck-side-panel { animation: none !important; clip-path: inset(0 0 0 0) !important; }
  .logistics-truck-replay { display: none !important; }
}