/* Ausgelagert aus src/pages/custom-wear.html (bisheriger großer <style>-Block, Konfigurator „Custom Wear“).
   Eingebunden mit ?v=AUTO; scripts/prepare-site.mjs ersetzt AUTO beim Bauen durch die ersten 8 Zeichen
   des SHA-256 dieser Datei – bei Änderungen muss nichts von Hand angepasst werden. */
    .gb-back{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:rgba(243,246,251,.82);margin:0 0 14px;}.gb-back:hover{color:#d3b07a;}.gb-back[hidden]{display:none;}
    /* ══════════ STREETWEAR KONFIGURATOR ══════════ */

    /* ── Startbereich volle Breite: mobil Video, Desktop Standbild ── */
    .sw-videoband {
      position: relative;
      width: 100%;
      height: clamp(240px, 52vw, 620px);
      overflow: hidden;
      background: #0a0e17;
    }
    .sw-videoband video,
    .sw-videoband img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 42%;
      display: block;
    }
    .sw-videoband img { display: none; }   /* mobil: Video sichtbar */

    /* ab Tablet/Desktop: flaches Band mit Standbild statt Video.
       Höhe gedeckelt, damit das Band wenig Seite einnimmt; der Ausschnitt
       bei 18% hält Wandschriftzug und Kleiderstange komplett im Bild.     */
    @media (min-width: 900px) {
      .sw-videoband { height: clamp(260px, 30vw, 500px); }
      .sw-videoband video { display: none; }
      .sw-videoband img { display: block; object-position: center 18%; }
    }
    /* dezente Abdunklung + weicher Übergang in die Seite */
    .sw-videoband::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg,
        rgba(8,11,18,.26) 0%,
        rgba(8,11,18,.04) 30%,
        rgba(8,11,18,.42) 84%,
        rgba(8,11,18,.94) 100%);
    }
    @media (prefers-reduced-motion: reduce) {
      .sw-videoband video { display: none; }
      .sw-videoband img { display: block; }
    }

    .sw-hero { padding: 30px 0 18px; }
    .sw-hero .eyebrow { margin-bottom: 14px; }
    .sw-hero h1 {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic; font-weight: 400;
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      line-height: 1.05; margin: 0 0 12px; letter-spacing: -.01em;
    }
    .sw-hero p { color: rgba(243,246,251,.84); line-height: 1.75; max-width: 62ch; margin: 0; }

    .sw-layout { display: grid; grid-template-columns: 1fr 440px; gap: 26px; align-items: start; }

    .sw-panel, .sw-card {
      background: rgba(10,14,23,.78);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 28px;
      box-shadow: 0 18px 48px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
      padding: 28px;
    }
    .sw-card + .sw-card { margin-top: 16px; }
    /* Konfigurator links oben, Zusammenfassung fest darunter, Vorschau
       rechts über beide Zeilen – sie bleibt beim Scrollen stehen und hat
       keinen eigenen Scrollbereich mehr.                               */
    .sw-panel   { grid-column: 1; grid-row: 1; }
    .sw-summary { grid-column: 1; grid-row: 2; margin-top: 16px; }
    .sw-sticky  { grid-column: 2; grid-row: 1 / span 2;
                  position: sticky; top: 135px; align-self: start; }
    /* Die stehende Vorschau muss samt Reglern (und Textfeld, wenn es
       aufgeht) ganz in den Bildschirm passen – sonst wird sie unten
       abgeschnitten. Das Vorschaubild wird dafür bei niedrigen
       Bildschirmen etwas kleiner, bleibt aber quadratisch. */
    @media (min-width: 1081px) {
      .sw-sticky .sw-stage { width: min(100%, max(240px, calc(100vh - 592px))); margin-inline: auto; }
      .sw-sticky:has(#swCtlText:not([hidden])) .sw-stage { width: min(100%, max(220px, calc(100vh - 672px))); }
      /* Kein eigener Scrollbereich mehr: Ein ein-/ausblendender Balken hat die Breite verändert
         und die Vorschau flackern lassen. Ist die Karte höher als das Fenster, setzt
         custom-wear.js „top“ so, dass sie bis zu ihrer Unterkante mitscrollt. */
    }

    @media (max-width: 1080px) {
      /* Einspaltig in Quelltext-Reihenfolge: Konfigurator, Vorschau,
         Zusammenfassung. */
      .sw-layout { display: block; }
      .sw-panel, .sw-summary, .sw-sticky { grid-column: auto; grid-row: auto; }
      .sw-sticky { position: static; margin-top: 16px; }
      .sw-summary { margin-top: 16px; }
    }

    .sw-sec { margin-bottom: 26px; }
    .sw-sec:last-child { margin-bottom: 0; }
    .sw-sec > h3 {
      font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
      color: rgba(192,138,87,.85); margin: 0 0 4px; font-weight: 800;
      display: flex; align-items: baseline; gap: 8px;
    }
    .sw-sec > h3 .hint { font-size: .68rem; letter-spacing: .04em; text-transform: none; color: rgba(243,246,251,.73); font-weight: 600; }
    .sw-sec > .sub { font-size: .8rem; color: rgba(243,246,251,.75); margin: 0 0 12px; line-height: 1.5; }

    /* ── Produktkarten ── */
    /* Sechs Textilien: zwei Reihen zu drei, statt fünf plus eine einzelne Kachel */
    .sw-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .sw-prod {
      position: relative; cursor: pointer; border-radius: 18px; overflow: hidden;
      border: 1.5px solid rgba(255,255,255,.14);
      /* Heller als der Seitenhintergrund, damit die dunklen Teile davor
         nicht absaufen. Der aktive Kasten liegt bewusst darüber.        */
      background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.09));
      transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
      display: flex; flex-direction: column;
    }
    .sw-prod input { position: absolute; opacity: 0; pointer-events: none; }
    .sw-prod:hover { border-color: rgba(192,138,87,.42); transform: translateY(-2px); }
    .sw-prod.is-active {
      border-color: rgba(192,138,87,.75);
      background: linear-gradient(180deg, rgba(192,138,87,.26), rgba(192,138,87,.10));
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }
    .sw-prod-thumb { aspect-ratio: 1/1; display: grid; place-items: center; padding: 10px 8px 2px; }
    .sw-prod-thumb img,
    /* Weicherer Schatten als vorher: auf dem helleren Kasten wurde aus dem
       alten harten Schatten ein sichtbarer dunkler Hof um das Teil. */
    .sw-prod-thumb canvas { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.30)); }
    .sw-prod-copy { padding: 6px 10px 11px; text-align: center; }
    .sw-prod-copy strong { display: block; font-size: .82rem; font-weight: 800; color: #f3f6fb; }
    .sw-prod-copy small { display: block; font-size: .74rem; color: rgba(243,246,251,.77); margin-top: 1px; }
    .sw-prod.is-active .sw-prod-copy small { color: #d3b07a; }

    /* ── Farb-Swatches ── */
    .sw-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 10px; }
    .sw-color {
      position: relative; aspect-ratio: 1/1; border-radius: 50%; cursor: pointer;
      border: 2.5px solid rgba(255,255,255,.14); transition: all .16s;
      box-shadow: inset 0 -4px 8px rgba(0,0,0,.28);
    }
    .sw-color:hover { border-color: rgba(211,176,122,.6); transform: scale(1.08); }
    .sw-color.is-active {
      border-color: #d3b07a; box-shadow: 0 0 0 2px rgba(192,138,87,.4), inset 0 -4px 8px rgba(0,0,0,.28);
      transform: scale(1.08);
    }
    .sw-color.is-photo::after {
      content: ''; position: absolute; right: -1px; top: -1px;
      width: 8px; height: 8px; border-radius: 50%;
      background: #d3b07a; border: 2px solid #10141d;
    }
    .sw-color-note { font-size: .74rem; color: rgba(243,246,251,.73); line-height: 1.55; margin: 12px 0 0; }

    /* ── Option-Buttons ── */
    .sw-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
    .sw-opts.is-tight { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .sw-opt {
      padding: 10px 10px; border-radius: 13px;
      border: 1.5px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03);
      color: rgba(243,246,251,.75);
      font: 800 .82rem/1.25 'Manrope', sans-serif;
      cursor: pointer; transition: all .2s; text-align: center;
    }
    .sw-opt:hover { border-color: rgba(192,138,87,.42); background: rgba(192,138,87,.07); }
    .sw-opt.is-active { border-color: rgba(192,138,87,.75); background: rgba(192,138,87,.16); color: #d3b07a; }
    .sw-opt .p { display: block; font-size: .7rem; font-weight: 600; opacity: .84; margin-top: 3px; }
    .sw-opt.is-active .p { opacity: .95; }
    .sw-opt[disabled] { opacity: .3; cursor: not-allowed; }

    /* ── Info-Punkt an den Druckverfahren ── */
    .sw-opt { position: relative; }
    .sw-i {
      position: absolute; top: 4px; right: 4px;
      width: 24px; height: 24px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font: 800 .72rem/1 'Manrope', sans-serif; font-style: normal;
      color: rgba(211,176,122,.72);
      border: 1px solid rgba(211,176,122,.38);
      background: rgba(211,176,122,.08);
      cursor: help; transition: color .18s, border-color .18s, background .18s;
      -webkit-user-select: none; user-select: none;
    }
    /* unsichtbare, größere Tippfläche für Mobil */
    .sw-i::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
    .sw-i:hover, .sw-i:focus-visible, .sw-i.is-open {
      color: #f0d9b0; border-color: rgba(211,176,122,.9);
      background: rgba(211,176,122,.22); outline: none;
    }
    .sw-finish-opt { position: relative; }
    .sw-finish-opt .sw-opt { width: 100%; height: 100%; padding-right: 32px; }
    .sw-finish-opt .sw-opt.is-active + .sw-i { color: #e6c691; border-color: rgba(211,176,122,.6); }
    .sw-tip {
      position: fixed; z-index: 7000; max-width: 262px;
      padding: 11px 14px; border-radius: 13px;
      background: rgba(12,16,23,.97);
      border: 1px solid rgba(211,176,122,.42);
      box-shadow: 0 14px 34px rgba(0,0,0,.55);
      color: rgba(243,246,251,.88);
      font: 600 .78rem/1.5 'Manrope', sans-serif; text-align: left;
      opacity: 0; transform: translateY(4px); pointer-events: none;
      transition: opacity .16s ease, transform .16s ease;
    }
    .sw-tip.is-open { opacity: 1; transform: translateY(0); }
    .sw-tip b { display: block; color: #d3b07a; font-weight: 800; margin-bottom: 3px; letter-spacing: .03em; }

    /* ── Druckgröße als Statusanzeige (automatisch) ──
       Die Gruppe sah bisher exakt aus wie die anklickbaren darüber und
       darunter, reagierte aber absichtlich nicht auf Klicks — das wirkte
       wie ein Defekt. Jetzt flach und gestrichelt statt als Knopf, damit
       sofort erkennbar ist: hier wird angezeigt, nicht ausgewählt.     */
    .sw-opts.is-auto .sw-opt {
      cursor: default; background: transparent;
      border-style: dashed; border-color: rgba(255,255,255,.08);
      color: rgba(243,246,251,.38);
    }
    .sw-opts.is-auto .sw-opt:hover { border-color: rgba(255,255,255,.08); background: transparent; }
    .sw-opts.is-auto .sw-opt.is-active,
    .sw-opts.is-auto .sw-opt.is-active:hover {
      border-style: solid; border-color: rgba(192,138,87,.55);
      background: rgba(192,138,87,.12); color: #d3b07a;
    }
.sw-masse { margin-top: 12px; font-size: .82rem; color: rgba(243,246,251,.78); }
    .sw-masse summary { cursor: pointer; color: #d3b07a; font-weight: 700; }
    .sw-masse table { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
    .sw-masse th, .sw-masse td { padding: 6px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
    .sw-masse th:first-child, .sw-masse td:first-child { text-align: left; color: rgba(243,246,251,.84); font-weight: 600; }
    .sw-masse td.aktiv, .sw-masse th.aktiv { color: #d3b07a; font-weight: 800; }
    .sw-masse p { margin: 8px 0 0; font-size: .74rem; color: rgba(243,246,251,.8); line-height: 1.5; }
    .sw-note { font-size: .74rem; color: rgba(243,246,251,.74); line-height: 1.55; margin: 10px 0 0; }
    .sw-info { margin: 0; font-size: .92rem; font-weight: 600; color: rgba(243,246,251,.78); line-height: 1.55; }
    .sw-note.is-warn { color: rgba(224,176,128,.9); }
    .sw-note.is-bad  { color: rgba(224,128,128,.92); }
    .sw-sizeinfo span { font-size: .76rem; white-space: nowrap; }
    .sw-sizeinfo span.is-warn { color: #e0b080; }
    .sw-sizeinfo span.is-bad  { color: #e08080; }
    .sw-sizeinfo span.is-good { color: #a8cf9a; }

    /* ── Upload ── */
    .sw-drop {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      padding: 26px 18px; border-radius: 18px; text-align: center; cursor: pointer;
      border: 2px dashed rgba(192,138,87,.32); background: rgba(192,138,87,.05);
      transition: border-color .2s, background .2s;
    }
    .sw-drop:hover, .sw-drop.is-over { border-color: rgba(192,138,87,.65); background: rgba(192,138,87,.1); }
    .sw-drop-ico { font-size: 1.7rem; line-height: 1; }
    .sw-drop b { font-size: .9rem; color: rgba(243,246,251,.85); }
    .sw-drop small { font-size: .76rem; color: rgba(243,246,251,.76); }
    .sw-drop-file { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
    .sw-drop-file span { font-size: .78rem; color: rgba(243,246,251,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── Inputs ── */
    .sw-input, .sw-select, .sw-area {
      width: 100%; padding: 11px 14px; border-radius: 13px;
      border: 1.5px solid rgba(255,255,255,.12);
      background: rgba(8,11,18,.82); color: #f3f6fb;
      font: 600 .9rem 'Manrope', sans-serif;
    }
    .sw-area { min-height: 90px; resize: vertical; line-height: 1.6; }
    .sw-input:focus, .sw-select:focus, .sw-area:focus { outline: none; border-color: rgba(192,138,87,.5); }
    .sw-select {
      appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d3b07a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 15px center;
    }
    .sw-select option { background: #0d1017; color: #f3f6fb; }
    .sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 520px) { .sw-row { grid-template-columns: 1fr; } }
    .sw-field label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; color: rgba(243,246,251,.78); margin-bottom: 6px; }

    /* ── Slider ── */
    .sw-slider { margin-top: 4px; }
    .sw-slider input[type=range] {
      width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
      background: linear-gradient(90deg, rgba(192,138,87,.65), rgba(255,255,255,.12));
      outline: none; margin: 0;
    }
    .sw-slider input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 19px; height: 19px; border-radius: 50%;
      background: #d3b07a; border: 3px solid #12161f; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5);
    }
    .sw-slider input[type=range]::-moz-range-thumb {
      width: 19px; height: 19px; border-radius: 50%; background: #d3b07a;
      border: 3px solid #12161f; cursor: grab;
    }
    .sw-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
    .sw-slider-head span { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(243,246,251,.78); }
    .sw-slider-head strong { font-size: .84rem; color: #d3b07a; font-weight: 800; }

    /* ── Regler direkt unter der Live-Vorschau ──
       Optik und Aufbau wie im Maßgürtel-/Halsband-Konfigurator:
       Bezeichnung links, Regler in der Mitte, Wert in Gold rechts. */
    /* [hidden] muss gegen die display-Regeln der Klassen gewinnen – sonst
       bleiben bei „Ohne Druck" die Motiv-Regler stehen. */
    .sw-ctl[hidden], .sw-stage-hint[hidden], .sw-sec[hidden] { display: none !important; }
    .sw-ctl { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
    .sw-ctl-text[hidden] { display: none !important; }
    .sw-ctl-hint { font-size: .72rem; color: rgba(243,246,251,.73); margin: 0; line-height: 1.5; }
    /* Auswahl-Chips "Text" und "Motiv". Für diese Knöpfe gab es bisher gar
       kein CSS — sie fielen deshalb auf die weißen Standardknöpfe des
       Browsers zurück und standen hell im dunklen Konfigurator.        */
    .sw-ctl-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .sw-ctl-picklabel {
      font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
      font-weight: 800; color: rgba(243,246,251,.77); margin-right: 2px;
    }
    .sw-ctl-grp { display: inline-flex; align-items: stretch; }
    .sw-pick, .sw-pick-x {
      border: 1.5px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03);
      color: rgba(243,246,251,.75);
      font: 800 .78rem/1.2 'Manrope', sans-serif;
      padding: 9px 14px; cursor: pointer; transition: all .2s;
    }
    .sw-pick { border-radius: 11px; }
    .sw-pick:hover, .sw-pick-x:hover { border-color: rgba(192,138,87,.42); background: rgba(192,138,87,.07); }
    .sw-pick.is-active { border-color: rgba(192,138,87,.75); background: rgba(192,138,87,.16); color: #d3b07a; }
    /* Sobald das ✕ sichtbar ist, sitzt es bündig am Chip. */
    .sw-ctl-grp:not(.is-solo) .sw-pick { border-radius: 11px 0 0 11px; border-right-width: 0; }
    .sw-pick-x { border-radius: 0 11px 11px 0; padding: 9px 11px; color: rgba(243,246,251,.8); }
    .sw-pick-x:hover { color: #f3f6fb; }
    .sw-pick-x[hidden] { display: none; }
    .sw-ctl-row { display: flex; align-items: center; gap: 10px; }
    .sw-ctl-row > label {
      font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
      color: rgba(243,246,251,.77); white-space: nowrap; min-width: 88px;
    }
    .sw-ctl-row input[type=range] {
      flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
      background: linear-gradient(90deg, rgba(192,138,87,.65), rgba(255,255,255,.12));
      accent-color: #d3b07a; outline: none; margin: 0; cursor: pointer;
    }
    .sw-ctl-row input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
      background: #d3b07a; border: 3px solid #12161f; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5);
    }
    .sw-ctl-row input[type=range]::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 50%; background: #d3b07a;
      border: 3px solid #12161f; cursor: grab;
    }
    .sw-ctl-row > span {
      font-size: .82rem; font-weight: 800; color: #d3b07a;
      min-width: 46px; text-align: right;
    }
    .sw-ctl-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
    .sw-ctl-cm { display: flex; align-items: center; gap: 9px; flex: 1 1 190px; }
    .sw-ctl-cm label {
      font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
      color: rgba(243,246,251,.77); white-space: nowrap;
    }
    .sw-ctl-cm .sw-input { padding: 9px 11px; }

    /* ── Rechtehinweis zum Motiv (wie in den Konfiguratoren) ── */
    .sw-rights {
      display: flex; flex-direction: column; gap: 8px;
      padding: 14px 16px; border-radius: 14px; margin-top: 10px;
      background: rgba(192,138,87,.06); border: 1px solid rgba(192,138,87,.22);
    }
    .sw-rights > p { margin: 0; font-size: .82rem; line-height: 1.6; color: rgba(243,246,251,.78); }
    .sw-rights strong { color: #d3b07a; }
    .sw-rights details { font-size: .8rem; color: rgba(243,246,251,.87); }
    .sw-rights summary { cursor: pointer; color: #d3b07a; font-weight: 700; }
    .sw-rights details p { margin: 8px 0 0; line-height: 1.65; }
    .sw-rights-small { font-size: .76rem !important; color: rgba(243,246,251,.77) !important; }

    /* ── Freistellen-Editor (Pinsel + Zauberstab) ──
       Gleiche Bedienung wie im Lasergravur-Konfigurator. */
    .sw-eraser {
      margin-top: 12px; padding: 16px; border-radius: 18px;
      background: rgba(255,255,255,.03); border: 1px solid rgba(192,138,87,.28);
    }
    .sw-eraser[hidden] { display: none; }
    .sw-eraser-modes { display: flex; gap: 8px; margin: 0 0 10px; }
    .sw-eraser-modes .sw-opt { flex: 1; }
    .sw-eraser-hint { font-size: .78rem; color: rgba(243,246,251,.78); line-height: 1.55; margin: 0 0 10px; }
    .sw-eraser-stage {
      position: relative; width: 100%; max-width: 460px; margin: 0 auto;
      border-radius: 14px; overflow: hidden; cursor: crosshair; touch-action: none;
      border: 1px solid rgba(255,255,255,.1);
      background: repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%, rgba(255,255,255,.02) 0% 50%) 50% / 20px 20px;
    }
    #swEraserCanvas { display: block; width: 100%; height: auto; touch-action: none; }
    .sw-brush-cursor {
      position: absolute; border: 2px solid #d3b07a; border-radius: 50%;
      pointer-events: none; transform: translate(-50%,-50%); display: none; z-index: 9;
      box-shadow: 0 0 0 1px rgba(0,0,0,.45);
    }
    .sw-eraser-slider { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
    .sw-eraser-slider[hidden] { display: none; }
    .sw-eraser-slider label {
      font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
      color: rgba(243,246,251,.77); white-space: nowrap; min-width: 92px;
    }
    .sw-eraser-slider input[type=range] {
      flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
      background: linear-gradient(90deg, rgba(192,138,87,.65), rgba(255,255,255,.12));
      accent-color: #d3b07a; outline: none; cursor: pointer;
    }
    .sw-eraser-slider input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
      background: #d3b07a; border: 3px solid #12161f; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5);
    }
    .sw-eraser-slider input[type=range]::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 50%; background: #d3b07a;
      border: 3px solid #12161f; cursor: grab;
    }
    .sw-eraser-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .sw-eraser-actions .sw-opt { flex: 1; min-width: 104px; }
    .sw-eraser-actions .sw-opt.is-done { border-color: rgba(192,138,87,.75); background: rgba(192,138,87,.18); color: #f3f6fb; }
    .sw-ctl-foot .sw-opt { padding: 10px 15px; white-space: nowrap; }

    /* ── Vorschau ── */
    .sw-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .sw-preview-head h3 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,246,251,.77); margin: 0; font-weight: 800; }
    .sw-viewtabs { display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
    .sw-viewtabs button {
      padding: 6px 14px; border-radius: 999px; border: none; cursor: pointer;
      background: transparent; color: rgba(243,246,251,.82);
      font: 800 .76rem 'Manrope', sans-serif; transition: all .18s;
    }
    .sw-viewtabs button.is-active { background: rgba(192,138,87,.22); color: #d3b07a; }

    .sw-stage, .sw-fs-stage {
      user-select: none; -webkit-user-select: none; -ms-user-select: none;
      -webkit-touch-callout: none;
    }
    .sw-stage {
      position: relative; border-radius: 20px; overflow: hidden;
      /* Gleiche Aufhellung wie bei den Produktkacheln, damit dunkle Teile
         auch in der Vorschau nicht vor Schwarz verschwinden. Der kupferne
         Schimmer in der Mitte bleibt darüber liegen.                    */
      /* Deckend, nicht durchscheinend: Als halbtransparente Aufhellung schlug
         die Ledertextur des Seitenhintergrunds durch die Fläche. Die beiden
         Farbwerte sind an den Produktkacheln abgemessen, damit Vorschau und
         Kacheln gleich aussehen.                                          */
      background:
        radial-gradient(circle at 50% 38%, rgba(192,138,87,.10), rgba(8,11,18,0) 62%),
        linear-gradient(180deg, #35383e, #21232b);
      border: 1px solid rgba(255,255,255,.14);
      aspect-ratio: 1/1;
    }
    .sw-garment { display: none; }
    /* Weicher als vorher: auf dem helleren Untergrund wurde aus dem harten
       Schatten ein sichtbarer dunkler Hof um das Kleidungsstück. */
    .sw-stage canvas, .sw-fs-stage canvas { filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
    .sw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
    .sw-stage canvas:active { cursor: grabbing; }
    .sw-stage-hint {
      position: absolute; left: 12px; bottom: 12px; z-index: 3; pointer-events: none;
      padding: 5px 11px; border-radius: 999px; font-size: .68rem; font-weight: 700;
      background: rgba(8,11,18,.72); border: 1px solid rgba(255,255,255,.1); color: rgba(243,246,251,.8);
      backdrop-filter: blur(6px);
    }
    .sw-fs-btn {
      position: absolute; right: 12px; top: 12px; z-index: 3;
      width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
      background: rgba(8,11,18,.72); border: 1px solid rgba(255,255,255,.12);
      color: rgba(243,246,251,.7); display: grid; place-items: center;
      backdrop-filter: blur(6px); transition: all .18s;
    }
    .sw-fs-btn:hover { color: #d3b07a; border-color: rgba(192,138,87,.4); }

    .sw-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
    .sw-meta div { background: rgba(255,255,255,.04); border-radius: 12px; padding: 9px 12px; }
    .sw-meta strong { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; color: rgba(243,246,251,.75); }
    .sw-meta span { font-size: .84rem; font-weight: 800; color: #f3f6fb; }

    /* ── Vollbild ── */
    .sw-fs {
      position: fixed; inset: 0; z-index: 6000; display: none;
      background: rgba(5,7,11,.96); backdrop-filter: blur(8px);
      padding: 24px; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    }
    .sw-fs.open { display: flex; }
    .sw-fs-stage { position: relative; width: min(88vh, 92vw); aspect-ratio: 1/1; border-radius: 22px; overflow: hidden;
      background:
        radial-gradient(circle at 50% 38%, rgba(192,138,87,.10), transparent 62%),
        linear-gradient(180deg, #35383e, #21232b); }
    .sw-fs-stage img { display: none; }
    .sw-fs-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
    .sw-fs-close {
      position: absolute; top: 20px; right: 22px; width: 44px; height: 44px; border-radius: 14px;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #f3f6fb;
      font-size: 1.3rem; cursor: pointer; display: grid; place-items: center;
    }
    .sw-fs-tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 92vw; }
    .sw-fs-tools button {
      padding: 9px 16px; border-radius: 999px; cursor: pointer;
      border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
      color: rgba(243,246,251,.75); font: 800 .8rem 'Manrope', sans-serif; transition: all .18s;
    }
    .sw-fs-tools button:hover { border-color: rgba(192,138,87,.5); color: #d3b07a; }

    /* ── Zusammenfassung ── */
    .sw-sum-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
    .sw-sum-list li { display: flex; justify-content: space-between; gap: 14px; font-size: .83rem;
      color: rgba(243,246,251,.86); padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.03); }
    .sw-sum-list li strong { color: #f3f6fb; font-weight: 800; text-align: right; }
    .sw-breakdown { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px;
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
    .sw-breakdown p { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
      color: rgba(211,176,122,.85); font-weight: 800; margin: 0 0 10px; }
    .sw-breakdown ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .sw-breakdown li { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; color: rgba(243,246,251,.84); }
    .sw-breakdown li strong { color: rgba(243,246,251,.92); font-weight: 700; }
    .sw-breakdown li.is-base { color: rgba(243,246,251,.88); font-weight: 700;
      padding-bottom: 7px; border-bottom: 1px dashed rgba(255,255,255,.1); }
    .sw-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
      padding: 18px; border-radius: 22px; margin-bottom: 16px;
      background: linear-gradient(135deg, rgba(168,137,95,.18), rgba(211,176,122,.07));
      border: 1px solid rgba(211,176,122,.28); }
    .sw-total span { display: block; font-size: .78rem; color: rgba(243,246,251,.8); font-weight: 700; margin-bottom: 3px; }
    .sw-total strong { font-size: 2.1rem; font-weight: 900; color: #d3b07a; line-height: 1; }
    .sw-total em { font-style: normal; font-size: .74rem; color: rgba(243,246,251,.76); }
    .sw-cta { display: flex; width: 100%; }
    .sw-cta[disabled] { cursor: wait; }
    .sw-ghost { display: flex; width: 100%; margin-top: 9px; }
    .sw-msg { text-align: center; font-size: .82rem; margin-top: 10px; min-height: 20px; color: #d3b07a; }
    .sw-motivfehler { text-align: center; margin-top: 10px; }
    .sw-motivfehler[hidden] { display: none; }
    .sw-motivfehler p { margin: 0 0 8px; font-size: .82rem; line-height: 1.5; color: #e08080; }

    /* ── Infozeile ── */
    .sw-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 26px; }
    .sw-note { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08); }
    .sw-note strong { display: block; font-size: .84rem; color: #f3f6fb; margin-bottom: 5px; }
    .sw-note p { margin: 0; font-size: .81rem; line-height: 1.6; color: rgba(243,246,251,.75); }

    /* Readable help text on dark panels, including the mobile configurator. */
    .sw-sec > h3 .hint,.sw-sec > .sub,.sw-color-note,.sw-drop small,
    p.sw-note,.sw-ctl-hint,.sw-ctl-picklabel,.sw-preview-head h3,
    .sw-rights-small,.sw-opts.is-auto .sw-opt,.sw-sec label,
    .sw-ctl label,.sw-summary > p,.sw-summary > p span{
      color:rgba(243,246,251,.76) !important;
    }
    .sw-opt .p{opacity:1}

    @media (max-width: 768px) {
      html, body { overflow-x: clip !important; }
      .sw-layout { display: block !important; }
      .sw-sticky { position: static !important; top: auto !important; margin-top: 16px; }
      .sw-ctl-row > label { min-width: 74px; font-size: .68rem; }
      .sw-panel, .sw-card { padding: 18px 15px !important; border-radius: 22px; }
      .sw-products { grid-template-columns: repeat(2, 1fr); }
      .sw-meta { grid-template-columns: 1fr 1fr; }
      .sw-fs-stage { width: 94vw; }
    }


/* Sichtbarer Tastaturfokus (Paket 9.9) */
#verschlussSelect:focus-visible, #mengeMinus:focus-visible, #gdSize:focus-visible, #swSize:focus-visible, .sw-i:focus-visible, #anmerkung:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }

/* Berater-Reiter (rechter Rand) und WhatsApp-Knopf (rechts unten) sollen den Text der Vorschaukarte nicht überdecken */
@media (min-width: 861px) and (max-width: 1400px) {
  .sw-sticky .sw-card { padding-right: 64px; padding-bottom: 72px; }
}

/* ── Ebenen: Elemente je Seite ─────────────────────────────── */
.sw-stage canvas { touch-action: none; }
#swCanvas:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }
.sw-layers { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 200px; min-width: 0; }
.sw-layer { display: inline-flex; align-items: stretch; max-width: 100%; }
.sw-layer-pick, .sw-layer-x {
  border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
  color: rgba(243,246,251,.8); font: 800 .76rem/1.2 'Manrope', sans-serif;
  padding: 8px 11px; cursor: pointer; transition: all .2s;
}
.sw-layer-pick { border-radius: 11px 0 0 11px; border-right-width: 0; max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-layer-x { border-radius: 0 11px 11px 0; padding: 8px 10px; }
.sw-layer-pick:hover, .sw-layer-x:hover { border-color: rgba(192,138,87,.42); background: rgba(192,138,87,.07); }
.sw-layer.is-active .sw-layer-pick, .sw-layer.is-active .sw-layer-x {
  border-color: rgba(192,138,87,.75); background: rgba(192,138,87,.16); color: #d3b07a; }
.sw-layers-leer { font-size: .76rem; color: rgba(243,246,251,.74); margin: 0; align-self: center; }
.sw-add { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-add .sw-pick { flex: 1 1 90px; }
.sw-add .sw-pick[disabled] { opacity: .35; cursor: not-allowed; }
.sw-colorinput { width: 100%; height: 42px; padding: 3px; border-radius: 13px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.12); background: rgba(8,11,18,.82); }
.sw-curve { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(192,138,87,.65), rgba(255,255,255,.12));
  accent-color: #d3b07a; outline: none; margin: 14px 0 0; cursor: pointer; }
.sw-curve::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #d3b07a; border: 3px solid #12161f; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sw-curve::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #d3b07a;
  border: 3px solid #12161f; cursor: grab; }
.sw-curve:focus-visible, .sw-colorinput:focus-visible { outline: 2px solid #e6c391; outline-offset: 2px; }
.sw-ctl-style[hidden], .sw-ctl-text[hidden] { display: none !important; }
#swCurveVal { color: #d3b07a; margin-left: 6px; }

/* ── Namensliste ───────────────────────────────────────────── */
.sw-names { margin-top: 14px; padding: 14px; border-radius: 16px;
  border: 1px solid rgba(211,176,122,.26); background: rgba(211,176,122,.05); }
.sw-names[hidden] { display: none !important; }
.sw-names-h { margin: 0 0 8px; font-size: .95rem; font-weight: 800; }
.sw-names-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sw-names-row { display: grid; grid-template-columns: 1fr 86px 40px; gap: 8px; align-items: center; }
.sw-names-row .sw-input, .sw-names-row .sw-select { padding: 9px 11px; min-width: 0; }
.sw-names-row .sw-select { padding-right: 30px; background-position: right 10px center; }
.sw-names-row .sw-names-x { height: 40px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: rgba(243,246,251,.8);
  font: 800 .8rem 'Manrope', sans-serif; }
.sw-names-row .sw-names-x:hover { border-color: rgba(192,138,87,.42); }
.sw-names-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sw-names-paste { margin-top: 10px; }
.sw-names-paste summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: #d3b07a; }
.sw-names-lbl { display: block; margin: 8px 0 6px; font-size: .74rem; color: rgba(243,246,251,.76); }
.sw-names-paste .sw-opt { margin-top: 8px; }
@media (max-width: 520px) {
  .sw-names-row { grid-template-columns: 1fr 76px 38px; }
  .sw-layer-pick { max-width: 130px; }
}

/* Haken „Auf jedem Teil ein anderer Name“ unter dem Wunschtext */
.sw-alsname { display: flex; align-items: center; gap: 8px; margin-top: 8px; text-transform: none; letter-spacing: normal; font-weight: 500; font-size: .82rem; color: rgba(243, 246, 251, .88); cursor: pointer; }
.sw-alsname input { width: 18px; height: 18px; accent-color: #d3b07a; flex: 0 0 auto; }
.sw-alsname.is-off { opacity: .55; cursor: not-allowed; }