/*
 * Druckerei Print Configurator — Frontend-Stylesheet
 * Kontrakt §14 + §15.3 (v2): stylt EXAKT die dort definierten Klassen.
 * Alle Variablen sind auf #dpc-app bzw. .dpc-toast-region gescoped — nichts Globales.
 *
 * WICHTIG: Der Reset `#dpc-app button` hat Spezifität 1-0-1. JEDE Regel,
 * die <button>-Elemente stylt, MUSS daher mit `#dpc-app `-Präfix geschrieben
 * werden, sonst verliert sie gegen den Reset (background/border/padding).
 */

/* ------------------------------------------------------------------ */
/* §P: SELBST-GEHOSTETE Schriften (GDPR-konform — KEIN Google-CDN, da das    */
/* die Kunden-IP an Google senden würde = in DE unzulässig). woff2 liegen in  */
/* assets/fonts/. Werden für den Clipper-Rücken-Text (3–4 populäre Fonts)     */
/* genutzt; der gewählte Font wird in die Druck-Canvas gebacken → muss bei    */
/* JEDEM Kunden identisch rendern, daher self-hosted statt Systemfont.        */
/* WICHTIG (Chromium-Canvas-Eigenheit, empirisch verifiziert): Das 2D-Canvas rendert einen
 * per @font-face geladenen Webfont NUR bei angefordertem Gewicht 400/normal — bei 600/700/800
 * fällt es auf die generische Schrift zurück (kein synthetisches Fett, auch nicht mit
 * font-weight-Range). Daher werden ALLE Schnitte als `normal` deklariert (die Dateien sind
 * bereits passende Display-Cuts: Oswald SemiBold, Montserrat Bold, Bebas/Pacifico regular)
 * und der Clipper-Text fordert für diese Familien Gewicht 400/normal an. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/oswald-600.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-700.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pacifico-400.woff2?v=2') format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bebasneue-400.woff2?v=2') format('woff2'); }

/* ------------------------------------------------------------------ */
/* 1. Design-Tokens (Widget-Scope, NICHT :root)                        */
/* ------------------------------------------------------------------ */

#dpc-app,
.dpc-toast-region {
  --dpc-accent: #6d28d9;
  --dpc-accent-dark: #5b21b6;
  --dpc-accent-soft: rgba(109, 40, 217, 0.08);
  --dpc-accent-soft-2: rgba(109, 40, 217, 0.16);
  --dpc-ink: #111827;
  --dpc-muted: #6b7280;
  --dpc-border: #e5e7eb;
  --dpc-bg: #ffffff;
  --dpc-surface: #f9fafb;
  --dpc-ok: #059669;
  --dpc-ok-soft: rgba(5, 150, 105, 0.1);
  --dpc-warn: #d97706;
  --dpc-warn-soft: rgba(217, 119, 6, 0.12);
  --dpc-err: #dc2626;
  --dpc-err-soft: rgba(220, 38, 38, 0.1);
  --dpc-radius: 14px;
  --dpc-radius-sm: 10px;
  --dpc-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --dpc-shadow-lg: 0 10px 30px rgba(17, 24, 39, 0.12);
  --dpc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
}

/* ------------------------------------------------------------------ */
/* 2. Basis & Resets (nur im Namensraum)                               */
/* ------------------------------------------------------------------ */

.dpc-form {
  margin: 0;
  width: 100%;
}

#dpc-app {
  font-family: var(--dpc-font);
  color: var(--dpc-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

#dpc-app *,
#dpc-app *::before,
#dpc-app *::after {
  box-sizing: border-box;
}

#dpc-app [hidden] {
  display: none !important;
}

#dpc-app button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#dpc-app input,
#dpc-app select,
#dpc-app textarea {
  font: inherit;
  color: inherit;
}

#dpc-app img,
#dpc-app canvas {
  max-width: 100%;
}

/* Sichtbarer Fokus-Ring überall (EAA); Outline folgt dem
   border-radius des Elements automatisch — Radius hier NICHT setzen,
   sonst verformt die ID-Spezifität Pills/Kreise im Fokuszustand. */
#dpc-app :focus-visible,
.dpc-toast-region :focus-visible {
  outline: 2px solid var(--dpc-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 3. Layout                                                           */
/* ------------------------------------------------------------------ */

.dpc__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
}

/* --- Preview-Spalte ------------------------------------------------ */

.dpc__preview {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* §16.5: Solange der Spot-Gloss-Editor links unter der Vorschau angedockt ist,
   darf die linke Spalte scrollen — die Vorschau wird NICHT mehr hart sticky,
   damit Vorschau (oben) und Editor (unten) zusammen sichtbar/erreichbar bleiben. */
#dpc-app.dpc--gloss-open .dpc__preview {
  position: static;
  top: auto;
}

.dpc__canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius);
  box-shadow: var(--dpc-shadow);
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%,
      #ffffff 0%,
      #f5f3fb 48%,
      #ece9f6 100%);
}

/* §42: Upload-Overlay über der Vorschau — solange kein Motiv geladen ist. Der
   Container ist klick-durchlässig (Orbit bleibt möglich), nur die Karte fängt Klicks. */
#dpc-app .dpc__upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
}
#dpc-app .dpc__upload-overlay[hidden] { display: none; }
#dpc-app .dpc__upload-overlay-card {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 26px;
  text-align: center;
  color: var(--dpc-accent, #6d28d9);
  background: rgba(255, 255, 255, 0.86);
  border: 2px dashed var(--dpc-accent, #6d28d9);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(31, 23, 61, 0.14);
  backdrop-filter: blur(2px);
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
#dpc-app .dpc__upload-overlay-card:hover,
#dpc-app .dpc__upload-overlay-card:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.96);
  outline: none;
}
#dpc-app .dpc__upload-overlay.is-dragover .dpc__upload-overlay-card {
  background: var(--dpc-accent-soft, #efe9fb);
  transform: scale(1.04);
}
#dpc-app .dpc__upload-overlay-icon { line-height: 0; }
#dpc-app .dpc__upload-overlay-title { margin: 0; font-weight: 700; font-size: 15px; }
#dpc-app .dpc__upload-overlay-sub { margin: 0; font-size: 12.5px; color: var(--dpc-text-muted, #6b7280); }

canvas.dpc__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* OrbitControls braucht eigene Gesten */
  outline-offset: -3px;
}

.dpc__preview-hint {
  text-align: center;
  font-size: 13px;
  color: var(--dpc-muted);
}

/* --- Badges (DPI-Warnung über dem Canvas) -------------------------- */

.dpc__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 28px);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--dpc-shadow);
}

.dpc__badge--dpi {
  background: var(--dpc-warn-soft);
  color: var(--dpc-warn);
  border: 1px solid rgba(217, 119, 6, 0.35);
}

.dpc__badge--dpi::before {
  content: "⚠";
  font-size: 14px;
  line-height: 1;
}

/* Kritisch niedrige Auflösung → rot */
.dpc__badge--dpi.is-error,
.dpc__badge--dpi.is-danger,
.dpc__badge--err {
  background: var(--dpc-err-soft);
  color: var(--dpc-err);
  border-color: rgba(220, 38, 38, 0.35);
}

/* --- Schwebende Preview-Werkzeugleiste (§15.3, Glas-Optik) ---------- */

#dpc-app .dpc__preview-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.14);
}

#dpc-app .dpc__preview-tools:empty {
  display: none;
}

/* §140/§O: Produktfarb-Punkte als Overlay LINKS UNTEN auf der Live-Vorschau (Clipper +
   T-Shirt/Hoodie). Eigene Pille, getrennt von der oberen Werkzeugleiste. */
#dpc-app .dpc__preview-colors {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 5px rgba(17, 24, 39, 0.14);
}
/* §U1: Farb-Bubbles im Live-Preview größer (Kundenwunsch) — 22 → 30 px. */
#dpc-app .dpc__preview-colors .dpc__colordot {
  width: 30px;
  height: 30px;
}

/* Fallback ohne backdrop-filter: deckenderes Weiß */
@supports not ((backdrop-filter: blur(8px)) or
    (-webkit-backdrop-filter: blur(8px))) {
  #dpc-app .dpc__preview-tools {
    background: rgba(255, 255, 255, 0.94);
  }
}

#dpc-app .dpc__preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--dpc-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

#dpc-app .dpc__preview-toggle:hover {
  background: var(--dpc-accent-soft);
  color: var(--dpc-accent);
}

/* aria-pressed doppelt codiert: Farbe + Status-Punkt */
#dpc-app .dpc__preview-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dpc-border);
  transition: background-color 0.15s ease;
}

#dpc-app .dpc__preview-toggle[aria-pressed="true"] {
  background: var(--dpc-accent);
  border-color: var(--dpc-accent);
  color: #ffffff;
}

#dpc-app .dpc__preview-toggle[aria-pressed="true"]::before {
  background: #ffffff;
}

/* „Ansicht zurücksetzen" (§16.2): kein Status-Punkt, stattdessen Reset-Glyph */
#dpc-app .dpc__preview-reset::before {
  content: "⟳";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 14px;
  line-height: 1;
}

/* §49 (#82): „Etiketten abziehen" (Bogen) — Peel-Glyph statt Status-Punkt im AUS-
   Zustand; im EIN-Zustand greift der gemeinsame aria-pressed-Stil (Akzentfarbe). */
#dpc-app .dpc__preview-peel::before {
  content: "✦";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 13px;
  line-height: 1;
}

/* §49 (#81): dezenter Warnhinweis unten rechts in der Live-Vorschau. */
#dpc-app .dpc__preview-note {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 4;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 245, 245, 0.78);
  /* §49: rötliche Outline, damit der Hinweis besser auffällt. */
  border: 1px solid rgba(200, 45, 45, 0.55);
  box-shadow: 0 1px 6px rgba(200, 45, 45, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  text-align: right;
}

@supports not ((backdrop-filter: blur(6px)) or
    (-webkit-backdrop-filter: blur(6px))) {
  #dpc-app .dpc__preview-note {
    background: rgba(255, 255, 255, 0.9);
  }
}

#dpc-app .dpc__preview-note-line {
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--dpc-muted, #6b7280);
}

#dpc-app .dpc__preview-note-line:first-child {
  font-weight: 700;
  color: #b32d2e; /* §49: rötlich hervorgehoben */
}

/* §T3: AR „Im Raum ansehen"-Overlay-Styles entfernt (Feature komplett raus). */

/* §99: Rich-Text-Effekte — Chip-Reihe + Auto-Farbknopf. */
#dpc-app .dpc__chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#dpc-app .dpc__chip--toggle.is-active {
  background: var(--dpc-accent, #6d28d9);
  color: #fff;
  border-color: var(--dpc-accent, #6d28d9);
}
#dpc-app .dpc__colordot--auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--dpc-fg, #1f2430);
  background: linear-gradient(135deg, #fff 0 50%, #111 50% 100%);
}

/* §106: Apparel-Druckwahl (Vorderseite / Rückseite / Beides) als Segment-Reihe. */
#dpc-app .dpc__locchoice {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#dpc-app .dpc__locchoice-btn {
  flex: 1 1 0;
  min-width: 90px;
  text-align: center;
  justify-content: center;
}
#dpc-app .dpc__locchoice-btn.is-active {
  background: var(--dpc-accent, #6d28d9);
  color: #fff;
  border-color: var(--dpc-accent, #6d28d9);
}

/* §97: QR-Code-Eingabe (Text + Button nebeneinander). */
#dpc-app .dpc__qr-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
#dpc-app .dpc__qr-row .dpc__qr-input {
  flex: 1 1 auto;
  min-width: 0;
}
#dpc-app .dpc__qr-row .dpc__qr-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* §93: Warnhinweis NICHT mehr als Pill in der Vorschau, sondern dezent & voll-breit
   UNTER dem Vorschaufenster — keine Box/Outline/Schatten, zentrierter, unaufdringlicher
   Fließtext über die gesamte Breite (eleganter & unsichtbarer). Überschreibt die
   absolute Pill-Positionierung oben vollständig. */
#dpc-app .dpc__preview-note--below {
  position: static;
  right: auto;
  bottom: auto;
  max-width: none;
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: center;
}

#dpc-app .dpc__preview-note--below .dpc__preview-note-text {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--dpc-muted, #9097a1);
  letter-spacing: 0.01em;
}

/* §55: Rückseiten-Druck-Schritt */
#dpc-app .dpc__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dpc-ink);
  cursor: pointer;
}
#dpc-app .dpc__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--dpc-accent);
}
#dpc-app .dpc__back-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--dpc-border);
}
#dpc-app .dpc__back-thumb {
  display: block;
  max-width: 120px;
  max-height: 120px;
  margin-top: 6px;
  border: 1px solid var(--dpc-border);
  border-radius: 6px;
  background: #fff;
}
#dpc-app .dpc__select,
#dpc-app .dpc__range {
  width: 100%;
  max-width: 320px;
}
#dpc-app .dpc__select {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--dpc-border);
  border-radius: 8px;
  background: var(--dpc-bg, #fff);
  color: var(--dpc-ink);
  font-size: 14px;
}
#dpc-app .dpc__chip--ghost {
  background: transparent;
  border: 1px solid var(--dpc-border);
  color: var(--dpc-ink);
}
#dpc-app .dpc__chip--ghost:hover {
  background: var(--dpc-accent-soft);
  color: var(--dpc-accent);
}

/* §49: Clipper-Rücken-Text — größeres Eingabefeld. */
#dpc-app .dpc__back-text--big {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
}
/* §49: Positions-Zeile (Slider + „Mittig"-Button nebeneinander). */
#dpc-app .dpc__back-posrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
#dpc-app .dpc__back-posrow .dpc__range {
  flex: 1 1 auto;
}
#dpc-app .dpc__back-posrow .dpc__back-center {
  flex: 0 0 auto;
}
/* §V8: Endpunkt-Labels „unten ←→ Oben" am Positionsregler */
#dpc-app .dpc__back-posrow .dpc__back-poslabel {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--dpc-muted, #8a8f98);
  user-select: none;
}

/* --- Panel-Spalte --------------------------------------------------- */

.dpc__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 4. Schritt-Sections                                                 */
/* ------------------------------------------------------------------ */

.dpc__step {
  background: var(--dpc-bg);
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius);
  box-shadow: var(--dpc-shadow);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dpc__step.is-open {
  border-color: var(--dpc-accent-soft-2);
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.1);
}

#dpc-app .dpc__step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background-color 0.15s ease;
}

#dpc-app .dpc__step-head:hover {
  background: var(--dpc-surface);
}

.dpc__step-num {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dpc-surface);
  border: 1.5px solid var(--dpc-border);
  color: var(--dpc-muted);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.dpc__step.is-open .dpc__step-num {
  background: var(--dpc-accent);
  border-color: var(--dpc-accent);
  color: #ffffff;
}

/* Erledigt: grüner Haken statt Nummer */
.dpc__step.is-done .dpc__step-num {
  background: var(--dpc-ok);
  border-color: var(--dpc-ok);
  font-size: 0;
}

.dpc__step.is-done .dpc__step-num::after {
  content: "✓";
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.dpc__step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dpc-ink);
}

.dpc__step.is-done:not(.is-open) .dpc__step-title {
  color: var(--dpc-muted);
}

/* Auf-/Zuklappen über max-height */
.dpc__step-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.dpc__step.is-open .dpc__step-body {
  max-height: 3000px;
  padding: 6px 20px 22px;
}

/* ------------------------------------------------------------------ */
/* 5. Optionsgruppen, Chips, Cards, Inputs                             */
/* ------------------------------------------------------------------ */

/* --- Optionsgruppen (§15.3): Label + Hint, 20 px Abstand ------------- */

#dpc-app .dpc__group {
  display: block;
  margin: 20px 0 0;
}

#dpc-app .dpc__group:first-child {
  margin-top: 6px;
}

/* Falls Gruppen als <fieldset>/<legend> gerendert werden: UA-Defaults weg */
#dpc-app fieldset.dpc__group {
  border: 0;
  padding: 0;
  min-width: 0;
}

#dpc-app legend.dpc__group-label {
  padding: 0;
}

#dpc-app .dpc__group-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dpc-ink);
}

#dpc-app .dpc__group-hint {
  display: block;
  margin: -2px 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--dpc-muted);
}

/* Innerhalb einer Gruppe übernimmt die Gruppe den Außenabstand */
#dpc-app .dpc__group > .dpc__sizes,
#dpc-app .dpc__group > .dpc__cutmodes,
#dpc-app .dpc__group > .dpc__qty-presets,
#dpc-app .dpc__group > .dpc__apparel-sizes,
#dpc-app .dpc__group > .dpc__basecolors,
#dpc-app .dpc__group > .dpc__materials,
#dpc-app .dpc__group > .dpc__finishes,
#dpc-app .dpc__group > .dpc__size-free,
#dpc-app .dpc__group > .dpc__cut-offset {
  margin-top: 8px;
  margin-bottom: 0;
}

/* --- Bogen-Info-Badge („N Etiketten je Bogen", §15.2/15.3) ----------- */

#dpc-app .dpc__sheet-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 7px 14px;
  border: 1px solid var(--dpc-accent-soft-2);
  border-radius: 999px;
  background: var(--dpc-accent-soft);
  color: var(--dpc-accent-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
/* §X4: Pill nur zeigen, wenn sie Text hat — sonst erschien ein leerer Pill-Rahmen (Bogen, Schritt „Größe & Schnitt"). */
#dpc-app .dpc__sheet-count:empty { display: none !important; }

/* --- Chips (40 px hoch, optional zweizeilig) -------------------------- */

#dpc-app .dpc__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* erlaubt .dpc__chip-sub auf eigener Zeile (Fallback) */
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid var(--dpc-border);
  border-radius: 999px;
  background: var(--dpc-bg);
  color: var(--dpc-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

#dpc-app .dpc__chip:hover {
  border-color: var(--dpc-accent);
  color: var(--dpc-accent);
}

#dpc-app .dpc__chip.is-active {
  border-color: var(--dpc-accent);
  background: var(--dpc-accent-soft);
  color: var(--dpc-accent);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--dpc-accent-soft);
}

/* Zweizeilige Chips: Maß fett oben, Zusatzinfo muted darunter (§15.2) */
#dpc-app .dpc__chip:has(.dpc__chip-sub) {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: 600;
  line-height: 1.2;
}

#dpc-app .dpc__chip-sub {
  display: block;
  width: 100%; /* Fallback ohne :has(): erzwingt eigene Zeile (flex-wrap) */
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--dpc-muted);
}

#dpc-app .dpc__chip.is-active .dpc__chip-sub {
  color: var(--dpc-accent);
  opacity: 0.85;
}

.dpc__sizes,
.dpc__cutmodes,
.dpc__qty-presets,
.dpc__apparel-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

/* --- Cards (Material / Veredelung, §15.3) ---------------------------- */

.dpc__materials,
.dpc__finishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

#dpc-app .dpc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px;
  border: 1.5px solid var(--dpc-border);
  border-radius: var(--dpc-radius);
  background: var(--dpc-bg);
  box-shadow: var(--dpc-shadow);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}

#dpc-app .dpc__card:hover {
  border-color: var(--dpc-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.1);
}

#dpc-app .dpc__card.is-active {
  border-color: var(--dpc-accent);
  background: var(--dpc-accent-soft);
  box-shadow: inset 0 0 0 1px var(--dpc-accent),
    0 3px 10px rgba(109, 40, 217, 0.14);
}

/* Aktiv-Zustand doppelt codiert: Farbe + Haken-Icon oben rechts (§15.3) */
#dpc-app .dpc__card.is-active::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dpc-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(109, 40, 217, 0.45);
}

/* Zusatzinfo auf Cards, z. B. „+60 %" oder „Standard" (§15.2) */
#dpc-app .dpc__card-meta {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dpc-muted);
}

#dpc-app .dpc__card.is-active .dpc__card-meta {
  color: var(--dpc-accent);
}

/* --- Material-Swatches (56 px Kreise, §15.3) -------------------------- */

.dpc__swatch {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--dpc-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.08);
  background: var(--dpc-surface);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Aktiv-Ring: 2 px Accent + 4 px Soft-Halo */
#dpc-app .dpc__card.is-active .dpc__swatch {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px var(--dpc-accent),
    0 0 0 6px var(--dpc-accent-soft-2),
    inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dpc__swatch--white {
  background:
    linear-gradient(160deg, #ffffff 0%, #f3f4f6 70%, #e8eaee 100%);
}

/* Transparent: Schachbrett + diagonaler Glanz */
.dpc__swatch--clear {
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, 0.6) 100%),
    repeating-conic-gradient(#dfe3e8 0% 25%, #ffffff 0% 50%);
  background-size: 100% 100%, 12px 12px;
}

/* Holographisch: Regenbogen-Conic */
.dpc__swatch--holographic {
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0) 42%),
    conic-gradient(from 210deg,
      #ff5ea8, #ffb347, #fff95e, #6dff8c, #5ee0ff, #7a6bff, #d65eff, #ff5ea8);
}

/* Glitzer: mehrschichtige Punkt-Radialgradients auf dunklem Grund */
.dpc__swatch--glitter {
  background-color: #3b3550;
  background-image:
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.95) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 68% 18%, rgba(255, 230, 160, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 62%, rgba(160, 220, 255, 0.9) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 40% 74%, rgba(255, 170, 220, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 46%, rgba(255, 255, 255, 0.85) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 12% 64%, rgba(190, 255, 200, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 36%, rgba(255, 255, 255, 0.8) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, #564d78 0%, #2e2942 100%);
}

/* Spiegel: harter Silber-Verlauf mit Lichtkante */
.dpc__swatch--mirror {
  background: linear-gradient(135deg,
      #fdfdfe 0%, #c9cdd4 28%, #f5f6f8 46%, #9aa0aa 60%,
      #e7e9ed 78%, #b3b8c0 100%);
}

.dpc__swatch--gold {
  background:
    radial-gradient(circle at 30% 26%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg,
      #f9e7a0 0%, #e8c252 35%, #c89a2e 60%, #f4d97c 82%, #b9892a 100%);
}

.dpc__swatch--silver {
  background:
    radial-gradient(circle at 30% 26%,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg,
      #f4f5f7 0%, #cfd3d9 38%, #aab0b9 62%, #e2e4e8 100%);
}

.dpc__swatch--kraft {
  background-color: #b8915f;
  background-image:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(98deg,
      rgba(120, 84, 40, 0.12) 0 2px,
      rgba(255, 235, 205, 0.08) 2px 4px);
}

/* §X6 (v2): Glow-in-the-Dark Swatch — kräftiges Nachleucht-Grün (weniger Weiss), das
   tatsächlich „glüht". Dunkler grüner Grund + heller Leuchtkern + Glow-Halo. */
.dpc__swatch--glow {
  background-color: #1c2a12;
  background-image:
    radial-gradient(circle at 50% 45%, rgba(190, 255, 94, 0.98) 0%, rgba(123, 255, 58, 0.85) 28%, rgba(60, 140, 30, 0.55) 60%, rgba(20, 40, 14, 0) 100%),
    radial-gradient(circle at 50% 45%, rgba(190, 255, 110, 0.5) 0%, rgba(123, 255, 58, 0) 75%);
  box-shadow: inset 0 0 6px rgba(123, 255, 58, 0.6), 0 0 8px rgba(123, 255, 58, 0.45);
}
/* §X6: „Licht aus"-Lampe — aktiv (Szene dunkel) deutlich hervorheben */
#dpc-app .dpc__preview-lamp.is-active {
  background: #11131a;
  color: #b6ff5e;
  border-color: #b6ff5e;
}

/* --- Text-/Zahlen-Eingaben ------------------------------------------ */

.dpc__input {
  width: 110px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1.5px solid var(--dpc-border);
  border-radius: var(--dpc-radius-sm);
  background: var(--dpc-bg);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dpc__input:hover {
  border-color: #d1d5db;
}

.dpc__input:focus {
  outline: none;
  border-color: var(--dpc-accent);
  box-shadow: 0 0 0 3px var(--dpc-accent-soft);
}

.dpc__size-free {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  color: var(--dpc-muted);
  font-size: 14px;
}

/* --- Schnitt-Offset (Range) ----------------------------------------- */

.dpc__cut-offset {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--dpc-muted);
}

#dpc-app input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 140px;
  min-width: 120px;
  height: 28px;
  background: transparent;
  cursor: pointer;
}

#dpc-app input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--dpc-border);
}

#dpc-app input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--dpc-border);
}

#dpc-app input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--dpc-accent);
}

#dpc-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--dpc-accent);
  box-shadow: var(--dpc-shadow);
  transition: transform 0.15s ease;
}

#dpc-app input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--dpc-accent);
  box-shadow: var(--dpc-shadow);
}

#dpc-app input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

/* --- Apparel: Stofffarben ------------------------------------------- */

.dpc__basecolors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

#dpc-app .dpc__colordot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--dpc-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#dpc-app .dpc__colordot:hover {
  transform: scale(1.08);
}

#dpc-app .dpc__colordot.is-active {
  box-shadow: 0 0 0 2px var(--dpc-bg), 0 0 0 4.5px var(--dpc-accent);
}

/* §T2: Freier Farbpicker (input[type=color]) als REGENBOGEN-HUE-RAD (Industrie-
   standard) statt flachem OS-Swatch. Das Feld zeigt ein conic-gradient-Farbrad; die
   aktuell gewählte Farbe erscheint als kleiner zentraler Punkt (nativer Swatch via
   clip-path verkleinert). Größe = wie die Preset-Dots der Reihe (44px). Rein CSS. */
#dpc-app .dpc__colorpicker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--dpc-bg, #fff);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #fff 0%, rgba(255, 255, 255, 0) 42%),
    conic-gradient(from 90deg, #ff0000, #ff8a00, #ffe600, #46ff00, #00ffd5, #0088ff, #4400ff, #d400ff, #ff0080, #ff0000);
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  vertical-align: middle;
}
#dpc-app .dpc__colorpicker:hover { transform: scale(1.06); }
#dpc-app .dpc__colorpicker:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dpc-bg, #fff), 0 0 0 4px var(--dpc-accent, #6d28d9);
}
#dpc-app .dpc__colorpicker[data-active="true"] {
  box-shadow: 0 0 0 2px var(--dpc-bg, #fff), 0 0 0 4.5px var(--dpc-accent, #6d28d9);
}
/* Nativen Swatch auf einen kleinen zentralen Punkt (= gewählte Farbe) reduzieren. */
#dpc-app .dpc__colorpicker::-webkit-color-swatch-wrapper { padding: 0; }
#dpc-app .dpc__colorpicker::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  -webkit-clip-path: circle(7px at 50% 50%);
  clip-path: circle(7px at 50% 50%);
}
#dpc-app .dpc__colorpicker::-moz-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  clip-path: circle(7px at 50% 50%);
}

/* ------------------------------------------------------------------ */
/* 6. Upload: Dropzone, Datei-Input, Meta, Fortschritt                 */
/* ------------------------------------------------------------------ */

.dpc__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
  padding: 32px 20px;
  min-height: 170px;
  border: 2px dashed var(--dpc-border);
  border-radius: var(--dpc-radius);
  background: var(--dpc-surface);
  text-align: center;
  color: var(--dpc-muted);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dpc__dropzone:hover,
.dpc__dropzone.is-dragover {
  border-color: var(--dpc-accent);
  background: var(--dpc-accent-soft);
  color: var(--dpc-accent);
}

.dpc__dropzone.is-dragover {
  border-style: solid;
  box-shadow: inset 0 0 0 2px var(--dpc-accent-soft-2);
}

/* Der sichtbare „Datei auswählen"-Button ist ein label.dpc__chip —
   die .dpc__chip-Regeln greifen, hier nur die Label-Eigenheiten.
   (#dpc-app-Präfix: muss die Basis-Chip-Regel überstimmen können.) */
#dpc-app .dpc__dropzone label.dpc__chip,
#dpc-app .dpc__dropzone .dpc__chip {
  background: var(--dpc-bg);
  color: var(--dpc-ink);
}

#dpc-app .dpc__dropzone:hover .dpc__chip,
#dpc-app .dpc__dropzone.is-dragover .dpc__chip {
  border-color: var(--dpc-accent);
  color: var(--dpc-accent);
}

/* Echtes file-Input visuell versteckt, aber fokussierbar (EAA) */
input.dpc__file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

input.dpc__file:focus-visible + label.dpc__chip,
input.dpc__file:focus-visible ~ label.dpc__chip {
  outline: 2px solid var(--dpc-accent);
  outline-offset: 2px;
}

.dpc__upload-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 2px;
  font-size: 13px;
  color: var(--dpc-muted);
}

.dpc__upload-meta img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius-sm);
  background:
    repeating-conic-gradient(#eceef2 0% 25%, #ffffff 0% 50%);
  background-size: 12px 12px;
}

/* Fortschrittsbalken: div-Track mit innerem Füll-Element ODER <progress> */
.dpc__progress {
  display: block;
  width: 100%;
  height: 6px;
  margin: 10px 0 0;
  border: 0;
  border-radius: 999px;
  background: var(--dpc-border);
  overflow: hidden;
}

.dpc__progress > span,
.dpc__progress > div,
.dpc__progress > i,
.dpc__progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dpc-accent), #8b5cf6);
  transition: width 0.25s ease;
}

progress.dpc__progress {
  -webkit-appearance: none;
  appearance: none;
}

progress.dpc__progress::-webkit-progress-bar {
  background: var(--dpc-border);
  border-radius: 999px;
}

progress.dpc__progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--dpc-accent), #8b5cf6);
  border-radius: 999px;
  transition: width 0.25s ease;
}

progress.dpc__progress::-moz-progress-bar {
  background: var(--dpc-accent);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* 7. Gloss-Editor (.dpc-gloss__*)                                     */
/* ------------------------------------------------------------------ */

.dpc__gloss-mount {
  margin: 14px 0 4px;
}

/* §16.5: Dezenter Hinweis im rechten Material-Panel — der eigentliche Editor
   liegt links unter der Vorschau (.dpc__gloss-dock). */
#dpc-app .dpc__gloss-mount-note {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px dashed var(--dpc-accent-soft-2);
  border-radius: var(--dpc-radius-sm);
  background: var(--dpc-accent-soft);
  color: var(--dpc-accent-dark);
  font-size: 12.5px;
  line-height: 1.45;
}

/* §16.5: Andock-Bereich des Gloss-Editors DIREKT unter der 3D-Hauptvorschau
   (linke Spalte). Erbt die .dpc-gloss__*-Stile (unverändert), bekommt nur den
   Container-Rahmen. */
#dpc-app .dpc__gloss-dock {
  margin: 2px 0 0;
  padding: 12px;
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius);
  background: var(--dpc-bg);
  box-shadow: var(--dpc-shadow);
}

#dpc-app .dpc__gloss-dock .dpc__group-label {
  margin-top: 0;
}

#dpc-app .dpc__gloss-dock .dpc__gloss-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--dpc-muted);
}

/* ------------------------------------------------------------------ */
/* 7b. Motiv-Platzierung (§16.1, .dpc__place)                          */
/* ------------------------------------------------------------------ */

#dpc-app .dpc__place {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
}

#dpc-app .dpc__place-empty {
  margin: 0;
}

/* Druckbereich-Rechteck: Seitenverhältnis kommt inline aus printArea */
#dpc-app .dpc__place-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border: 2px dashed var(--dpc-accent-soft-2);
  border-radius: var(--dpc-radius-sm);
  background:
    linear-gradient(0deg, var(--dpc-surface), var(--dpc-surface)),
    repeating-conic-gradient(#eceef2 0% 25%, #ffffff 0% 50%);
  background-size: 100% 100%, 14px 14px;
  /* overflow VISIBLE: der Eck-Griff darf über den Rahmen hinausragen und bleibt
     immer greifbar. Den visuellen Beschnitt übernimmt die innere .dpc__place-clip. */
  overflow: visible;
  touch-action: none; /* Pointer-Drag braucht eigene Gesten */
  user-select: none;
}

/* Runder Druckbereich (Aschenbecher-Boden) */
#dpc-app .dpc__place-frame--round {
  border-radius: 50%;
}

/* Visuelle Beschnitt-Ebene: zeigt das Motiv-Thumbnail EXAKT so beschnitten, wie
   es gedruckt wird (rund beim Aschenbecher). Liegt unter der Interaktions-Box. */
#dpc-app .dpc__place-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit; /* übernimmt eckig/rund vom Rahmen */
  pointer-events: none;
}

/* Das beschnittene Motiv-Bild (Hintergrundbild = Thumbnail) */
#dpc-app .dpc__place-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Rundes Druckfeld (Aschenbecher): Motiv-Thumbnail kreisförmig beschneiden, damit
   die 2D-Vorschau 1:1 dem runden 3D-Bodendruck entspricht (WYSIWYG). */
/* §16.1 (v30): Rundes Druckfeld — das Motiv-BILD behält seine RECHTECKIGE Form
   (Sonderform), KEIN Ellipsen-Clip mehr. Den kreisförmigen Beschnitt übernimmt
   ausschließlich die runde .dpc__place-clip (overflow:hidden) — und zwar erst,
   wenn das Motiv über den Kreis hinausragt. background-size bleibt contain. */
#dpc-app .dpc__place-img--round {
  background-size: contain;
}

/* Interaktions-Box (verschieben/skalieren) — transparent, NICHT beschnitten,
   liegt über der Crop-Ebene und trägt den Eck-Griff. Gestrichelte Umrandung
   zeigt die volle Motivgröße. */
#dpc-app .dpc__place-motif {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  cursor: grab;
  touch-action: none;
  outline: 1px dashed var(--dpc-accent-soft-2);
  outline-offset: -1px;
}

#dpc-app .dpc__place-motif:active {
  cursor: grabbing;
}

/* Eck-Griff (unten rechts) zum Skalieren */
#dpc-app .dpc__place-handle {
  position: absolute;
  /* §Y2: Position kommt aus den Ecken-Modifiern (--nw/--ne/--sw/--se). Fallback: unten rechts. */
  right: -9px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dpc-accent);
  border: 2px solid #ffffff;
  box-shadow: var(--dpc-shadow);
  cursor: nwse-resize;
  touch-action: none;
}
/* §Y2: Griffe an allen vier Ecken — Ziehen von überall (uniformer, zentrumsbasierter Resize). */
#dpc-app .dpc__place-handle--nw { top: -9px; left: -9px; right: auto; bottom: auto; cursor: nwse-resize; }
#dpc-app .dpc__place-handle--ne { top: -9px; right: -9px; left: auto; bottom: auto; cursor: nesw-resize; }
#dpc-app .dpc__place-handle--sw { bottom: -9px; left: -9px; right: auto; top: auto; cursor: nesw-resize; }
#dpc-app .dpc__place-handle--se { bottom: -9px; right: -9px; left: auto; top: auto; cursor: nwse-resize; }

#dpc-app .dpc__place-rot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--dpc-muted);
}

#dpc-app .dpc__place-rot-value {
  min-width: 44px;
  font-variant-numeric: tabular-nums;
}

#dpc-app .dpc__place-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#dpc-app .dpc-gloss__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

#dpc-app .dpc-gloss__group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#dpc-app .dpc-gloss__rangelabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--dpc-muted);
}

#dpc-app .dpc-gloss__tool,
#dpc-app .dpc-gloss__auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid var(--dpc-border);
  border-radius: var(--dpc-radius-sm);
  background: var(--dpc-bg);
  color: var(--dpc-ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    color 0.15s ease;
}

#dpc-app .dpc-gloss__tool:hover,
#dpc-app .dpc-gloss__auto:hover {
  border-color: var(--dpc-accent);
  color: var(--dpc-accent);
}

#dpc-app .dpc-gloss__tool.is-active {
  border-color: var(--dpc-accent);
  background: var(--dpc-accent);
  color: #ffffff;
}

#dpc-app .dpc-gloss__auto {
  background: var(--dpc-surface);
  border-style: dashed;
}

#dpc-app .dpc-gloss__auto.is-active {
  border-color: var(--dpc-accent);
  border-style: solid;
  background: var(--dpc-accent-soft);
  color: var(--dpc-accent);
}

#dpc-app input.dpc-gloss__range {
  flex: 0 1 140px;
}

/* Maskenfläche: Schachbrett zeigt Transparenz, weiß = Lack */
#dpc-app .dpc-gloss__canvas-wrap {
  position: relative;
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius-sm);
  overflow: hidden;
  background: repeating-conic-gradient(#eceef2 0% 25%, #ffffff 0% 50%);
  background-size: 12px 12px;
  box-shadow: var(--dpc-shadow);
}

#dpc-app canvas.dpc-gloss__canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}

#dpc-app .dpc-gloss__canvas--overlay {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------ */
/* 8. Menge & Preis                                                    */
/* ------------------------------------------------------------------ */

input.dpc__qty {
  width: 130px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--dpc-border);
  border-radius: var(--dpc-radius-sm);
  background: var(--dpc-bg);
  font-size: 17px;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.dpc__qty:focus {
  outline: none;
  border-color: var(--dpc-accent);
  box-shadow: 0 0 0 3px var(--dpc-accent-soft);
}

#dpc-price-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius);
  background: var(--dpc-surface);
}

.dpc-price__total {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dpc-ink);
  line-height: 1.2;
}

.dpc-price__unit {
  margin-top: 2px;
  font-size: 14px;
  color: var(--dpc-muted);
}

/* §111: Druckstellen-Hinweis unter dem Preis (wofür der Preis gilt). */
.dpc-price__location {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dpc-accent, #6d28d9);
}

table.dpc-price__tiers {
  width: 100%;
  margin: 14px 0 0;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--dpc-bg);
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius-sm);
  overflow: hidden;
  /* border-radius auf Tabellen braucht separates Clipping */
  clip-path: inset(0 round var(--dpc-radius-sm));
}

.dpc-price__tiers th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dpc-muted);
  background: var(--dpc-surface);
  border-bottom: 1px solid var(--dpc-border);
}

.dpc-price__tiers td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--dpc-border);
}

.dpc-price__tiers tbody tr:last-child td {
  border-bottom: 0;
}

/* Zebra */
.dpc-price__tiers tbody tr:nth-child(even) {
  background: var(--dpc-surface);
}

/* Klickbare Staffel-Zeilen */
.dpc-price__tiers tbody tr[data-qty] {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dpc-price__tiers tbody tr[data-qty]:hover {
  background: var(--dpc-accent-soft);
}

.dpc-price__tiers tbody tr.is-active {
  background: var(--dpc-accent-soft);
  box-shadow: inset 3px 0 0 var(--dpc-accent);
}

.dpc-price__tiers tbody tr.is-active td {
  font-weight: 600;
  color: var(--dpc-accent-dark);
}

/* Ersparnis-Spalte („−62 %"): grün + fett */
.dpc-price__tiers td:last-child,
.dpc-price__tiers .dpc-price__save {
  color: var(--dpc-ok);
  font-weight: 700;
  text-align: right;
}

.dpc-price__tiers th:last-child {
  text-align: right;
}

.dpc-price__note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--dpc-muted);
}

/* ------------------------------------------------------------------ */
/* 9. Zusammenfassung, Warenkorb-Button + Vertrauenshinweise           */
/* ------------------------------------------------------------------ */

/* --- Kompakte Auswahl-Zusammenfassung direkt über den Aktionen (§15.3) */

#dpc-app .dpc__summary-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--dpc-border);
  border-radius: 12px;
  background: var(--dpc-surface);
}

#dpc-app .dpc__summary-bar:empty {
  display: none;
}

#dpc-app .dpc__summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid var(--dpc-border);
  border-radius: 999px;
  background: var(--dpc-bg);
  color: var(--dpc-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--dpc-shadow);
}

.dpc__actions {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#dpc-app button.dpc__add {
  display: block;
  width: 100%;
  padding: 16px 24px;
  min-height: 56px;
  border: 0;
  border-radius: var(--dpc-radius);
  background: var(--dpc-accent);
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.3);
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}

#dpc-app button.dpc__add:hover:not(:disabled):not(.is-disabled) {
  background: var(--dpc-accent-dark);
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.38);
  transform: translateY(-1px);
}

#dpc-app button.dpc__add:active:not(:disabled):not(.is-disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.3);
}

#dpc-app button.dpc__add:disabled,
#dpc-app button.dpc__add.is-disabled {
  background: #d1d5db;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.dpc__trust {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--dpc-muted);
}

.dpc__trust > * {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.dpc__trust > *::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--dpc-ok);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 10. Allgemeine Zustände                                             */
/* ------------------------------------------------------------------ */

#dpc-app .is-disabled,
#dpc-app button:disabled:not(.dpc__add),
#dpc-app input:disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* Busy-Overlay mit Spinner auf #dpc-app */
#dpc-app.dpc--busy,
.dpc--busy {
  pointer-events: none;
  cursor: wait;
}

.dpc--busy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(1.5px);
  border-radius: var(--dpc-radius);
}

.dpc--busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 51;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 4px solid var(--dpc-accent-soft-2);
  border-top-color: var(--dpc-accent);
  animation: dpc-spin 0.8s linear infinite;
}

@keyframes dpc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------------ */
/* 11. Toasts (fixed unten rechts, im dpc-Namensraum)                  */
/* ------------------------------------------------------------------ */

.dpc-toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
  font-family: var(--dpc-font);
}

.dpc-toast-region .dpc__toast,
#dpc-app .dpc__toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--dpc-radius-sm);
  background: var(--dpc-ink);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--dpc-shadow-lg);
  border-left: 4px solid var(--dpc-accent);
  animation: dpc-toast-in 0.25s ease both;
  max-width: 100%;
}

/* Toasts, die direkt in #dpc-app gerendert werden, ebenfalls fixed */
#dpc-app > .dpc__toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  max-width: min(380px, calc(100vw - 40px));
}

.dpc-toast-region .dpc__toast--ok,
#dpc-app .dpc__toast--ok {
  border-left-color: var(--dpc-ok);
}

.dpc-toast-region .dpc__toast--warn,
#dpc-app .dpc__toast--warn {
  border-left-color: var(--dpc-warn);
}

.dpc-toast-region .dpc__toast--err,
.dpc-toast-region .dpc__toast--error,
#dpc-app .dpc__toast--err,
#dpc-app .dpc__toast--error {
  border-left-color: var(--dpc-err);
}

.dpc-toast-region .dpc__toast button,
#dpc-app .dpc__toast button {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 28px;
  min-height: 28px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.dpc-toast-region .dpc__toast button:hover,
#dpc-app .dpc__toast button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

@keyframes dpc-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------ */
/* 12. Responsiv (≤ 900 px: einspaltig, Preview oben)                  */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .dpc__layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .dpc__preview {
    position: sticky;
    top: 0;
    z-index: 10;
    order: -1;
    gap: 8px;
    padding: 8px 0 10px;
    background: var(--dpc-bg);
    box-shadow: 0 8px 16px -12px rgba(17, 24, 39, 0.25);
  }

  /* §16.5: Bei geöffnetem Gloss-Editor auch mobil nicht sticky, sonst klebt der
     angedockte Editor außerhalb des sichtbaren Bereichs. */
  #dpc-app.dpc--gloss-open .dpc__preview {
    position: static;
    box-shadow: none;
  }

  .dpc__canvas-wrap {
    width: min(100%, 60vh);
    max-height: 60vh;
    margin-left: auto;
    margin-right: auto;
  }

  .dpc__preview-hint {
    font-size: 12px;
  }

  #dpc-app .dpc__preview-tools {
    top: 10px;
    right: 10px;
    padding: 4px;
  }

  .dpc-price__total {
    font-size: 24px;
  }

  .dpc__step.is-open .dpc__step-body {
    max-height: 3600px;
  }

  .dpc-toast-region,
  #dpc-app > .dpc__toast {
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 480px) {
  #dpc-app {
    font-size: 14px;
  }

  #dpc-app .dpc__step-head {
    padding: 14px;
  }

  .dpc__step.is-open .dpc__step-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dpc__materials,
  .dpc__finishes {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }

  #dpc-app .dpc__chip {
    padding-left: 14px;
    padding-right: 14px;
  }

  #dpc-app .dpc__summary-bar {
    padding: 10px 12px;
  }
}

/* ------------------------------------------------------------------ */
/* 13. Reduzierte Bewegung (prefers-reduced-motion)                    */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  #dpc-app *,
  #dpc-app *::before,
  #dpc-app *::after,
  .dpc-toast-region *,
  .dpc-toast-region *::before,
  .dpc-toast-region *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .dpc--busy::after {
    animation: none;
    border-color: var(--dpc-accent);
    border-top-color: var(--dpc-accent-soft-2);
  }

  /* Hover-Lift ohne Bewegung (Spezifität muss die Basisregeln schlagen) */
  #dpc-app .dpc__card:hover,
  #dpc-app .dpc__colordot:hover,
  #dpc-app button.dpc__add:hover:not(:disabled):not(.is-disabled) {
    transform: none;
  }

  #dpc-app input[type="range"]::-webkit-slider-thumb:hover {
    transform: none;
  }
}

/* v6: Hintergrund-Entfernung im Upload-Schritt */
#dpc-app .dpc__bg-tools { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#dpc-app .dpc__bg-btn::before { content: "\2702"; margin-right: 6px; } /* Schere */
#dpc-app .dpc__bg-btn.is-active { border-color: var(--dpc-accent); background: var(--dpc-accent-soft); color: var(--dpc-accent); }
#dpc-app .dpc__bg-btn { align-self: flex-start; }
/* §X4: Modus-Wahl (Weiß/Schwarz/Transparenz) + Sensitivity */
#dpc-app .dpc__bg-modes { display: flex; gap: 14px; flex-wrap: wrap; }
#dpc-app .dpc__bg-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
#dpc-app .dpc__bg-mode input { accent-color: var(--dpc-accent); margin: 0; }
#dpc-app .dpc__bg-sens { display: flex; align-items: center; gap: 8px; }
#dpc-app .dpc__bg-sens .dpc__input-label { font-size: 12px; color: var(--dpc-muted, #666); white-space: nowrap; }
#dpc-app .dpc__bg-sens-range { flex: 1; min-width: 120px; max-width: 220px; }
/* §X5: Test-Bestellung (Admin) — Button + Ergebnis */
#dpc-app .dpc__testorder-btn { border-style: dashed; }
#dpc-app .dpc__testorder-result { margin: 8px 0 0; font-size: 13px; color: var(--dpc-muted, #555); }
#dpc-app .dpc__testorder-result.is-error { color: #b32d2e; }
#dpc-app .dpc__testorder-result a { font-weight: 600; }