/* Die DYOF-Logoschrift: aus den Buchstaben des Rundlogos gebaut. Sie wird
   erst geladen, wenn ein Kunde sie waehlt (document.fonts.load im Skript). */
@font-face {
  font-family: "DYOF Neon";
  src: url("../fonts/DYOF-Neon-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* DYOF Tassenkonfigurator – Oberfläche
   Leitgedanke: die Tasse ist die Hauptansicht, alles andere ist ein schmaler
   Streifen mit drei Schritten. Was der Kunde nicht in den ersten zehn Sekunden
   braucht, steht hinter „Feineinstellung" oder „Druckfläche prüfen". */

.dyof-mug {
  --mug-blue: #04C7FD;
  --mug-pink: #FC3177;
  --mug-bg: #03030A;
  --mug-panel: #0A0A14;
  --mug-card: #0E0E1A;
  --mug-line: #1E1E34;
  --mug-line-strong: #2E2E4A;
  --mug-text: #F5F7FA;
  --mug-muted: #B8C0D4;
  --mug-warn: #FFC857;
  --mug-stage: #F4F5F8;

  container-type: inline-size;
  position: relative;
  width: 100%;
  color: var(--mug-text);
  background: var(--mug-bg);
  border: 1px solid var(--mug-line);
  font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif;
  line-height: 1.55;
}

.dyof-mug *,
.dyof-mug *::before,
.dyof-mug *::after { box-sizing: border-box; }

/* Ein Element mit `hidden` muss auch wirklich verschwinden. Regeln wie
   `.dyof-mug-text-row { display: grid }` stehen ueber dem eingebauten
   `[hidden] { display: none }` des Browsers - die Zeile blieb dann stehen,
   obwohl sie im Code als versteckt galt. Genau das hat den unwirksamen
   Schattierungsschalter sichtbar gelassen. */
.dyof-mug [hidden] { display: none !important; }

.dyof-mug button {
  min-height: 44px;
  padding: 10px 14px;
  color: var(--mug-text);
  background: #141428;
  border: 1px solid var(--mug-line-strong);
  border-radius: 8px;
  font: inherit;
  font-size:.92rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.dyof-mug button:hover { border-color: var(--mug-blue); }
.dyof-mug button:focus-visible { outline: 3px solid rgba(4, 199, 253, .5); outline-offset: 2px; }
.dyof-mug button[disabled] { opacity: .45; cursor: not-allowed; }

.dyof-mug-gate {
  margin: 0;
  padding: 10px 18px;
  color: #1A1200;
  background: var(--mug-warn);
  font-size:.8125rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-align: center;
}

/* ---------------------------------------------------------------- intro
   Aufbau nach DYOF_LAYOUT_SYSTEM_R1: Ruecklink, pinkes Informationsband,
   Markenkicker, dreiteilige Hauptzeile Blau/Blau/Pink, Einleitung. */

.dyof-mug-return { padding: 16px clamp(18px, 3.4vw, 38px); border-bottom: 1px solid var(--mug-line-strong); background: #05050D; }
.dyof-mug-return a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mug-blue); font-size:.82rem; font-weight: 700; text-decoration: none; text-underline-offset: .25em; }
.dyof-mug-return a:hover { text-decoration: underline; }
.dyof-mug-return a:focus-visible { outline: 2px solid var(--mug-blue); outline-offset: 4px; }

.dyof-mug-band {
  margin: 0;
  padding: 8px 18px;
  color: #FFFFFF;
  background: var(--mug-pink);
  font-size:.8125rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
}

.dyof-mug-intro { padding: clamp(20px, 3.4vw, 38px) clamp(18px, 3.4vw, 38px) 0; }
.dyof-mug-kicker { margin: 0 0 12px; font-size:.84rem; font-weight: 700; line-height: 1.5; letter-spacing: .14em; }
.dyof-brand-blue { color: var(--mug-blue); }
.dyof-brand-pink { color: var(--mug-pink); }
.dyof-brand-tail { color: var(--mug-text); }
.dyof-mug-intro h1 {
  margin: 0 0 10px;
  font-family: Impact, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.9rem, 5vw, 3.8rem);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.05;
  text-transform: uppercase;
}
/* Die Einleitung darf die Seitenbreite nutzen. 760 px wie beim
   Button-Konfigurator; auf schmalen Geraeten bricht sie ohnehin um. */
.dyof-mug-lede { max-width: 760px; margin: 0; color: var(--mug-muted); font-size: 1.02rem; line-height: 1.6; }

/* ------------------------------------------------------------ workbench */

.dyof-mug-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
}

@container (min-width: 880px) {
  .dyof-mug-workbench { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); align-items: start; }
}


.dyof-mug-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mug-stage);
  border: 1px solid var(--mug-line-strong);
  border-radius: 12px;
  overflow: hidden;
}

.dyof-mug-viewport { position: relative; display: block; }

.dyof-mug-canvas {
  display: block;
  width: 100%;
  height: clamp(340px, 58vh, 560px);
  touch-action: none;
  cursor: grab;
}

.dyof-mug-canvas:active { cursor: grabbing; }
.dyof-mug-canvas.is-over-motif { cursor: move; }
.dyof-mug-canvas:focus-visible { outline: 3px solid var(--mug-blue); outline-offset: -3px; }
.dyof-mug-canvas.is-webgl-blocked { background: repeating-linear-gradient(135deg, #e7e9ee 0 12px, #dde0e8 12px 24px); }

.dyof-mug-coach {
  /* unten, nicht oben: oben sitzt die Motivleiste ueber dem gewaehlten Motiv,
     und beide uebereinander macht beide unlesbar */
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  max-width: 44ch;
  margin: 0;
  padding: 9px 11px;
  color: #0B0B16;
  background: rgba(255, 255, 255, .9);
  border-left: 3px solid var(--mug-blue);
  border-radius: 6px;
  font-size:.82rem;
  pointer-events: none;
  transition: opacity .3s ease;
}

.dyof-mug-coach strong { margin-right: .35em; }
.dyof-mug-coach[hidden] { display: none; }
.dyof-mug-stage.is-touched .dyof-mug-coach { opacity: 0; }

.dyof-mug-stage-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px;
  background: #E9EBF0;
  border-top: 1px solid rgba(16, 16, 30, .12);
}

.dyof-mug-stage-tools button {
  min-height: 44px;
  padding: 6px 11px;
  color: #10101E;
  background: rgba(255, 255, 255, .92);
  border-color: rgba(16, 16, 30, .18);
  font-size:.82rem;
}

.dyof-mug-stage-tools button:hover { border-color: #10101E; }
.dyof-mug-flat-open { margin-left: auto; font-weight: 700; }

.dyof-mug-motif-tools {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(10, 10, 20, .92);
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.dyof-mug-motif-tools[hidden] { display: none; }

.dyof-mug-motif-tools button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  font-size: 1.05rem;
  line-height: 1;
}

.dyof-mug-motif-tools button:hover { background: #1E1E38; border-color: var(--mug-blue); }
.dyof-mug-motif-tools [data-dyof-motif="rotate"] { cursor: grab; }
.dyof-mug-motif-tools [data-dyof-motif="remove"] { color: #FF9DB8; }

.dyof-mug-notice {
  margin: 0;
  padding: 10px 12px;
  color: #1A1200;
  background: var(--mug-warn);
  font-size:.82rem;
  font-weight: 600;
}

.dyof-mug-notice[hidden] { display: none; }

/* ----------------------------------------------------------- Zonenlegende
   Farben und Muster wie im Button-Konfigurator: blau technisch, schraffiert
   Warnung, pink klarer Innenbereich. */

.dyof-mug-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px 0; background: #E9EBF0; color: #10101E; font-size:.8125rem; font-weight: 600; line-height: 1.45; }
.dyof-mug-legend span { display: flex; align-items: center; gap: 5px; }
.dyof-mug-key { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.dyof-mug-key-tech { border: 1px solid rgba(4, 199, 253, .7); background: rgba(4, 199, 253, .12); }
.dyof-mug-key-warn { border: 1px dashed rgba(16, 16, 30, .55); background: repeating-linear-gradient(135deg, rgba(16,16,30,.38) 0 2px, rgba(16,16,30,.08) 2px 4px); }
.dyof-mug-key-safe { border: 1px solid rgba(252, 49, 119, .8); background: rgba(252, 49, 119, .08); }
.dyof-mug-guide { margin: 0; padding: 0 12px 10px; background: #E9EBF0; color: #35354A; font-size:.8125rem; line-height: 1.55; }
.dyof-mug-guide > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 0;
  color: #10101E;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.dyof-mug-guide > summary::-webkit-details-marker { display: none; }
.dyof-mug-guide > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.dyof-mug-guide[open] > summary::before { transform: rotate(90deg); }
.dyof-mug-guide > summary:focus-visible { outline: 2px solid var(--mug-blue); outline-offset: 2px; }
.dyof-mug-guide > p { margin: 0 0 4px; }

/* ---------------------------------------------------------------- steps */

.dyof-mug-steps { display: flex; flex-direction: column; gap: 14px; }

.dyof-mug-step {
  padding: 16px;
  background: var(--mug-card);
  border: 1px solid var(--mug-line);
  border-radius: 12px;
}

.dyof-mug-step h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size:.96rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.dyof-mug-step-no {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #03030A;
  background: var(--mug-blue);
  border-radius: 50%;
  font-size:.82rem;
  font-weight: 900;
}

.dyof-mug-variants { display: flex; flex-direction: column; gap: 8px; }

.dyof-mug-variant {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border-color: var(--mug-line);
}

.dyof-mug-variant[aria-checked="true"] {
  background: rgba(4, 199, 253, .1);
  border-color: var(--mug-blue);
}

.dyof-mug-variant b { display: block; font-size:.92rem; font-weight: 700; }
.dyof-mug-variant small { display: block; color: var(--mug-muted); font-size:.8125rem; }
.dyof-mug-variant.is-unavailable { opacity: .55; }

.dyof-mug-swatch {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
}

.dyof-mug-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dyof-mug-primary { color: #03030A !important; background: linear-gradient(135deg, var(--mug-blue), #7FE6FF) !important; border-color: var(--mug-blue) !important; font-weight: 800; }
.dyof-mug-privacy { margin: 10px 0 0; color: var(--mug-muted); font-size:.8125rem; }

.dyof-mug-motifs { counter-reset: dyof-layer; margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dyof-mug-motifs:empty { display: none; }

.dyof-mug-motif {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: var(--mug-panel);
  border: 1px solid var(--mug-line);
  border-radius: 8px;
}

.dyof-mug-motif.is-active { border-color: var(--mug-blue); }
/* Der Ebenenname darf umbrechen. Frueher wurde er nach 18 Zeichen
   abgeschnitten; zwei Textebenen hiessen dann beide gleich. */
.dyof-mug-motif-pick { flex: 1; min-height: 36px; padding: 6px; text-align: left; background: transparent; border-color: transparent; font-size:.86rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.dyof-mug-motif-thumb { flex: none; width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 5px; }
.dyof-mug-motif-drop { min-width: 40px; min-height: 36px; padding: 0; color: #FF9DB8; background: transparent; border-color: transparent; }

.dyof-mug-text-edit { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.dyof-mug-text-edit[hidden] { display: none; }
.dyof-mug-text-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }

.dyof-mug label { display: grid; gap: 5px; color: var(--mug-muted); font-size:.875rem; }
.dyof-mug input[type="text"],
.dyof-mug input[type="number"],
.dyof-mug select {
  min-height: 44px;
  padding: 9px 10px;
  color: var(--mug-text);
  background: #07070F;
  border: 1px solid var(--mug-line-strong);
  border-radius: 8px;
  font: inherit;
  font-size:.92rem;
}

.dyof-mug input[type="color"] { width: 54px; height: 44px; padding: 3px; background: #07070F; border: 1px solid var(--mug-line-strong); border-radius: 8px; }
.dyof-mug input[type="range"] { width: 100%; min-height: 34px; accent-color: var(--mug-blue); }

.dyof-mug-fine { margin-top: 12px; }
.dyof-mug-fine[hidden] { display: none; }
.dyof-mug-fine summary { min-height: 40px; padding: 9px 0; color: var(--mug-blue); font-size:.84rem; font-weight: 700; cursor: pointer; }
.dyof-mug-fine label { margin-top: 10px; }
.dyof-mug-fine output { color: var(--mug-text); font-variant-numeric: tabular-nums; }
.dyof-mug-fine-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dyof-mug-fine-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.dyof-mug-fine-row-3 button { min-height: 44px; line-height: 1.25; white-space: normal; }
.dyof-mug-fine-group { margin-top: 12px; }
.dyof-mug-fine-label { display: block; font-size: .8125rem; font-weight: 600; }

.dyof-mug-quantity { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; }
.dyof-mug-quantity button { padding: 0; font-size: 1.2rem; font-weight: 800; }
.dyof-mug-quantity input { text-align: center; font-variant-numeric: tabular-nums; }

.dyof-mug-price { margin-top: 14px; }
.dyof-mug-price-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dyof-mug-price-main strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dyof-mug-price-main span { color: var(--mug-muted); font-size:.82rem; font-variant-numeric: tabular-nums; }
.dyof-mug-price-next { margin: 8px 0 0; color: var(--mug-blue); font-size:.875rem; font-weight: 600; }
.dyof-mug-price-note { margin: 6px 0 0; color: var(--mug-muted); font-size:.8125rem; }
.dyof-mug-price-blocked { margin: 0; color: var(--mug-warn); font-size:.84rem; font-weight: 600; }

/* --------------------------------------------------------- Motivbibliothek */

.dyof-mug-library { margin-top: 12px; }
.dyof-mug-library-head { margin: 0 0 8px; color: var(--mug-muted); font-size:.8125rem; font-weight: 600; }
.dyof-mug-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.dyof-mug-library-grid button {
  min-height: 64px;
  padding: 6px;
  background: #06060E;
  border-color: var(--mug-line-strong);
  border-radius: 9px;
}
.dyof-mug-library-grid img { display: block; width: 100%; height: 48px; object-fit: contain; }

/* ------------------------------------------------------------- Textsatz */

.dyof-mug .dyof-mug-text-edit textarea {
  width: 100%;
  min-height: 72px;
  padding: 9px 11px;
  color: var(--mug-text);
  font: inherit;
  background: #06060E;
  border: 1px solid var(--mug-line-strong);
  border-radius: 9px;
  resize: vertical;
}

.dyof-mug .dyof-mug-text-edit textarea:focus-visible { outline: 2px solid var(--mug-blue); outline-offset: 1px; }
.dyof-mug .dyof-mug-text-edit label em { font-style: normal; font-weight: 400; opacity: .7; }

.dyof-mug-align { display: flex; gap: 6px; margin-top: 10px; }
.dyof-mug-align button { flex: 1 1 0; min-height: 40px; padding: 6px 4px; font-size:.8125rem; }
.dyof-mug-align button.is-active { color: #03030A !important; background: var(--mug-blue) !important; border-color: var(--mug-blue) !important; font-weight: 700; }

/* --------------------------------------------------------- Staffelpreise */

.dyof-mug-price-lead { margin: 8px 0 0; color: var(--mug-text); font-size:.8125rem; }
.dyof-mug-price-open { width: 100%; margin-top: 10px; font-size:.82rem; font-weight: 600; }

.dyof-mug-price-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dyof-mug-price-tab { flex: 1 1 200px; padding: 8px 12px; font-size:.875rem; font-weight: 600; text-align: left; white-space: normal; }
.dyof-mug-price-tab b { display: block; font-weight: 700; line-height: 1.3; }
.dyof-mug-price-tab small { display: block; margin-top: 2px; color: var(--mug-muted); font-size:.78rem; font-weight: 400; }
.dyof-mug-price-tab.is-active small { color: rgba(3, 3, 10, .7); }
.dyof-mug-price-tab.is-active { color: #03030A !important; background: var(--mug-blue) !important; border-color: var(--mug-blue) !important; }

.dyof-mug-price-tables { overflow-x: auto; }
.dyof-mug-price-table { width: 100%; border-collapse: collapse; font-size:.84rem; }
.dyof-mug-price-table th,
.dyof-mug-price-table td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--mug-line); }
.dyof-mug-price-table thead th { color: var(--mug-muted); font-size:.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dyof-mug-price-table tbody th { color: var(--mug-text); font-weight: 600; text-align: left; }
.dyof-mug-price-table tr.is-current th,
.dyof-mug-price-table tr.is-current td { color: #03030A; background: var(--mug-blue); }
.dyof-mug-price-table tr.is-current th:first-child { border-radius: 8px 0 0 8px; }
.dyof-mug-price-table tr.is-current td:last-child { border-radius: 0 8px 8px 0; }

/* ------------------------------------------------------------- Anfrage */

.dyof-mug-step-note { margin: 0 0 12px; color: var(--mug-muted); font-size:.875rem; line-height: 1.5; }

.dyof-mug .dyof-mug-field { display: block; margin-bottom: 10px; }
.dyof-mug-field > span { display: block; margin-bottom: 5px; color: var(--mug-muted); font-size:.8125rem; font-weight: 600; }
.dyof-mug-field em { font-style: normal; font-weight: 400; opacity: .7; }
.dyof-mug-field input,
.dyof-mug-field textarea {
  width: 100%;
  padding: 9px 11px;
  color: var(--mug-text);
  font: inherit;
  background: #06060E;
  border: 1px solid var(--mug-line-strong);
  border-radius: 9px;
  resize: vertical;
}
.dyof-mug-field input:focus-visible,
.dyof-mug-field textarea:focus-visible { outline: 2px solid var(--mug-blue); outline-offset: 1px; }

.dyof-mug .dyof-mug-check { display: flex; gap: 9px; align-items: flex-start; min-height: 44px; margin-top: 9px; color: var(--mug-muted); font-size:.8125rem; line-height: 1.45; cursor: pointer; }
.dyof-mug-check input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--mug-blue); }
.dyof-mug-check em { font-style: normal; opacity: .7; }

/* Das Anfrageformular wird nur befuellt, nie angezeigt. Es bleibt im
   Dokument, damit Contact Form 7 seinen Serverschutz behaelt. */
.dyof-mug-cf7 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }

.dyof-mug-cta { width: 100%; color: #03030A !important; background: linear-gradient(135deg, var(--mug-pink), #FF7AA8) !important; border-color: var(--mug-pink) !important; font-size: 1rem; font-weight: 800; }
.dyof-mug-cta:disabled { opacity: .45; cursor: not-allowed; }
.dyof-mug-cta-note { margin: 0; color: var(--mug-muted); font-size:.8125rem; text-align: center; }
.dyof-mug-error { margin: 0; padding: 9px 11px; color: #FFD9E4; font-size:.875rem; background: rgba(252, 49, 119, .14); border: 1px solid var(--mug-pink); border-radius: 9px; }
.dyof-mug-ok { margin: 0; padding: 9px 11px; color: #D6F6FF; font-size:.84rem; font-weight: 600; background: rgba(4, 199, 253, .12); border: 1px solid var(--mug-blue); border-radius: 9px; }

/* ------------------------------------------------------- Druckfläche 2D */

.dyof-mug-flat {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(3, 3, 10, .82);
}

.dyof-mug-flat[hidden] { display: none; }

.dyof-mug-flat-inner {
  width: min(100%, 900px);
  max-height: 100%;
  overflow: auto;
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--mug-card);
  border: 1px solid var(--mug-line-strong);
  border-radius: 14px;
}

.dyof-mug-flat-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.dyof-mug-flat-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.dyof-mug-flat-head p { max-width: 58ch; margin: 6px 0 0; color: var(--mug-muted); font-size:.86rem; }
.dyof-mug-flat-close { min-width: 44px; padding: 0 12px; }

.dyof-mug-sheet {
  position: relative;
  aspect-ratio: 200 / 80;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--mug-blue);
  border-radius: 4px;
  touch-action: none;
}

.dyof-mug-handle-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #7A1733;
  background: repeating-linear-gradient(135deg, rgba(252, 49, 119, .22) 0 7px, rgba(252, 49, 119, .07) 7px 14px);
  font-size:.75rem;
  font-weight: 800;
  letter-spacing: .08em;
  pointer-events: none;
}

.dyof-mug-handle-zone span { writing-mode: vertical-rl; }
.dyof-mug-handle-zone--left { left: 0; border-right: 2px solid var(--mug-pink); }
.dyof-mug-handle-zone--right { right: 0; border-left: 2px solid var(--mug-pink); }

.dyof-mug-safe { position: absolute; z-index: 1; border: 1px dashed rgba(3, 3, 10, .35); pointer-events: none; }
.dyof-mug-sheet-layers { position: absolute; inset: 0; z-index: 3; }

.dyof-mug-sheet-layer {
  position: absolute;
  transform-origin: center;
  outline: 2px solid transparent;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.dyof-mug-sheet-layer img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.dyof-mug-sheet-layer.is-active { outline-color: var(--mug-blue); outline-offset: 2px; }
.dyof-mug-sheet-note { margin: 14px 0 0; color: var(--mug-muted); font-size:.875rem; }

.dyof-mug-terms { margin: 0; padding: 0 clamp(18px, 3.4vw, 38px) clamp(18px, 3vw, 30px); color: var(--mug-muted); font-size:.8125rem; }

.dyof-mug-configurator-blocked { padding: 18px; color: #1A1200; background: #FFC857; font-weight: 700; }

@container (max-width: 600px) {
  .dyof-mug-add { grid-template-columns: 1fr; }
  .dyof-mug-stage-tools { gap: 5px; }
  .dyof-mug-stage-tools button { flex: 1 1 auto; }
  .dyof-mug-flat-open { flex-basis: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dyof-mug *, .dyof-mug *::before, .dyof-mug *::after { transition: none !important; animation: none !important; }
}

/* Die Buehne bleibt stehen, waehrend der Kunde die Schritte bedient. Sonst
   scrollt er beim Verstellen von der Wirkung weg und sieht nicht, was seine
   Aenderung tut. Diese Regeln stehen bewusst am Dateiende: gleich spezifisch
   wie die Basisregeln, also entscheidet die Reihenfolge. */
@container (min-width: 880px) {
  .dyof-mug-stage { position: sticky; top: 14px; }
}

@container (max-width: 879px) {
  .dyof-mug-stage { position: sticky; top: 0; z-index: 5; box-shadow: 0 12px 24px rgba(3, 3, 10, .6); }
  .dyof-mug-canvas { height: clamp(220px, 36vh, 320px); }
  .dyof-mug-coach { padding: 8px 10px; font-size:.8125rem; }
  .dyof-mug-stage-tools button { flex: 1 1 auto; }
}

/* Ebenenliste: auch bei einem Eintrag als Liste erkennbar (0.7.3-r1) */
.dyof-mug-motifs-head { margin: 14px 0 0; font-size: 13px; font-weight: 600; opacity: .75; }
.dyof-mug-hint { margin: 6px 0 0; font-size: 12px; opacity: .7; }
.dyof-mug-motifs .dyof-mug-motif { border: 1px solid rgba(128,128,128,.35); border-radius: 8px; padding: 2px 6px; }
.dyof-mug-motifs .dyof-mug-motif-pick::before { counter-increment: dyof-layer; content: counter(dyof-layer) ". "; opacity: .6; }

/* Zweistufige Auswahl: Farbreihe unter der geoeffneten Produktlinie (0.8.0-r1) */
/* Die Ausfuehrungen einer Linie. Die ganze anklickbare Flaeche traegt die
   Farbe des Rohlings, nicht nur ein Streifen darin - so ist ohne Lesen
   erkennbar, was man waehlt. Der Name steht im Feld, in Schwarz oder Weiss,
   je nachdem was auf der Farbe lesbar bleibt. */
.dyof-mug-shades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  padding: 10px 6px 4px;
}

.dyof-mug .dyof-mug-shade {
  min-height: 46px;
  padding: 8px 10px;
  color: #03030A;
  border: 2px solid rgba(3, 3, 10, .3);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  font-size: .8125rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.dyof-mug-shade span { display: block; line-height: 1.25; }
.dyof-mug .dyof-mug-shade.is-dark { color: #F5F7FA; border-color: rgba(245, 247, 250, .28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.dyof-mug .dyof-mug-shade.is-active { outline: 3px solid var(--mug-blue); outline-offset: 2px; border-color: var(--mug-blue); }
.dyof-mug .dyof-mug-shade.is-unavailable { opacity: .45; cursor: not-allowed; }

/* Pflegehinweis der Linie: glaenzend ist spuelmaschinenfest, matt und Glas
   nicht. Das gehoert an die Auswahl, nicht ins Kleingedruckte. */
.dyof-mug-line-care {
  margin: 2px 6px 10px;
  color: var(--mug-muted);
  font-size: .8125rem;
  line-height: 1.4;
}

/* Eine Farbe je Textzeile. Erscheint erst ab der zweiten Zeile. */
.dyof-mug-line-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.dyof-mug-line-color {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--mug-line);
  border-radius: 8px;
  font-size: .8125rem;
}

.dyof-mug-line-color span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dyof-mug-line-color input { width: 42px; min-height: 30px; padding: 0; }

.dyof-mug-brand-preset { flex: 0 0 auto; font-weight: 700; }

/* Der Markenschriftzug als fertiges Stueck, direkt bei den anderen Wegen,
   eine Ebene anzulegen. Kein Schalter, keine Staerke - ein Klick. */
.dyof-mug-add--brand { grid-template-columns: auto; justify-items: start; margin-top: 8px; }
.dyof-mug-add--brand small { grid-column: 1 / -1; margin-top: 2px; color: var(--mug-muted); font-size: .8125rem; line-height: 1.35; }
.dyof-mug-brand-preset { font-weight: 700; }

/* Die beiden Markenfarben zum Anklicken, damit sie nicht gesucht werden. */
.dyof-mug .dyof-mug-brand-swatch {
  flex: 0 0 auto;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
}

.dyof-mug .dyof-mug-brand-swatch:hover { border-color: #F5F7FA; }

/* Der klare Innenbereich in der Abwicklung. Gestrichelt wie auf der Tasse. */
.dyof-mug-recommended {
  position: absolute;
  z-index: 1;
  border: 2px dashed rgba(3, 3, 10, .5);
  border-radius: 3px;
  pointer-events: none;
}

/* Uebergabe an die Produktionsdatei-Pipeline. Nur der angemeldete Inhaber
   sieht diesen Block; er erzeugt einen Auftrag, keinen Druck. */
.dyof-mug-production {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--mug-line-strong);
  border-radius: 10px;
  background: rgba(4, 199, 253, .06);
}

.dyof-mug-production-go { font-weight: 700; }

.dyof-mug-production-note {
  margin: 8px 0 0;
  color: var(--mug-muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.dyof-mug-production-result {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  font-size: .8125rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dyof-mug-production-result.is-error { color: #FFD3E0; background: rgba(252, 49, 119, .16); }

.dyof-mug-production-link {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  color: #03030A;
  background: var(--mug-blue);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

/* ab 0.10.3-r1: Anschrift (nur wenn eingeschaltet) und AGB-Link */
.dyof-mug-address-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.dyof-mug-check a { color: var(--mug-blue); text-underline-offset: .2em; }