/* wygge Cockpit — „Neuer Kunden-Shop“ (W2, FND-1560, DEC-103). Wizard + status card + storefront state chips.
   Ported from the approved Board 1 (wygge-audit/analysis/boards/w2-autoprovisionierung/01-cockpit-neuer-kunden-shop.html).
   Colours, radii and fonts only through the --ad-* tokens (the faux browser of the preview is the one fixed-colour island: it shows a customer shop, not the cockpit).
   MOTION (framework §1c): tokens --mo-dur-1/2/3 = 120/200/320 ms, three curves, 40 ms stagger; only opacity / transform (+ background colour on a state change);
   no spinner, no endless shimmer; prefers-reduced-motion replaces movement by a short cross-fade. */
:root {
  --mo-dur-1: 120ms;
  --mo-dur-2: 200ms;
  --mo-dur-3: 320ms;
  --mo-ease: cubic-bezier(0.2, 0, 0, 1);
  --mo-ease-emph: cubic-bezier(0.3, 0, 0, 1);
  --mo-ease-out: cubic-bezier(0, 0, 0, 1);
  --mo-ease-in: cubic-bezier(0.3, 0, 1, 1);
  --mo-stagger: 40ms;
}
@keyframes sw-in-fwd { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes sw-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes sw-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.sw-fwd { animation: sw-in-fwd var(--mo-dur-2) var(--mo-ease-out) both; }
.sw-back { animation: sw-in-back var(--mo-dur-2) var(--mo-ease-out) both; }
.sw-up { animation: sw-in-up var(--mo-dur-3) var(--mo-ease-out) both; animation-delay: calc(var(--i, 0) * var(--mo-stagger)); }
.sw-pop { display: inline-flex; animation: sw-pop var(--mo-dur-2) var(--mo-ease-emph) both; }
.sw-bar { transform-origin: left center; transition: transform var(--mo-dur-3) var(--mo-ease); }
@media (prefers-reduced-motion: reduce) {
  .sw-fwd, .sw-back, .sw-up, .sw-pop { animation: sw-fade var(--mo-dur-1) linear both; animation-delay: 0ms; }
  .sw-bar { transition: none; }
}

.sw-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* layout */
.sw-wz { display: grid; grid-template-columns: 232px minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1280px) { .sw-wz { grid-template-columns: 200px minmax(0, 1fr); } .sw-wz-prev { grid-column: 1 / -1; } }
@media (max-width: 760px) { .sw-wz { grid-template-columns: minmax(0, 1fr); } }

/* stepper */
.sw-stp { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--ad-surface); border: 1.5px solid var(--ad-border); border-radius: 10px; }
.sw-stp li button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--ad-text-muted); font-weight: 600; font-size: 12.5px; transition: background var(--mo-dur-1) var(--mo-ease), color var(--mo-dur-1) var(--mo-ease); }
.sw-stp li button:hover { background: var(--ad-surface-2); }
.sw-stp li button:focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: -2px; }
.sw-stp li button[disabled] { cursor: not-allowed; opacity: .55; }
.sw-stp li[aria-current="step"] button { background: var(--ad-accent-bg); color: var(--ad-text); font-weight: 700; }
.sw-stp .n { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex-shrink: 0; background: var(--ad-surface-inset); color: var(--ad-text-muted); }
.sw-stp li[aria-current="step"] .n { background: var(--ad-brand); color: var(--ad-accent); }
[data-theme="dark"] .sw-stp li[aria-current="step"] .n { background: var(--ad-accent); color: var(--ad-on-accent); }
.sw-stp li.done .n { background: var(--ad-success-bg); color: var(--ad-success-fg); }
.sw-stp .sub { display: block; font-size: 11px; font-weight: 500; color: var(--ad-text-subtle); margin-top: 1px; }
.sw-stp-m { display: none; }
@media (max-width: 760px) {
  .sw-stp { display: none; }
  .sw-stp-m { display: block; background: var(--ad-surface); border: 1.5px solid var(--ad-border); border-radius: 10px; padding: 12px 14px; }
  .sw-stp-m .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; font-size: 13px; }
  .sw-stp-m .t span { color: var(--ad-text-subtle); font-size: 11.5px; font-weight: 600; }
  .sw-stp-m .bar { height: 5px; border-radius: 999px; background: var(--ad-surface-inset); margin-top: 9px; overflow: hidden; }
  .sw-stp-m .bar i { display: block; height: 100%; width: 100%; background: var(--ad-accent-deep); border-radius: 999px; transform-origin: left; transition: transform var(--mo-dur-3) var(--mo-ease); }
}

/* step card */
.sw-sc { background: var(--ad-surface); border: 1.5px solid var(--ad-border); border-radius: 10px; overflow: hidden; }
.sw-sc-h { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--ad-divider); }
.sw-sc-h .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--ad-surface-inset); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sw-sc-h h2 { margin: 0; font-family: var(--ad-font-display); font-size: 16px; font-weight: 700; }
.sw-sc-h p { margin: 2px 0 0; font-size: 12px; color: var(--ad-text-subtle); }
.sw-sc-b { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.sw-sc-b .ad-field { margin-bottom: 0; }
.sw-sc-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--ad-divider); background: var(--ad-surface-2); flex-wrap: wrap; }
.sw-sc-f .why { font-size: 11.5px; color: var(--ad-text-subtle); display: inline-flex; gap: 6px; align-items: center; }
.sw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .sw-row2 { grid-template-columns: 1fr; } .sw-sc-b { padding: 16px; } .sw-sc-h { padding: 14px 16px; } .sw-sc-f { padding: 12px 16px; } }
.sw-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-text-subtle); font-weight: 700; margin-bottom: 8px; }
.sw-h3 { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.sw-seg { display: inline-flex; padding: 3px; background: var(--ad-surface-inset); border-radius: 9px; gap: 2px; align-self: flex-start; }
.sw-seg button { all: unset; box-sizing: border-box; padding: 7px 13px; border-radius: 7px; font-weight: 700; font-size: 12px; color: var(--ad-text-muted); cursor: pointer; transition: background var(--mo-dur-1) var(--mo-ease); }
.sw-seg button:focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 1px; }
.sw-seg button[aria-pressed="true"] { background: var(--ad-surface); color: var(--ad-text); box-shadow: var(--ad-shadow-sm); }

/* address */
.sw-addr { display: flex; align-items: stretch; border: 1.5px solid var(--ad-border-strong); border-radius: 8px; background: var(--ad-surface); overflow: hidden; transition: border-color var(--mo-dur-1) var(--mo-ease); }
.sw-addr:focus-within { border-color: var(--ad-brand); box-shadow: var(--ad-shadow-sm); }
[data-theme="dark"] .sw-addr:focus-within { border-color: var(--ad-accent); }
.sw-addr.bad { border-color: var(--ad-danger); }
.sw-addr input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 11px 12px; font: 600 15px var(--ad-font-body); color: var(--ad-text); }
.sw-addr .suf { display: inline-flex; align-items: center; padding: 0 13px; background: var(--ad-surface-inset); color: var(--ad-text-muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; border-left: 1.5px solid var(--ad-border); }
@media (max-width: 560px) { .sw-addr { flex-wrap: wrap; } .sw-addr .suf { width: 100%; padding: 7px 12px; border-left: 0; border-top: 1.5px solid var(--ad-border); } }
.sw-urlbox { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 9px; background: var(--ad-surface-2); border: 1.5px dashed var(--ad-border-strong); font-weight: 700; font-size: 14px; word-break: break-all; }
.sw-avail { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; min-height: 22px; margin-top: 8px; }
.sw-avail.ok { color: var(--ad-success-fg); } .sw-avail.no { color: var(--ad-danger-fg); } .sw-avail.idle { color: var(--ad-text-subtle); }
.sw-dns { border: 1.5px solid var(--ad-border); border-radius: 10px; overflow: hidden; background: var(--ad-surface); }
.sw-dns > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 14px; font-size: 12.5px; align-items: baseline; }
.sw-dns > div + div { border-top: 1px solid var(--ad-divider); }
.sw-dns .h { background: var(--ad-surface-2); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ad-text-subtle); font-weight: 700; }
.sw-dns .v { font-family: var(--ad-font-mono); font-weight: 600; word-break: break-all; }
@media (max-width: 560px) { .sw-dns > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sw-dns .h { display: none; } }

/* style cards */
.sw-sty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .sw-sty { grid-template-columns: minmax(0, 1fr); } }
.sw-sty button { all: unset; box-sizing: border-box; cursor: pointer; border: 1.5px solid var(--ad-border); border-radius: 10px; padding: 12px; background: var(--ad-surface); display: flex; flex-direction: column; gap: 9px; transition: border-color var(--mo-dur-1) var(--mo-ease), box-shadow var(--mo-dur-1) var(--mo-ease); }
.sw-sty button:hover { border-color: var(--ad-border-strong); }
.sw-sty button:focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 2px; }
.sw-sty button[aria-pressed="true"] { border-color: var(--ad-brand); box-shadow: 0 0 0 3px var(--ad-accent-bg); }
[data-theme="dark"] .sw-sty button[aria-pressed="true"] { border-color: var(--ad-accent); }
.sw-sty .t { font-weight: 700; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sw-sty .d { font-size: 11.5px; color: var(--ad-text-subtle); line-height: 1.45; }
.sw-sty .d b { color: var(--ad-text); font-weight: 600; }
.sw-thumb { height: 92px; border-radius: 7px; background: #fff; border: 1px solid var(--ad-border); position: relative; overflow: hidden; }
.sw-thumb i { position: absolute; display: block; border-radius: 2px; background: #cfd6d2; }

/* option cards */
.sw-opt { font-family: inherit; color: inherit; display: flex; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--ad-border); border-radius: 10px; cursor: pointer; background: var(--ad-surface); text-align: left; transition: border-color var(--mo-dur-1) var(--mo-ease); width: 100%; }
.sw-opt:focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 2px; }
.sw-opt[aria-pressed="true"] { border-color: var(--ad-brand); background: var(--ad-accent-bg); }
[data-theme="dark"] .sw-opt[aria-pressed="true"] { border-color: var(--ad-accent); }
.sw-opt .r { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--ad-border-strong); flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.sw-opt[aria-pressed="true"] .r { border-color: var(--ad-brand); } [data-theme="dark"] .sw-opt[aria-pressed="true"] .r { border-color: var(--ad-accent); }
.sw-opt[aria-pressed="true"] .r::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ad-brand); } [data-theme="dark"] .sw-opt[aria-pressed="true"] .r::after { background: var(--ad-accent); }
.sw-opt b { display: block; font-size: 13px; color: var(--ad-text); } .sw-opt span.s { font-size: 11.5px; color: var(--ad-text-subtle); line-height: 1.45; }
.sw-docs { display: flex; flex-direction: column; border: 1.5px solid var(--ad-border); border-radius: 10px; overflow: hidden; }
.sw-docs > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--ad-surface); }
.sw-docs > div + div { border-top: 1px solid var(--ad-divider); }
.sw-docs b { font-size: 12.5px; } .sw-docs small { display: block; color: var(--ad-text-subtle); font-size: 11px; margin-top: 1px; }
.sw-pick { border: 1.5px solid var(--ad-border); border-radius: 10px; padding: 12px 14px; background: var(--ad-surface-2); display: flex; flex-direction: column; gap: 12px; }

/* summary */
.sw-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .sw-sum { grid-template-columns: 1fr; } }
.sw-sum > div { border: 1.5px solid var(--ad-border); border-radius: 10px; padding: 12px 14px; background: var(--ad-surface); min-width: 0; }
.sw-sum h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-text-subtle); display: flex; justify-content: space-between; align-items: center; }
.sw-sum h4 button { all: unset; cursor: pointer; color: var(--ad-link, var(--ad-accent-deep)); font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.sw-sum h4 button:focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 2px; border-radius: 3px; }
.sw-sum p { margin: 2px 0; font-size: 13px; font-weight: 600; word-break: break-word; } .sw-sum p small { color: var(--ad-text-subtle); font-weight: 500; font-size: 11.5px; display: block; }
.sw-will { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: w; }
.sw-will li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; counter-increment: w; }
.sw-will li::before { content: counter(w); width: 20px; height: 20px; border-radius: 999px; background: var(--ad-surface-inset); color: var(--ad-text-muted); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* preview */
.sw-pv { background: var(--ad-surface); border: 1.5px solid var(--ad-border); border-radius: 10px; overflow: hidden; }
.sw-pv.stick { position: sticky; top: 64px; }
.sw-pv-h { padding: 11px 14px; border-bottom: 1px solid var(--ad-divider); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.sw-pv-h small { color: var(--ad-text-subtle); font-weight: 600; }
.sw-pv-b { padding: 14px; }
.sw-br { border: 1px solid var(--ad-border-strong); border-radius: 9px; overflow: hidden; background: #fff; color: #1b1f1d; box-shadow: var(--ad-shadow-sm); }
.sw-br-t { display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: #eef1ef; border-bottom: 1px solid #d9dfdb; }
.sw-br-t i { width: 8px; height: 8px; border-radius: 999px; background: #c5ccc8; } .sw-br-t span { margin-left: 6px; flex: 1; background: #fff; border-radius: 5px; padding: 3px 8px; font-size: 10.5px; color: #4e635d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-shopv { font-size: 10px; min-height: 290px; }
.sw-shopv .hd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.sw-shopv .lg { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
.sw-shopv .nv { display: flex; gap: 9px; margin-left: 6px; font-weight: 600; opacity: .9; }
.sw-shopv .bd { padding: 10px; }
.sw-shopv .ln { height: 8px; border-radius: 3px; opacity: .22; background: currentColor; }
.sw-shopv .bt { display: inline-block; padding: 4px 9px; border-radius: 4px; font-weight: 700; }
.sw-pv-note { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

/* status card */
.sw-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .sw-pgrid { grid-template-columns: minmax(0, 1fr); } }
.sw-pg { background: var(--ad-surface); border: 1.5px solid var(--ad-border); border-radius: 10px; overflow: hidden; }
.sw-pg-top { padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 12px; }
.sw-pg-top h2 { margin: 0; font-family: var(--ad-font-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sw-pg-top .m { font-size: 12.5px; color: var(--ad-text-subtle); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sw-meter { height: 6px; border-radius: 999px; background: var(--ad-surface-inset); overflow: hidden; }
.sw-meter i { display: block; height: 100%; width: 100%; background: var(--ad-accent-deep); border-radius: 999px; }
.sw-meter.ok i { background: var(--ad-success); } .sw-meter.bad i { background: var(--ad-danger); }
.sw-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ad-divider); }
.sw-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 15px 22px; }
.sw-steps > li + li { border-top: 1px solid var(--ad-divider); }
@media (max-width: 560px) { .sw-steps > li { padding: 13px 14px; grid-template-columns: 30px minmax(0, 1fr); } .sw-steps > li .tg { grid-column: 2; } .sw-pg-top { padding: 16px 14px; } }
.sw-steps .ic { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ad-surface-inset); color: var(--ad-text-subtle); transition: background-color var(--mo-dur-2) var(--mo-ease), color var(--mo-dur-2) var(--mo-ease); }
.sw-steps .done .ic { background: var(--ad-success-bg); color: var(--ad-success-fg); }
.sw-steps .active .ic { background: var(--ad-accent-bg); color: var(--ad-accent-fg); box-shadow: 0 0 0 2px var(--ad-accent-deep) inset; }
.sw-steps .error .ic { background: var(--ad-danger-bg); color: var(--ad-danger-fg); }
.sw-steps h3 { margin: 0; font-size: 13.5px; font-weight: 700; } .sw-steps p { margin: 3px 0 0; font-size: 12px; color: var(--ad-text-subtle); line-height: 1.5; }
.sw-steps .wait h3 { color: var(--ad-text-muted); }
.sw-steps .why { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--ad-danger-bg); color: var(--ad-danger-fg); font-size: 12px; line-height: 1.5; }
.sw-steps .why b { display: block; margin-bottom: 2px; }
.sw-steps .hint { margin-top: 8px; }
.sw-steps details { margin-top: 6px; font-size: 11.5px; color: var(--ad-text-subtle); }
.sw-steps details summary { cursor: pointer; font-weight: 600; }
.sw-steps details summary:focus-visible { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 2px; border-radius: 3px; }
.sw-pw { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--ad-border-strong); border-radius: 9px; background: var(--ad-surface-2); font: 700 15px var(--ad-font-mono); letter-spacing: .04em; flex-wrap: wrap; word-break: break-all; }

/* state chips of the storefront list */
.sw-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }