/* STIQ24 – editor.css: Live-Editor (einfach: festes Produktfoto | Panel 400px). */
.s24-view-editor .s24-main { background: var(--s24-surface); }

.s24-editor {
	display: grid; grid-template-columns: minmax(0, 1fr) 400px;
	max-width: 1536px; margin: 0 auto; min-height: calc(100vh - var(--s24-header-h));
	border-left: 1px solid var(--s24-border); border-right: 1px solid var(--s24-border);
}

/* Mittelbereich */
.s24-editor__stage { display: flex; flex-direction: column; position: relative; min-width: 0; background: var(--s24-surface-bright); border-right: 1px solid var(--s24-border); }
.s24-stage__top {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
	padding: 12px 24px; background: var(--s24-surface); border-bottom: 1px solid var(--s24-border);
}
.s24-tabs { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 2px; background: var(--s24-surface-low); border: 1px solid var(--s24-border); border-radius: var(--s24-r); }
.s24-tab {
	padding: 8px 16px; border: 0; border-radius: 6px; background: transparent;
	font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--s24-secondary); cursor: pointer;
}
.s24-tab[hidden] { display: none; }
.s24-tab:hover { color: var(--s24-primary); }
.s24-tab[aria-selected="true"] { background: var(--s24-primary); color: #fff; font-weight: 700; box-shadow: var(--s24-shadow-1); }
.s24-stage__product { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--s24-secondary); }
.s24-stage__product select { min-height: 36px; padding: 0 10px; border: 1px solid var(--s24-border); border-radius: var(--s24-r); background: #fff; font-weight: 600; }
.s24-stage__product select[hidden] { display: none; }

.s24-stage__canvas {
	position: relative; flex: 1; min-height: 560px; overflow: hidden; touch-action: none; user-select: none;
	background-color: var(--s24-surface-bright);
}
.s24-stage__canvas.has-photo { background-color: #ece6dc; }
.s24-stage__canvas:focus-visible { outline-offset: -3px; }
.s24-stage__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Ärmelansicht (gezeichnet) */
.s24-svg-garment { stroke: #b9bcc4; stroke-width: 0.2; stroke-linejoin: round; filter: drop-shadow(0 0.4px 0.6px rgba(0, 0, 0, 0.18)); }
.s24-svg-seam { fill: none; stroke: #b4b8c2; stroke-width: 0.18; stroke-dasharray: 0.6 0.5; }
.s24-svg-sleeve-hl { fill: rgba(37, 99, 235, 0.14); stroke: var(--s24-tertiary); stroke-width: 0.25; pointer-events: none; }
.s24-svg-zone-label { font-size: 1.1px; fill: var(--s24-outline); text-transform: uppercase; letter-spacing: 0.05px; font-weight: 700; }
.s24-svg-guide { stroke: #4f8cff; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

/* Hinweisflächen am Produkt */
.s24-slot { cursor: pointer; outline: none; }
.s24-slot__box { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.9); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; transition: fill 0.15s; }
.s24-slot__dot { fill: #fff; opacity: 0.95; }
.s24-slot__plus { stroke: #111; stroke-width: 2; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; }
.s24-slot__label { fill: #fff; font-family: var(--s24-font-body); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; paint-order: stroke; stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.25; }
.s24-slot:hover .s24-slot__box, .s24-slot:focus-visible .s24-slot__box { fill: rgba(255, 255, 255, 0.24); }
.is-light-garment .s24-slot__box { fill: rgba(0, 0, 0, 0.05); stroke: rgba(17, 17, 17, 0.75); }
.is-light-garment .s24-slot:hover .s24-slot__box { fill: rgba(0, 0, 0, 0.12); }
.is-light-garment .s24-slot__dot { fill: #111; }
.is-light-garment .s24-slot__plus { stroke: #fff; }
.is-light-garment .s24-slot__label { fill: #111; stroke: rgba(255, 255, 255, 0.6); }

/* Motive */
.s24-layer { cursor: move; }
.s24-layer.is-hidden { display: none; }
.s24-pad { fill: rgba(255, 255, 255, 0.005); stroke: none; cursor: move; touch-action: none; }
.s24-layer__box { fill: rgba(255, 255, 255, 0.02); stroke: transparent; }
.s24-layer.is-selected .s24-layer__box { stroke: #4f8cff; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.s24-layer text { font-family: var(--s24-font-head); font-weight: 800; }
.s24-handle { fill: #fff; stroke: #4f8cff; stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.s24-dimtag rect { fill: #4f8cff; }
.s24-dimtag text { fill: #fff; font-family: var(--s24-font-body); font-size: 1.3px; font-weight: 700; }

.s24-floating {
	position: static; align-self: center; margin: 12px 16px 14px; /* eigener Platz oberhalb der Produktvorschau, nichts schwebt ueber dem Kleidungsstueck */
	display: flex; align-items: center; gap: 4px; padding: 6px;
	background: var(--s24-surface); border: 1px solid var(--s24-border); border-radius: var(--s24-r-full); box-shadow: var(--s24-shadow-2);
}
.s24-floating button {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: var(--s24-r-full);
	background: transparent; font-size: 12px; font-weight: 600; cursor: pointer;
}
.s24-floating button[hidden] { display: none; }
.s24-floating button:disabled { opacity: 0.35; cursor: default; }
.s24-floating button:hover:not(:disabled) { background: var(--s24-surface-low); }
.s24-floating__sep { width: 1px; height: 16px; background: var(--s24-border); }

.s24-stage__foot { display: flex; justify-content: flex-end; padding: 8px 24px; background: var(--s24-surface); border-top: 1px solid var(--s24-border); font-size: 12px; }
.s24-stage__calib { font-weight: 700; color: #92400e; }

/* Panel rechts */
.s24-editor__panel { display: flex; flex-direction: column; background: var(--s24-surface); min-width: 0; max-height: calc(100vh - var(--s24-header-h)); position: sticky; top: var(--s24-header-h); }
.s24-panel__head { padding: 18px 20px; border-bottom: 1px solid var(--s24-border); background: var(--s24-surface-bright); }
.s24-panel__head h2 { margin: 0; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.s24-count:not(:empty) { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 6px; border-radius: 11px; background: var(--s24-primary); color: #fff; font-size: 12px; line-height: 22px; text-align: center; vertical-align: middle; }
.s24-panel__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.s24-panel__section { min-width: 0; }
.s24-panel__section h3 { font-family: var(--s24-font-body); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; margin-bottom: 10px; }
.s24-panel__foot { padding: 16px 20px 20px; display: grid; gap: 10px; border-top: 1px solid var(--s24-border); background: var(--s24-surface); }
.s24-panel__foot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s24-panel__foot .s24-hint { margin: 0; font-size: 11px; }

/* Hinzufügen */
.s24-add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s24-add__tile {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 14px 10px;
	border: 2px dashed var(--s24-outline-variant, #c4c7c7); border-radius: var(--s24-r-md, 12px); background: var(--s24-surface-bright);
	color: var(--s24-primary); cursor: pointer; text-align: center; font-size: 13px;
}
.s24-add__tile:hover { border-color: var(--s24-primary); background: var(--s24-surface-low); }
.s24-linkbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 0; border: 0; background: transparent; font-size: 12px; font-weight: 700; color: var(--s24-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Motivkarten */
.s24-items { display: grid; gap: 10px; }
.s24-items__empty { margin: 0; font-size: 13px; color: var(--s24-secondary); }
.s24-item { padding: 12px; border: 1px solid var(--s24-border); border-radius: var(--s24-r-md, 12px); background: var(--s24-surface); cursor: pointer; display: grid; gap: 10px; min-width: 0; }
.s24-item.is-selected { border-color: var(--s24-primary); box-shadow: 0 0 0 1px var(--s24-primary); background: var(--s24-surface-bright); }
.s24-item__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s24-item__thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #1c1c1c; color: #fff; overflow: hidden; }
.s24-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.s24-item__name { flex: 1; min-width: 0; display: grid; }
.s24-item__name strong { font-size: 13px; }
.s24-item__name small { font-size: 11px; color: var(--s24-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s24-item__top .s24-iconbtn { flex: none; }
.s24-item__dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: end; }
.s24-dim { display: grid; gap: 3px; font-size: 11px; font-weight: 600; color: var(--s24-secondary); min-width: 0; }
.s24-dim__box { display: flex; align-items: center; gap: 4px; padding: 7px 10px; background: var(--s24-surface); border: 1px solid var(--s24-border); border-radius: 6px; }
.s24-dim__box:focus-within { border-color: var(--s24-primary); }
.s24-dim__box input { width: 100%; min-width: 0; border: 0; background: transparent; font-weight: 700; font-size: 14px; outline: none; }
.s24-dim__box em { font-style: normal; font-size: 11px; }
.s24-lockbtn, .s24-toolbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--s24-border); border-radius: 8px; background: var(--s24-surface); color: var(--s24-secondary); cursor: pointer; padding: 0; }
.s24-lockbtn.is-on { background: var(--s24-primary); border-color: var(--s24-primary); color: #fff; }
.s24-toolbtn:hover, .s24-lockbtn:hover { border-color: var(--s24-primary); color: var(--s24-primary); }
.s24-lockbtn.is-on:hover { color: #fff; }
.s24-item__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s24-item__finish { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border: 1px solid var(--s24-border); border-radius: 8px; background: var(--s24-surface-low); }
.s24-item__finish button { padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; font-size: 11px; font-weight: 700; color: var(--s24-secondary); cursor: pointer; }
.s24-item__finish button.is-active { background: var(--s24-primary); color: #fff; }
.s24-item__warn { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: var(--s24-error); font-size: 12px; font-weight: 600; }

.s24-sizegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; text-align: center; }
.s24-sizegrid label { min-width: 0; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--s24-border); border-radius: 6px; background: var(--s24-surface-bright); font-size: 11px; font-weight: 700; color: var(--s24-secondary); }
.s24-sizegrid input { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; padding: 4px 0; border: 1px solid var(--s24-border); border-radius: 4px; background: #fff; font-weight: 700; }

[data-s24-warnings] { display: grid; gap: 8px; }
[data-s24-warnings]:empty { display: none; }
.s24-warning { padding: 10px 12px; border-radius: var(--s24-r); border: 1px solid var(--s24-border); background: var(--s24-surface-low); font-size: 12px; line-height: 18px; }
.s24-warning--special { background: #fff8e6; border-color: #f3d58a; }

.s24-dialog { max-width: 760px; width: calc(100% - 32px); padding: 24px; border: 1px solid var(--s24-border); border-radius: var(--s24-r-lg); box-shadow: var(--s24-shadow-3); }
.s24-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.s24-3d__stage { width: 100%; height: min(60vh, 520px); margin: 8px 0 16px; background: var(--s24-surface-bright); border: 1px solid var(--s24-border); border-radius: var(--s24-r-md); overflow: hidden; touch-action: none; }
.s24-3d__stage canvas { display: block; width: 100%; height: 100%; }

/* Tablet/Mobil: Panel unter dem Produkt */
@media (max-width: 1000px) {
	.s24-editor { grid-template-columns: minmax(0, 1fr); }
	.s24-editor__panel { position: static; max-height: none; border-top: 1px solid var(--s24-border); }
	.s24-editor__stage { border-right: 0; }
	.s24-stage__canvas { min-height: 440px; }
}
@media (max-width: 600px) {
	.s24-stage__top { padding: 12px; }
	.s24-stage__canvas { min-height: 360px; }
	.s24-floating button span { display: none; }
}

/* Ärmelzone, Tab-Zähler, Maximalgröße */
.s24-svg-sleevezone { fill: rgba(79, 140, 255, 0.08); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.is-light-garment .s24-svg-sleevezone { stroke: rgba(17, 17, 17, 0.5); }
.s24-tab__n { display: inline-block; min-width: 16px; margin-left: 6px; padding: 0 5px; border-radius: 8px; background: #4f8cff; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.s24-item__max { margin: -4px 0 0; font-size: 11px; color: var(--s24-secondary); }

/* ===== UX-Update V3 ===== */
/* Hilfe */
.s24-helpbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--s24-border); background: var(--s24-surface); font-weight: 800; font-size: 16px; cursor: pointer; color: var(--s24-primary); }
.s24-helpbtn:hover, .s24-helpbtn[aria-expanded="true"] { background: var(--s24-primary); color: #fff; border-color: var(--s24-primary); }
.s24-help { position: absolute; left: 16px; top: 76px; z-index: 6; width: min(340px, calc(100% - 32px)); max-height: 70%; overflow: auto; padding: 14px 16px 16px; background: var(--s24-surface); border: 1px solid var(--s24-border); border-radius: var(--s24-r-md); box-shadow: var(--s24-shadow-3); }
.s24-help[hidden] { display: none; }
.s24-help__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.s24-help h3 { margin: 0 0 6px; font-size: 15px; }
.s24-help p { margin: 0 0 10px; font-size: 13px; line-height: 19px; }
.s24-help__actions, .s24-help__nav { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.s24-help__nav span { font-size: 12px; color: var(--s24-secondary); }
.s24-help__tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.s24-help__tabs button { flex: 1; padding: 7px; border: 1px solid var(--s24-border); border-radius: 8px; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.s24-help__tabs button[aria-selected="true"] { background: var(--s24-primary); color: #fff; border-color: var(--s24-primary); }
.s24-help__videos { display: grid; gap: 12px; }
.s24-help__video { margin: 0; position: relative; }
.s24-help__video video, .s24-help__ph { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #1c1c1c; display: grid; place-items: center; color: #aaa; font-size: 13px; }
.s24-help__video figcaption { margin-top: 4px; font-size: 12px; font-weight: 600; }
.s24-help__fs { position: absolute; right: 6px; top: 6px; padding: 3px 8px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; cursor: pointer; }
.s24-helped { outline: 3px solid #4f8cff !important; outline-offset: 3px; border-radius: 8px; animation: s24-pulse 1.4s ease-in-out infinite; }
@keyframes s24-pulse { 50% { outline-color: rgba(79, 140, 255, 0.35); } }

/* Raster, Lineale, Referenzpunkt */
.s24-grid__line { stroke: rgba(79, 140, 255, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s24-grid__line.is-major { stroke: rgba(79, 140, 255, 0.6); }
.s24-grid__center { stroke: #4f8cff; stroke-width: 1.4; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.s24-grid__ref { fill: #4f8cff; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.s24-grid__ref-x { stroke: #4f8cff; stroke-width: 1.5; vector-effect: non-scaling-stroke; fill: none; }
.s24-grid__ref-label { fill: #1d4ed8; font-weight: 800; font-family: var(--s24-font-body); paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 0.35; }
.s24-ruler__bg { fill: rgba(255, 255, 255, 0.92); }
.s24-ruler__tick { stroke: #374151; stroke-width: 1; vector-effect: non-scaling-stroke; }
.s24-ruler__txt { fill: #374151; font-family: var(--s24-font-body); font-weight: 700; }
.s24-layer.is-selected .s24-layer__box { stroke: #4f8cff; }

/* Motivkarten: Name, Aufwand, Auswahl */
.s24-item.is-selected:not(.is-primary) { border-color: #4f8cff; box-shadow: 0 0 0 1px #4f8cff; }
.s24-item__title { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 800; color: inherit; cursor: text; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s24-item__pen { opacity: 0.45; display: inline-flex; }
.s24-item__title:hover .s24-item__pen { opacity: 1; }
.s24-item__rename { width: 100%; min-width: 0; padding: 4px 8px; border: 1px solid var(--s24-primary); border-radius: 6px; font-size: 14px; font-weight: 800; box-sizing: border-box; }
.s24-item__effort { margin: 0; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--s24-surface-low); }
.s24-item__effort[hidden], .s24-item__warn[hidden], .s24-item__finish[hidden] { display: none; }
.s24-effort--simple { background: #ecfdf5 !important; color: #065f46; }
.s24-effort--standard { background: #eff6ff !important; color: #1e40af; }
.s24-effort--complex { background: #fff7ed !important; color: #9a3412; }
.s24-effort--special { background: #fef2f2 !important; color: #991b1b; }
.s24-item__finish { margin-left: auto; padding: 5px 10px; border: 1px solid var(--s24-border); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--s24-secondary); }

/* Position & Maße, Ausrichten */
.s24-pos { border: 1px solid var(--s24-border); border-radius: var(--s24-r-md, 12px); background: var(--s24-surface); }
.s24-pos > summary { padding: 12px 14px; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.s24-pos > summary::after { content: "+"; font-weight: 700; }
.s24-pos[open] > summary::after { content: "\2212"; }
.s24-pos__inner { padding: 0 14px 14px; display: grid; gap: 10px; }
.s24-pos__inner .s24-hint { margin: 0; font-size: 12px; }
.s24-pos__inner [hidden] { display: none; }
.s24-pos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s24-pos__row, .s24-align__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.s24-chip { padding: 8px 12px; border: 1px solid var(--s24-border); border-radius: 999px; background: var(--s24-surface); font-size: 12px; font-weight: 700; cursor: pointer; color: inherit; }
.s24-chip:hover:not(:disabled) { border-color: var(--s24-primary); }
.s24-chip.is-on { background: var(--s24-primary); color: #fff; border-color: var(--s24-primary); }
.s24-chip:disabled, .s24-toolbtn:disabled { opacity: 0.4; cursor: default; }
.s24-check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.s24-align { padding: 14px; border: 1px solid var(--s24-border); border-radius: var(--s24-r-md, 12px); background: var(--s24-surface); display: grid; gap: 10px; }
.s24-align[hidden] { display: none; }
.s24-align h3 { margin: 0; font-size: 13px; }
.s24-align .s24-hint { margin: 0; font-size: 12px; }
.s24-align__ref { display: grid; gap: 3px; font-size: 11px; font-weight: 600; color: var(--s24-secondary); }
.s24-align__ref select { min-height: 34px; padding: 0 8px; border: 1px solid var(--s24-border); border-radius: 6px; background: #fff; }
.s24-align__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.s24-align__grid .s24-toolbtn { width: 100%; }
.s24-align__gap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }

/* Preisfeld */
.s24-pricebox { padding: 12px 14px; border: 1px solid var(--s24-border); border-radius: var(--s24-r-md, 12px); background: var(--s24-surface-bright); display: grid; gap: 8px; }
.s24-pricebox__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.s24-pricebox__head strong { font-family: var(--s24-font-head); font-size: 22px; letter-spacing: -0.01em; }
.s24-pricebox__details summary { font-size: 12px; font-weight: 700; cursor: pointer; color: var(--s24-secondary); }
.s24-pricebox__details ul { list-style: none; margin: 8px 0 8px; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.s24-pricebox__details li { display: flex; justify-content: space-between; gap: 8px; }
.s24-pricebox__note { margin: 0; font-size: 11px; line-height: 16px; color: var(--s24-secondary); }
.s24-effort { margin: 0; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.s24-price__hint { margin: 4px 0 0; font-size: 11px; color: var(--s24-secondary); }



/* V4: acht Ziehpunkte, großzügige Trefferflächen für Touch */
.s24-handle { pointer-events: none; }
.s24-handle-hit { fill: transparent; stroke: none; cursor: inherit; touch-action: none; pointer-events: all; }
.s24-hdl--n, .s24-hdl--s, .s24-hdl--n .s24-handle-hit, .s24-hdl--s .s24-handle-hit { cursor: ns-resize; }
.s24-hdl--e, .s24-hdl--w, .s24-hdl--e .s24-handle-hit, .s24-hdl--w .s24-handle-hit { cursor: ew-resize; }
.s24-hdl--nw, .s24-hdl--se, .s24-hdl--nw .s24-handle-hit, .s24-hdl--se .s24-handle-hit { cursor: nwse-resize; }
.s24-hdl--ne, .s24-hdl--sw, .s24-hdl--ne .s24-handle-hit, .s24-hdl--sw .s24-handle-hit { cursor: nesw-resize; }
.s24-handle--side { cursor: inherit; }

/* ===== V4: zwei Schritte, Werkzeugleiste, Bestellbereich, Datenverlust-Schutz ===== */
.s24-editor-wrap { max-width: 100%; overflow-x: clip; }
.s24-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.s24-dirty { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: 11px; font-weight: 800; white-space: nowrap; }
.s24-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ea580c; }
.s24-dirty[hidden] { display: none; }
.s24-btn.is-dirty { border-color: #ea580c; box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.18); }

/* Werkzeugleiste: Raster | Hilfslinien | 3D mit deutlichem aktivem Zustand */
.s24-floating .s24-toggle { border: 1px solid transparent; }
.s24-floating .s24-toggle.is-on { background: var(--s24-primary); color: #fff; border-color: var(--s24-primary); }
.s24-floating .s24-toggle.is-on:hover { background: var(--s24-primary); }
@media (max-width: 600px) {
	.s24-floating { position: static; transform: none; margin: 10px auto 6px; width: max-content; max-width: calc(100% - 16px); }
	.s24-floating button { padding: 8px 10px; }
}

/* Wiederherstellung */
.s24-restore { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 24px; background: #eff6ff; border-bottom: 1px solid #bfdbfe; font-size: 13px; font-weight: 600; }
.s24-restore[hidden] { display: none; }
.s24-restore small { font-weight: 400; color: var(--s24-secondary); }
.s24-restore__actions { display: inline-flex; gap: 8px; }

/* Position & Maße in der Karte */
.s24-item__pos { border-top: 1px solid var(--s24-border); padding-top: 8px; }
.s24-item__pos > summary { font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 4px 0; }
.s24-item__pos > summary::after { content: "+"; font-weight: 700; }
.s24-item__pos[open] > summary::after { content: "\2212"; }
.s24-item__posbody { display: grid; gap: 10px; padding-top: 8px; }
.s24-item__posbody .s24-hint { margin: 0; font-size: 11px; }
.s24-item__effort { background: transparent; padding: 0; font-weight: 600; color: var(--s24-secondary); }
.s24-item__warn { background: #fffbeb; color: #92400e; }

/* Leave-Dialog */
.s24-dialog--leave { max-width: 460px; }
.s24-dialog--leave h2 { font-size: 18px; margin: 0 0 8px; }
.s24-leave__actions { display: grid; gap: 8px; margin-top: 12px; }

/* Bestellbereich unter dem Editor (Schritt 2) */
.s24-order { background: var(--s24-surface-bright); border-top: 1px solid var(--s24-border); padding: 48px 24px 72px; scroll-margin-top: var(--s24-header-h); }
.s24-order__inner { max-width: 1280px; margin: 0 auto; }
.s24-order__head { margin-bottom: 24px; }
.s24-order__head h2 { margin: 4px 0 6px; font-size: clamp(24px, 3vw, 32px); }
.s24-order__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.s24-order__main, .s24-order__side { display: grid; gap: 16px; min-width: 0; }
.s24-ocard { padding: 20px; background: var(--s24-surface); border: 1px solid var(--s24-border); border-radius: var(--s24-r-md, 12px); min-width: 0; }
.s24-ocard h3 { margin: 0 0 12px; font-size: 16px; }
.s24-ocard .s24-hint { margin: 10px 0 0; }
.s24-colorrow { display: flex; flex-wrap: wrap; gap: 12px; }
.s24-colorsw { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px; min-width: 72px; border: 2px solid var(--s24-border); border-radius: 12px; background: var(--s24-surface); cursor: pointer; font-size: 12px; font-weight: 700; }
.s24-colorsw__dot { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); }
.s24-colorsw.is-active { border-color: var(--s24-primary); box-shadow: 0 0 0 2px var(--s24-primary) inset; }
.s24-colorsw:disabled { opacity: 0.45; cursor: not-allowed; position: relative; }
.s24-colorsw:disabled .s24-colorsw__dot::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, transparent 46%, #6b7280 47%, #6b7280 53%, transparent 54%); }
.s24-sizegrid--order { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; text-align: center; }
.s24-sizegrid--order label { display: grid; gap: 6px; padding: 12px 8px; border: 1px solid var(--s24-border); border-radius: 10px; background: var(--s24-surface-bright); font-size: 13px; font-weight: 800; color: var(--s24-secondary); }
.s24-sizegrid--order input { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; padding: 10px 0; border: 1px solid var(--s24-border); border-radius: 8px; background: #fff; font-weight: 800; font-size: 16px; }
.s24-sizegrid--order small { font-weight: 600; font-size: 11px; }
.s24-order__total { margin: 14px 0 0; font-size: 15px; }
.s24-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.s24-check input { margin-top: 3px; width: 18px; height: 18px; }

.s24-oprice__main { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.s24-oprice__main span { font-size: 14px; }
.s24-oprice__main strong { font-family: var(--s24-font-head); font-size: 28px; letter-spacing: -0.01em; }
.s24-oprice__note { margin: 6px 0 12px; font-size: 12px; line-height: 18px; color: var(--s24-secondary); }
.s24-oprice__review { color: var(--s24-secondary); font-weight: 700; }
.s24-oprice__lines { list-style: none; margin: 0 0 8px; padding: 10px 0 0; border-top: 1px solid var(--s24-border); display: grid; gap: 6px; font-size: 13px; }
.s24-oprice__lines li { display: flex; justify-content: space-between; gap: 12px; }
.s24-oprice__lines li strong { text-align: right; font-weight: 700; }
.s24-oprice__lines li.is-once span { color: var(--s24-secondary); }
.s24-oprice__sum li.is-total { padding-top: 8px; border-top: 1px solid var(--s24-border); font-size: 15px; }
.s24-oprice h4 { margin: 10px 0 4px; font-size: 12px; letter-spacing: 0.02em; }
.s24-sz-tiers { width: 100%; border-collapse: collapse; font-size: 13px; }
.s24-sz-tiers td { padding: 6px 0; border-bottom: 1px solid var(--s24-border); }
.s24-sz-tiers td:last-child { text-align: right; font-weight: 700; }
.s24-analysis { margin-top: 10px; border-top: 1px solid var(--s24-border); padding-top: 8px; }
.s24-analysis > summary { font-size: 12px; font-weight: 800; cursor: pointer; color: var(--s24-secondary); }
.s24-analysis__body { margin-top: 8px; display: grid; gap: 6px; font-size: 12px; line-height: 18px; }
.s24-analysis__body p { margin: 0; }
.s24-analysis__list { margin: 0; padding-left: 18px; }
.s24-pricebox__note { margin: 10px 0 0; font-size: 11px; line-height: 16px; color: var(--s24-secondary); }

.s24-checklist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.s24-check__item { display: flex; gap: 10px; align-items: flex-start; }
.s24-check__mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--s24-surface-low); color: var(--s24-secondary); }
.s24-check__item.is-ok .s24-check__mark { background: #d1fae5; color: #065f46; }
.s24-check__item.is-todo .s24-check__mark { background: #fee2e2; color: #991b1b; }
.s24-check__item a { text-decoration: underline; font-weight: 700; }

@media (max-width: 1000px) {
	.s24-order { padding: 32px 16px 56px; }
	.s24-order__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.s24-restore { padding: 10px 12px; }
	.s24-ocard { padding: 16px; }
}

/* V10: Saum- & Ärmellabels (feste Position, feste Größe) */
.s24-labels { display: grid; gap: 10px; }
.s24-labels__lead { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.s24-labels__positions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s24-poschip { min-height: 44px; border: 1px solid var(--s24-line, #d9d9d9); border-radius: 10px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.s24-poschip:hover:not(:disabled) { border-color: #111; }
.s24-poschip:disabled { opacity: .45; cursor: not-allowed; }
.s24-lcard { border: 1px solid var(--s24-line, #e3e3e3); border-radius: 12px; padding: 12px; background: #fff; display: grid; gap: 6px; }
.s24-lcard__top { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
.s24-lcard__thumb { width: 56px; height: 46px; border-radius: 8px; background: #0b0b0b; color: #8a8a8a; display: grid; place-items: center; font-size: 11px; overflow: hidden; }
.s24-lcard__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.s24-lcard__title { display: grid; line-height: 1.25; }
.s24-lcard__title span { font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s24-lcard__size { margin: 4px 0 0; font-weight: 700; }
.s24-lcard__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.s24-lcard__pos { min-height: 40px; border: 1px solid var(--s24-line, #d9d9d9); border-radius: 8px; padding: 0 8px; font: inherit; }
.s24-add__tile.is-unavailable { opacity: .55; }
/* Label auf dem Produkt */
.s24-label__face { fill: #0d0d0d; stroke: rgba(255, 255, 255, .12); stroke-width: .06; }
.s24-label__fold { fill: #050505; opacity: .8; }
.s24-label__shadow { fill: rgba(0, 0, 0, .35); }
.s24-label__seam { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: .07; stroke-dasharray: .28 .2; }
.s24-label__ph { fill: #777; font-family: var(--s24-font-body, sans-serif); }
/* Fehlermeldungen mit Motivnamen (Prüfliste) */
.s24-check__item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; }
.s24-check__fix { align-self: center; white-space: nowrap; }
.s24-check__text { min-width: 0; }
.is-flash { animation: s24flash 2.4s ease-out 1; }
@keyframes s24flash { 0%, 55% { box-shadow: 0 0 0 3px #4f8cff; background: rgba(79, 140, 255, .12); } 100% { box-shadow: 0 0 0 0 transparent; background: transparent; } }
@media (max-width: 600px) { .s24-check__item { grid-template-columns: auto 1fr; } .s24-check__fix { grid-column: 2; justify-self: start; } }
/* V10: Gast oder Konto */
.s24-who { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--s24-line, #e3e3e3); }
.s24-who__lead { margin: 0; }
.s24-who__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s24-who__choices .s24-btn { justify-content: center; text-align: center; min-height: 48px; }
.s24-who__choices .s24-btn.is-on { background: #111; color: #fff; border-color: #111; }
.s24-guestform { display: grid; gap: 10px; }
.s24-guestform .s24-field { display: grid; gap: 4px; font-size: 14px; }
.s24-guestform input[type=text], .s24-guestform input[type=email], .s24-guestform input[type=tel], .s24-guestform textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--s24-line, #d0d0d0); border-radius: 8px; font: inherit; box-sizing: border-box; }
.s24-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 480px) { .s24-who__choices { grid-template-columns: 1fr; } }
/* V10: Motivquelle und Bibliothek */
.s24-source__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.s24-source__opt { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 18px 12px; min-height: 120px; border: 1px solid var(--s24-line, #d9d9d9); border-radius: 14px; background: #fff; font: inherit; cursor: pointer; }
.s24-source__opt:hover { border-color: #111; }
.s24-source__opt small { color: #666; }
.s24-lib { width: min(760px, 94vw); }
.s24-lib__head { display: flex; justify-content: space-between; align-items: center; }
.s24-lib__tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.s24-lib__tools input, .s24-lib__tools select { min-height: 44px; padding: 6px 10px; border: 1px solid var(--s24-line, #d0d0d0); border-radius: 8px; font: inherit; }
.s24-lib__tools input { flex: 1 1 200px; }
.s24-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 55vh; overflow: auto; }
.s24-lib__item { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--s24-line, #e3e3e3); border-radius: 12px; align-content: start; }
.s24-lib__item small { color: #666; }
.s24-lib__thumb { aspect-ratio: 1; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.s24-lib__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 520px) { .s24-source__choices { grid-template-columns: 1fr; } }
/* V11: Zoom, Ausschnitt, Labelpunkte */
.s24-stage__canvas svg { touch-action: none; }
.s24-stage__canvas.is-hand, .s24-stage__canvas.is-space { cursor: grab; }
.s24-stage__canvas.is-panning { cursor: grabbing; }
.s24-labelpt { cursor: pointer; }
.s24-labelpt__dot { fill: rgba(17, 17, 17, .78); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.s24-labelpt:hover .s24-labelpt__dot, .s24-labelpt:focus .s24-labelpt__dot { fill: #4f8cff; }
.s24-labelpt__plus { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.s24-label { cursor: pointer; }
.s24-zoombar { display: inline-flex; align-items: center; gap: 4px; }
.s24-zoombar button { min-width: 36px; min-height: 36px; }
.s24-zoombar__pct { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.s24-floating { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 16px); row-gap: 4px; }
.s24-zoombar button, .s24-zoombar span { white-space: nowrap; }
.s24-zoombar__pct { min-width: 58px; }
@media (max-width: 720px) { .s24-zoombar [data-s24-zoom="hand"] span, .s24-zoombar [data-s24-zoom="loupe"] span { font-size: 12px; } }
/* V11: Texteditor (innerhalb der Motivkarte) */
.s24-text { display: grid; gap: 8px; margin: 8px 0; padding: 10px; border: 1px solid var(--s24-line, #e3e3e3); border-radius: 12px; background: #fafafa; }
.s24-text__field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.s24-text__input { width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--s24-line, #d0d0d0); border-radius: 8px; font: inherit; font-weight: 400; resize: vertical; box-sizing: border-box; }
.s24-text__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s24-text__font { flex: 1 1 150px; min-height: 40px; padding: 0 8px; border: 1px solid var(--s24-line, #d0d0d0); border-radius: 8px; font: inherit; }
.s24-text__bold, .s24-text__align { min-width: 40px; min-height: 40px; border: 1px solid var(--s24-line, #d0d0d0); border-radius: 8px; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.s24-text__bold.is-on, .s24-text__align.is-on { background: #111; color: #fff; border-color: #111; }
.s24-text__bold:disabled { opacity: .4; cursor: not-allowed; }
.s24-text__lead { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.s24-text__palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; }
.s24-text__swatch { width: 100%; aspect-ratio: 1; min-height: 32px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #bbb; cursor: pointer; }
.s24-text__swatch:hover, .s24-text__swatch:focus-visible { box-shadow: 0 0 0 2px #4f8cff; }
.s24-text__preview { padding: 8px 10px; border-radius: 8px; background: #6b7280; min-height: 40px; font-size: 22px; line-height: 1.2; word-break: break-word; white-space: pre-wrap; }
/* hidden-Attribut hat im Editor immer Vorrang (sonst ueberschreibt display:grid das Ausblenden, z. B. Textfeld bei Bildmotiven) */
.s24-editor-wrap [hidden], .s24-text[hidden], .s24-labels__choose[hidden], .s24-who[hidden], .s24-guestform[hidden] { display: none !important; }
/* V12: realistisches Label, Detailvorschau */
.s24-lcard__detail { width: 100%; max-height: 220px; border-radius: 10px; background: #e9e5dc; display: block; }
/* V12: Werkzeugleiste mit eigenem Platz, Zoom im rechten Panel */
.s24-stage__canvas.has-photo { margin-top: 0; }
.s24-floating.s24-toolbar { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); box-shadow: var(--s24-shadow-1); }
.s24-viewctl { padding: 10px 12px; border: 1px solid var(--s24-border); border-radius: 12px; background: #fafafa; display: grid; gap: 4px; }
.s24-viewctl__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s24-viewctl__label { font-weight: 700; margin-right: auto; }
.s24-viewctl__btn, .s24-viewctl__pct { min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--s24-border, #d0d0d0); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.s24-viewctl__pct { min-width: 64px; font-variant-numeric: tabular-nums; }
.s24-viewctl__btn.is-on { background: #111; color: #fff; border-color: #111; }
.s24-viewctl__pct:disabled { opacity: .5; cursor: default; }
@media (max-width: 720px) { .s24-floating.s24-toolbar { margin: 8px auto 10px; } .s24-floating.s24-toolbar button { padding: 8px 10px; } }

/* V13: fehlende Bilddatei sichtbar kennzeichnen (kein unsichtbarer/schwarzer Balken) */
.s24-layer__missing { fill: rgba(220, 38, 38, 0.12); stroke: #dc2626; stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.s24-layer__missing-txt { fill: #fecaca; font-family: var(--s24-font-body, sans-serif); font-weight: 700; }
/* Patch-Editor: kleine Ziehpunkte und dezente Maße (nur Patch; der Textil-Editor behält seine Größen) */
.s24-handle--patch { stroke-width: 1.6; }
.s24-dimtag--patch text { fill: #1c1c1c; stroke: #fff; paint-order: stroke; stroke-linejoin: round; font-weight: 600; pointer-events: none; }
.s24-dimtag--shape text { fill: #444; font-weight: 500; }
.s24-patchinfo { margin: 8px 0 0; }
.s24-patchinfo strong { color: var(--s24-primary); }
/* Produktauflösung: solange der Editor sein Produkt nicht kennt, nur neutraler Ladezustand bzw. Produktwahl (kein Shirt-Zwischenbild) */
.s24-editor-wrap { position: relative; }
.s24-resolve { display: none; }
.s24-editor-wrap.is-resolving > *:not(.s24-resolve) { visibility: hidden; }
.s24-editor-wrap.is-resolving > .s24-resolve { display: grid; position: absolute; inset: 0; z-index: 5; place-items: start center; padding: 72px 16px; background: var(--s24-bg, #fff); }
.s24-resolve__loading { color: var(--s24-on-variant, #555); }
.s24-resolve__choose { max-width: 520px; text-align: center; }
.s24-resolve__choose h2 { margin: 0 0 8px; }
.s24-resolve__msg { color: var(--s24-on-variant, #555); min-height: 1em; }
.s24-resolve__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }