.hero-film-shop{--film-ratio:2;aspect-ratio:2;-webkit-mask-image:none;mask-image:none}.ecom-table{border-collapse:separate;border-spacing:.75rem 0;table-layout:fixed;text-align:start;width:calc(100% + 1.5rem);margin-inline:-.75rem}.ecom-table :is(th,td){text-align:start;vertical-align:top;padding:1rem 1.125rem}.ecom-table thead td,.ecom-table tbody th{width:18%}.ecom-table tbody th{color:var(--color-ink-muted);font-size:var(--text-body-sm);padding-inline:0;font-weight:500;line-height:1.4}.ecom-table [data-col]{border-inline:1px solid var(--color-line);background:var(--color-surface-raised);transition:border-color var(--duration-fast) var(--ease-out)}.ecom-table thead [data-col]{border-top:1px solid var(--color-line);border-start-start-radius:var(--radius-xl);border-start-end-radius:var(--radius-xl);padding-top:1.25rem}.ecom-table tbody td{border-top:1px solid var(--color-line);color:var(--color-ink-muted);font-size:var(--text-body-sm);text-wrap:pretty;line-height:1.5}.ecom-table tbody tr:last-child td{border-bottom:1px solid var(--color-line);border-end-end-radius:var(--radius-xl);border-end-start-radius:var(--radius-xl);padding-bottom:1.375rem}.ecom-table tbody tr[data-row=fit] :is(th,td){padding-block:1.125rem}.ecom-table tbody tr[data-row=fit] td{border-top-color:var(--color-line-strong);color:var(--color-ink);font-weight:500}:is(.ecom-table:has([data-col=shopware]:hover) [data-col=shopware],.ecom-table:has([data-col=shopify]:hover) [data-col=shopify],.ecom-table:has([data-col=woocommerce]:hover) [data-col=woocommerce],.ecom-table:has([data-col=magento]:hover) [data-col=magento]){border-inline-color:var(--color-area)}:is(.ecom-table:has([data-col=shopware]:hover) thead [data-col=shopware],.ecom-table:has([data-col=shopify]:hover) thead [data-col=shopify],.ecom-table:has([data-col=woocommerce]:hover) thead [data-col=woocommerce],.ecom-table:has([data-col=magento]:hover) thead [data-col=magento]){border-top-color:var(--color-area)}:is(.ecom-table:has([data-col=shopware]:hover) tr:last-child [data-col=shopware],.ecom-table:has([data-col=shopify]:hover) tr:last-child [data-col=shopify],.ecom-table:has([data-col=woocommerce]:hover) tr:last-child [data-col=woocommerce],.ecom-table:has([data-col=magento]:hover) tr:last-child [data-col=magento]){border-bottom-color:var(--color-area)}.ecom-table-name{color:var(--color-ink);align-items:center;gap:.25rem;text-decoration:none;display:inline-flex}.ecom-table-name svg{color:var(--color-ink-subtle);transition:translate var(--duration-fast) var(--ease-out)}.ecom-table-name:hover svg{translate:0 2px}.ecom-compare-switch{display:none}@media not (min-width:48rem){.ecom-compare-switch{border-radius:var(--radius-full);background:var(--color-surface);border:0;gap:.25rem;margin:0 0 1rem;padding:.25rem;display:flex}.ecom-compare-pick{border-radius:var(--radius-full);min-width:0;color:var(--color-ink-muted);font-size:var(--text-caption);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;flex:auto;padding:.5rem .25rem;font-weight:500;overflow:hidden}.ecom-compare-pick[aria-pressed=true]{background:var(--color-surface-raised);box-shadow:var(--shadow-ring);color:var(--color-ink)}.ecom-table{border-spacing:.5rem 0;width:calc(100% + 1rem);margin-inline:-.5rem}.ecom-table :is(th,td){padding:.875rem}.ecom-table thead td,.ecom-table tbody th{width:34%}.ecom-compare [data-col]{animation:ecom-fade var(--duration-fast) var(--ease-out)}.ecom-compare[data-pick=shopware] [data-col]:not([data-col=shopware]),.ecom-compare[data-pick=shopify] [data-col]:not([data-col=shopify]),.ecom-compare[data-pick=woocommerce] [data-col]:not([data-col=woocommerce]),.ecom-compare[data-pick=magento] [data-col]:not([data-col=magento]){display:none}}@keyframes ecom-fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.ecom-compare [data-col]{animation:none}}
.ord-film{border-radius:var(--radius-xl);background:var(--color-surface);padding:1.25rem}.ord-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.ord-replay{border-radius:var(--radius-full);background:var(--color-surface-raised);width:2rem;height:2rem;box-shadow:var(--shadow-ring);color:var(--color-ink-muted);cursor:pointer;visibility:hidden;place-items:center;display:grid}.ord-replay[data-shown]{visibility:visible}.ord-lane,.ord-rail{display:none}.ord-station{grid-template-columns:2.5rem minmax(0,1fr);gap:.5rem .875rem;padding-bottom:1.5rem;display:grid;position:relative}.ord-station:not([data-last]):before{background:var(--color-line);content:"";width:2px;transition:background-color var(--duration-surface) var(--ease-out);position:absolute;top:2.5rem;bottom:0;left:calc(1.25rem - 1px)}.ord-station[data-on]:has(+.ord-station[data-on]):before{background:var(--color-area)}.ord-stop{border-radius:var(--radius-md);text-align:start;cursor:pointer;order:-1;grid-column:1/-1;align-items:center;gap:.875rem;display:flex}.ord-node{border-radius:var(--radius-full);background:var(--color-surface-raised);width:2.5rem;height:2.5rem;box-shadow:var(--shadow-ring);transition:background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);flex-shrink:0;place-items:center;display:grid}[data-on]>.ord-stop .ord-node{background:var(--color-area-tint);color:var(--color-area-ink)}.ord-stop[aria-pressed=true] .ord-node{background:var(--color-area);box-shadow:0 0 0 4px var(--color-area-tint);color:var(--color-on-hue)}.ord-stop-title{font-size:var(--text-body-sm);font-weight:500;line-height:1.3}.ord-flow{color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-caption);grid-column:2}.ord-cust,.ord-sys{grid-column:2;max-width:17rem;display:block}.ord-cust:empty{display:none}:is(.ord-cust,.ord-sys)>span{transition:background-color var(--duration-surface) var(--ease-enter), box-shadow var(--duration-surface) var(--ease-enter)}.ord-film[data-armed] .ord-station:not([data-on])>:is(.ord-cust,.ord-sys)>span{box-shadow:none;outline:1px dashed var(--color-line-strong);outline-offset:-1px;background:0 0}:is(.ord-cust,.ord-sys)>span>*{transition:opacity var(--duration-surface) var(--ease-enter), translate var(--duration-surface) var(--ease-enter), visibility 0s}.ord-film[data-armed] .ord-station:not([data-on])>:is(.ord-cust,.ord-sys)>span>*{visibility:hidden;opacity:0;transition:none;translate:0 6px}.ord-hint{color:var(--color-ink-muted);font-size:var(--text-caption);margin-top:.5rem}.ord-panel{margin-top:.75rem}.ord-pair{gap:.75rem;display:grid}.ord-pair>div{border-radius:var(--radius-lg);flex-direction:column;gap:.375rem;padding:1rem 1.125rem;display:flex}.ord-before{border:1px dashed var(--color-line-strong)}.ord-now{background:var(--color-surface-raised);box-shadow:var(--shadow-raised)}@media (min-width:48rem){.ord-film{padding:1.5rem 1.75rem 1.75rem}.ord-pair{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion:reduce){:is(.ord-cust,.ord-sys)>span,:is(.ord-cust,.ord-sys)>span>*,.ord-rail-fill,.ord-node,.ord-station:before{transition:none}}
@media (min-width:64rem){.ord-grid{grid-template-rows:minmax(7.5rem,auto) auto auto auto;grid-template-columns:8rem repeat(5,minmax(0,1fr));gap:.75rem;display:grid;position:relative}.ord-lane{color:var(--color-ink-muted);font-family:var(--font-mono);font-size:var(--text-caption);grid-column:1;line-height:1.4;display:block}.ord-lane[data-lane=customer]{grid-row:1;align-self:end}.ord-lane[data-lane=systems]{grid-row:4}.ord-rail{background:var(--color-line);grid-area:2/2/auto/-1;align-self:start;height:2px;margin:calc(1.25rem - 1px) calc(10% - .3rem) 0;display:block}.ord-rail-fill{width:calc(var(--progress) * 100%);background:var(--color-area);height:100%;transition:width 1.2s var(--ease-move);display:block}.ord-station{display:contents}.ord-station:not([data-last]):before{content:none}.ord-cust,.ord-stop,.ord-flow,.ord-sys{grid-column:var(--col);justify-self:center;width:100%}.ord-cust{grid-row:1;align-self:end}.ord-cust:empty{display:block}.ord-stop{z-index:1;text-align:center;flex-direction:column;grid-row:2;gap:.5rem}.ord-flow{text-align:center;grid-row:3}.ord-sys{grid-row:4;align-self:start}.ord-hint{margin-top:1.25rem}}@media (prefers-reduced-motion:reduce){.ord-rail-fill{transition:none}}