/** Shopify CDN: Minification failed

Line 397:0 Expected ")" to go with "("

**/
/* ============================================================
   TEXTIL-KONFIGURATOR  (snippets/textil-konfigurator.liquid)
   ============================================================ */
.zxt, .zxt__block--in-step {
  --zxt-akzent: var(--mq-tinte);
  --zxt-gruen: #0f7a6d;
  --zxt-linie: rgba(0, 0, 0, .1);
  --zxt-flaeche: var(--mq-sand);
  --zxt-radius: 1.2rem;
  display: grid;
  gap: 1.4rem;
  margin: 0 0 1.6rem;
}

/* Dawns eigene Groessen-Auswahl, Mengenfeld und Kaufknopf ausblenden -
   der Konfigurator uebernimmt Menge je Groesse und Warenkorb */
product-info:has(.zxt) .product-form__buttons,
product-info:has(.zxt) .product-form__quantity,
product-info:has(.zxt) variant-selects fieldset:has(input[data-option-name="Größe"]),
product-info:has(.zxt) variant-selects fieldset:has(input[data-option-name="Groesse"]),
product-info:has(.zxt) variant-selects fieldset:has(input[data-option-name="Size"]),
product-info:has(.zxt) variant-selects .product-form__input--dropdown:has(select[name="options[Größe]"]),
product-info:has(.zxt) variant-selects .product-form__input--dropdown:has(select[name="options[Size]"]) {
  display: none !important;
}
/* Leere Schritt-Karte "Menge" (Dawn-Mengenfeld ist ausgeblendet) und
   Gestaltungs-Begleiter (kennt den Textil-Ablauf nicht) ausblenden */
body:has(.zxt) .gb {
  display: none !important;
}

.zxt__fehler { padding: 1rem 1.2rem; border-radius: .8rem; background: #fde8e8; color: #8a1c1c; font-size: 1.3rem; margin: 0; }

.zxt__modus {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  padding: .4rem; border-radius: 999px; background: var(--zxt-flaeche); border: 1px solid var(--zxt-linie);
}
.zxt__modus-btn {
  appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 1.1rem 1rem;
  font: inherit; font-size: 1.4rem; color: rgba(0, 0, 0, .6); cursor: pointer; transition: background .2s, color .2s;
}
.zxt__modus-btn.is-active { background: #fff; color: #111; font-weight: 500; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.zxt__hinweis { margin: -.4rem 0 0; font-size: 1.25rem; color: rgba(0, 0, 0, .6); }

.zxt__block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .8rem; }
.zxt__label { display: block; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 0, 0, .6); }
.zxt__farbe { font-size: 1.25rem; color: rgba(0, 0, 0, .6); }

.zxt__groessen { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.zxt-gr {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem;
  padding: .8rem 1rem; border: 1px solid var(--zxt-linie); border-radius: var(--zxt-radius); background: #fff;
}
.zxt-gr.is-aus { opacity: .45; }
.zxt-gr__name { font-weight: 600; font-size: 1.4rem; display: flex; align-items: center; gap: .5rem; }
.zxt-gr__dot { width: .7rem; height: .7rem; border-radius: 50%; background: #2bb673; display: inline-block; }
.zxt-gr__dot.is-aus { background: #c7c7c7; }
.zxt-gr__ean { grid-column: 1; font-size: 1.05rem; color: rgba(0, 0, 0, .45); }
.zxt-gr__stepper { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; border: 1px solid var(--zxt-linie); border-radius: 999px; overflow: hidden; }
.zxt-gr__stepper button { appearance: none; border: 0; background: transparent; width: 3rem; font-size: 1.6rem; cursor: pointer; color: #111; }
.zxt-gr__stepper button:disabled { cursor: not-allowed; }
.zxt-gr__stepper input {
  width: 4.2rem; border: 0; text-align: center; font: inherit; font-size: 1.4rem; background: transparent; -moz-appearance: textfield;
}
.zxt-gr__stepper input::-webkit-outer-spin-button, .zxt-gr__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zxt__summe { margin: .8rem 0 0; font-size: 1.35rem; }
.zxt__summe span { color: rgba(0, 0, 0, .55); }
.zxt__meldung { margin: 0; padding: .8rem 1rem; border-radius: .8rem; background: #fff6dd; color: #7a5300; font-size: 1.3rem; }
.zxt__cta[aria-busy="true"] { opacity: .6; pointer-events: none; }
.zxt__mehr { margin: -.4rem 0 0; font-size: 1.3rem; color: rgba(0, 0, 0, .65); }
.zxt__mehr a { color: #111; font-weight: 500; }

/* ---------- Fenster ---------- */
.zxt-dialog {
  width: min(118rem, calc(100vw - 2.4rem)); max-width: none; max-height: calc(100dvh - 2.4rem);
  padding: 0; border: 0; border-radius: 1.8rem; background: #fff; color: #111; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  text-align: left;
}
.zxt-dialog::backdrop { background: rgba(10, 8, 7, .55);  }
html.zxt-offen { overflow: hidden; }
.zxt-dialog__box { display: flex; flex-direction: column; max-height: calc(100dvh - 2.4rem); }
.zxt-dialog__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.8rem 2.4rem; border-bottom: 1px solid var(--zxt-linie); }
.zxt-dialog__titel { margin: 0; font-size: 2rem; display: inline; }
.zxt-dialog__sub { margin-left: .6rem; font-size: 1.25rem; color: rgba(0, 0, 0, .55); }
.zxt-dialog__zu { appearance: none; border: 0; background: transparent; width: 4rem; height: 4rem; border-radius: 50%; cursor: pointer; color: #111; }
.zxt-dialog__zu:hover { background: rgba(0, 0, 0, .06); }
.zxt-dialog__zu svg { width: 2rem; height: 2rem; }

.zxt-schritte { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; padding: 1.4rem 2.4rem 0; font-size: 1.3rem; color: rgba(0, 0, 0, .45); }
.zxt-schritte li { display: flex; align-items: center; gap: .6rem; }
.zxt-schritte span { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid currentColor; font-size: 1.15rem; }
.zxt-schritte li.is-aktiv { color: #111; font-weight: 500; }
.zxt-schritte li.is-aktiv span { background: var(--zxt-akzent); border-color: var(--zxt-akzent); color: #fff; }
.zxt-schritte li.is-fertig { color: var(--zxt-gruen); }

.zxt-dialog__inhalt { overflow-y: auto; padding: 1.6rem 2.4rem 2.4rem; flex: 1; }
.zxt-dialog__fuss { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 2.4rem; border-top: 1px solid var(--zxt-linie); background: #fff; }
.zxt-dialog__fuss .button {
  min-height: 4.4rem; padding: 0 2.2rem; border-radius: 999px; border: 0; cursor: pointer;
  background: #111; color: #fff; font: inherit; font-size: 1.4rem; font-weight: 500;
}
.zxt-dialog__fuss .button--secondary { background: #fff; color: #111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
.zxt-dialog__fuss .button::before, .zxt-dialog__fuss .button::after { display: none; }
.zxt-dialog__fehler { flex: 1; margin: 0; color: #b42318; font-size: 1.3rem; }
.zxt-dialog__rechts { display: flex; gap: .8rem; margin-left: auto; }
.zxt-dialog__fuss .button[hidden] { display: none; }
.zxt-dialog__fuss .button:disabled { opacity: .45; cursor: not-allowed; }

.zxt-h { margin: 0 0 .4rem; font-size: 1.7rem; }
.zxt-p { margin: 0 0 1.4rem; font-size: 1.35rem; color: rgba(0, 0, 0, .65); }
.zxt-klein { margin: .6rem 0 0; font-size: 1.2rem; color: rgba(0, 0, 0, .55); }
.zxt-gewaehlt { margin: 0 0 1.4rem; padding: .8rem 1.2rem; border-radius: .8rem; background: var(--zxt-flaeche); font-size: 1.3rem; }

/* Schritt 1 */
.zxt-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.zxt-spalte { padding: 1.6rem; border-radius: 1.4rem; background: var(--zxt-flaeche); border: 1px solid var(--zxt-linie); }
.zxt-spalte__titel { margin: 0; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 1.3rem; display: flex; align-items: center; gap: .6rem; }
.zxt-spalte__titel i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--zxt-gruen); }
.zxt-spalte__text { margin: .4rem 0 1.2rem; font-size: 1.25rem; color: rgba(0, 0, 0, .6); }
.zxt-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.zxt-karte {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left;
  padding: 1rem; border: 1px solid var(--zxt-linie); border-radius: var(--zxt-radius); background: #fff; cursor: pointer;
  font: inherit; color: #111; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.zxt-karte:hover:not(:disabled) { border-color: #111; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .06); }
.zxt-karte:disabled { opacity: .45; cursor: not-allowed; }
.zxt-karte__bild { display: block; width: 100%; aspect-ratio: 1; background: var(--zxt-flaeche); border-radius: .9rem; color: var(--zxt-gruen); }
.zxt-karte__bild svg { width: 100%; height: 100%; }
.zxt-karte__name { font-weight: 600; font-size: 1.35rem; line-height: 1.3; }
.zxt-badge { font-size: 1.1rem; padding: .2rem .8rem; border-radius: 999px; background: #e3f4f1; color: var(--zxt-gruen); }
.zxt-karte__preis { font-size: 1.3rem; font-weight: 600; color: var(--zxt-gruen); }

/* Schritt 2 */
.zxt-arten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.zxt-art {
  appearance: none; display: grid; gap: .6rem; text-align: left; padding: 2rem; border-radius: 1.4rem;
  border: 1px solid var(--zxt-linie); background: #fff; cursor: pointer; font: inherit; color: #111;
}
.zxt-art:hover { border-color: #111; }
.zxt-art__icon { display: inline-grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--zxt-flaeche); font-size: 1.8rem; }
.zxt-art strong { font-size: 1.6rem; }
.zxt-art span:last-child { font-size: 1.3rem; color: rgba(0, 0, 0, .6); }

/* Schritt 3 */
.zxt-motiv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; margin-top: 1rem; }
.zxt-vorschau { background: var(--zxt-flaeche); border-radius: 1.4rem; padding: 1.6rem; color: var(--zxt-gruen); }
.zxt-vorschau__svg { width: 100%; height: auto; max-height: 46rem; display: block; }
.zxt-vorschau__info { margin: .8rem 0 0; text-align: center; font-size: 1.15rem; color: rgba(0, 0, 0, .5); }
.zxt-steuerung { display: grid; align-content: start; gap: 1.4rem; }
.zxt-feld { display: grid; gap: .6rem; }
.zxt-feld input[type="text"], .zxt-feld select, .zxt-namen textarea {
  font: inherit; font-size: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--zxt-linie); border-radius: .9rem; background: #fff; color: #111; width: 100%;
}
.zxt-feld input[type="file"] { font-size: 1.3rem; }
.zxt-feld input[type="range"] { width: 100%; accent-color: var(--zxt-akzent); }
.zxt-feld--farbe input { width: 6rem; height: 4rem; padding: 0; border: 1px solid var(--zxt-linie); border-radius: .8rem; background: #fff; }
.zxt-garn { margin-top: 1.6rem; }

/* Schritt 4 */
.zxt-liste { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
.zxt-liste li { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--zxt-linie); border-radius: var(--zxt-radius); font-size: 1.35rem; }
.zxt-liste li > span { flex: 1; }
.zxt-liste small { color: rgba(0, 0, 0, .55); }
.zxt-link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 1.3rem; color: #111; text-decoration: underline; cursor: pointer; }
.zxt-link--plus { margin: 0 0 2rem; font-weight: 500; }
.zxt__groessen--dialog { margin-bottom: 1.2rem; }
.zxt-gesamt { display: flex; justify-content: space-between; padding: 1.2rem 1.4rem; border-radius: var(--zxt-radius); background: var(--zxt-flaeche); font-size: 1.4rem; margin-bottom: 1.2rem; }
.zxt-namen { padding: 1.2rem 1.4rem; border: 1px solid var(--zxt-linie); border-radius: var(--zxt-radius); margin-bottom: 1.2rem; font-size: 1.4rem; }
.zxt-namen em { font-style: normal; color: var(--zxt-gruen); font-weight: 600; margin-left: .4rem; }
.zxt-namen textarea { margin-top: .8rem; font-size: 1.4rem; }
.zxt-warnung { margin: 0 0 1.2rem; padding: 1rem 1.2rem; border-radius: .9rem; background: #fff6dd; border: 1px solid #f3dc9b; color: #7a5300; font-size: 1.3rem; }
.zxt-staffeln { padding: 1.4rem; border: 1px solid var(--zxt-linie); border-radius: var(--zxt-radius); background: var(--zxt-flaeche); margin-bottom: 1.2rem; }
.zxt-staffeln__titel { margin: 0 0 .8rem; font-weight: 600; font-size: 1.4rem; }
.zxt-staffel__titel { margin: 1rem 0 .4rem; font-weight: 600; font-size: 1.25rem; }
.zxt-staffel { list-style: none; margin: 0; padding: 0; font-size: 1.25rem; }
.zxt-staffel li { display: flex; justify-content: space-between; padding: .45rem .8rem; border-radius: .5rem; color: rgba(0, 0, 0, .7); }
.zxt-staffel li.is-aktiv { background: var(--zxt-akzent); color: #fff; font-weight: 600; }
.zxt-summe-box { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.6rem; padding: 1.4rem; border-radius: var(--zxt-radius); border: 1px solid var(--zxt-linie); font-size: 1.4rem; }
.zxt-summe-box b { text-align: right; font-weight: 500; }
.zxt-summe-box .zxt-summe-box__gesamt { font-weight: 700; font-size: 1.6rem; padding-top: .6rem; border-top: 1px solid var(--zxt-linie); }
.zxt-summe-box .zxt-klein { margin: 0; }

@media (max-width: 749px) {
  .zxt-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .zxt-dialog__box { max-height: 100dvh; height: 100%; }
  .zxt-dialog__kopf, .zxt-dialog__inhalt, .zxt-dialog__fuss { padding-left: 1.6rem; padding-right: 1.6rem; }
  .zxt-schritte { padding: 1.2rem 1.6rem 0; font-size: 1.15rem; gap: .4rem 1rem; }
  .zxt-spalten, .zxt-arten, .zxt-motiv { grid-template-columns: 1fr; }
  .zxt-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zxt-dialog__fuss { flex-wrap: wrap; }
  .zxt-dialog__fehler { order: -1; flex-basis: 100%; }
  .zxt-dialog__rechts { flex: 1; justify-content: flex-end; }
  .zxt-dialog__fuss .button { padding: 0 1.4rem; }
}

/* Mengen-Block in der Karte "2. Menge" */
.zxt__block--in-step { margin-top: .4rem; text-align: left; }
/* Vorschau der Optionen unter "Mit deinem Logo" */
.zxt__optionen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: -.2rem 0 0; padding: 0; list-style: none; }
.zxt__optionen li { padding: .5rem 1.1rem; border-radius: 999px; background: var(--zxt-flaeche); border: 1px solid var(--zxt-linie); font-size: 1.25rem; }
.zxt__optionen b { font-weight: 600; }

/* ============================================================
   MEGA-MENUE-LOOK : dunkles Glas, weisse Schrift, helle
   Kacheln wie die Produktkarten im Mega-Menue, weisse Pills als
   aktiver Zustand. Farben kommen aus den MIQAZ-Token (.mega-menu__content,
   .zxmg__cat, .zxmg__prod, .zx-mega-promo).
   ============================================================ */
.zxt, .zxt__block--in-step {
  --zxt-glas: rgba(var(--mq-tinte-rgb), .72);
  --zxt-glas-hell: rgba(255, 255, 255, .1);
  --zxt-glas-linie: rgba(255, 255, 255, .14);
  --zxt-text-matt: rgba(255, 255, 255, .72);
  --zxt-kachel: var(--mq-sand);
  --zxt-ease: var(--zx-ease, cubic-bezier(.22, 1, .36, 1));
}

/* Produktseite: Umschalter als dunkle Spur mit weisser Pill */
.zxt__modus { background: var(--mq-tinte); border-color: var(--mq-tinte); }
.zxt__modus-btn { color: rgba(255, 255, 255, .72); transition: background .35s var(--zxt-ease), color .35s; }
.zxt__modus-btn:hover { color: #fff; }
.zxt__modus-btn.is-active { background: #fff; color: #111; box-shadow: none; }
.zxt__optionen li { background: var(--mq-tinte); border-color: var(--mq-tinte); color: rgba(255, 255, 255, .8); }
.zxt__optionen b { color: #fff; }

/* Fenster */
.zxt-dialog {
  background: var(--zxt-glas);
  
  
  color: #fff;
  border: 1px solid var(--zxt-glas-linie);
  border-radius: 2.4rem;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .45);
}
.zxt-dialog[open] { animation: zxtIn .55s var(--zxt-ease) both; }
@keyframes zxtIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.zxt-dialog::backdrop { background: rgba(0, 0, 0, .25);   }
@media (prefers-reduced-motion: reduce) { .zxt-dialog[open] { animation: none; } }

.zxt-dialog__kopf { border-bottom-color: var(--zxt-glas-linie); }
.zxt-dialog__titel { color: #fff; font-weight: 500; }
.zxt-dialog__sub { color: var(--zxt-text-matt); }
.zxt-dialog__zu { color: #fff; }
.zxt-dialog__zu:hover { background: rgba(255, 255, 255, .16); }
.zxt-dialog__fuss { background: transparent; border-top-color: var(--zxt-glas-linie); }
.zxt-dialog__fehler { color: #ffb4a8; }

.zxt-schritte { color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: .03em; font-size: 1.2rem; }
.zxt-schritte span { border-color: rgba(255, 255, 255, .35); }
.zxt-schritte li.is-aktiv { color: #fff; }
.zxt-schritte li.is-aktiv span { background: #fff; border-color: #fff; color: #111; }
.zxt-schritte li.is-fertig { color: rgba(255, 255, 255, .85); }
.zxt-schritte li.is-fertig span { background: rgba(255, 255, 255, .22); border-color: transparent; }

.zxt-dialog .zxt-h { color: #fff; font-weight: 500; }
.zxt-dialog .zxt-p, .zxt-dialog .zxt-klein, .zxt-dialog .zxt__label { color: var(--zxt-text-matt); }
.zxt-dialog .zxt-p strong, .zxt-dialog .zxt-klein strong { color: #fff; }
.zxt-dialog .zxt-gewaehlt { background: var(--zxt-glas-hell); color: #fff; }
.zxt-dialog .zxt-link { color: #fff; }

/* Schritt 1: Spalten als Glas, Positionen als helle Kacheln */
.zxt-spalte { background: var(--zxt-glas-hell); border-color: var(--zxt-glas-linie); border-radius: 2rem; }
.zxt-spalte__titel { color: #fff; }
.zxt-spalte__titel i { background: #fff; }
.zxt-spalte__text { color: var(--zxt-text-matt); }
.zxt-karte {
  background: var(--zxt-kachel); border: 0; border-radius: 1.4rem; color: #111; padding: 0 0 1.2rem; overflow: hidden;
  transition: transform .45s var(--zxt-ease), box-shadow .45s var(--zxt-ease);
}
.zxt-karte:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); border-color: transparent; }
.zxt-karte:disabled { opacity: .35; }
.zxt-karte__bild { background: #fff; border-radius: 0; color: var(--mq-tinte); }
.zxt-karte__bild svg { transition: transform .5s var(--zxt-ease); }
.zxt-karte:hover:not(:disabled) .zxt-karte__bild svg { transform: scale(1.05); }
.zxt-karte__name, .zxt-karte .zxt-badge, .zxt-karte__preis { margin-left: 1.2rem; margin-right: 1.2rem; }
.zxt-karte__name { font-weight: 500; }
.zxt-karte .zxt-badge { background: rgba(var(--mq-tinte-rgb), .08); color: var(--mq-tinte); }
.zxt-karte__preis { color: #111; font-weight: 600; }

/* Schritt 2: Art-Karten wie die Kategorie-Pills im Mega-Menue */
.zxt-art { background: rgba(255, 255, 255, .16); border: 0; border-radius: 2rem; color: #fff; transition: background .3s, color .3s; }
.zxt-art:hover { background: #fff; color: #111; }
.zxt-art span:last-child { color: inherit; opacity: .72; }
.zxt-art__icon { background: rgba(255, 255, 255, .2); }
.zxt-art:hover .zxt-art__icon { background: var(--mq-sand); }

/* Schritt 3: helle Vorschau-Buehne, Glas-Felder */
.zxt-vorschau { background: var(--zxt-kachel); border-radius: 2rem; color: var(--mq-tinte); }
.zxt-vorschau__info { color: rgba(0, 0, 0, .5); }
.zxt-dialog .zxt-feld input[type="text"], .zxt-dialog .zxt-feld select, .zxt-dialog .zxt-namen textarea {
  background: var(--zxt-glas-hell); border-color: rgba(255, 255, 255, .22); color: #fff; border-radius: 1.2rem;
}
.zxt-dialog .zxt-feld input::placeholder, .zxt-dialog .zxt-namen textarea::placeholder { color: rgba(255, 255, 255, .45); }
.zxt-dialog .zxt-feld select option { color: #111; }
.zxt-dialog .zxt-feld input[type="file"] { color: var(--zxt-text-matt); }
.zxt-dialog .zxt-feld input[type="file"]::file-selector-button {
  margin-right: 1rem; padding: .8rem 1.6rem; border: 0; border-radius: 999px; background: #fff; color: #111; font: inherit; cursor: pointer;
}
.zxt-dialog .zxt-feld input[type="range"] { accent-color: #fff; }
.zxt-dialog .zxt-feld--farbe input { background: transparent; border-color: rgba(255, 255, 255, .3); }
.zxt-garn { background: var(--zxt-kachel); color: #111; border-radius: 2rem; padding: 1.6rem; }
.zxt-garn .zxt__label { color: rgba(0, 0, 0, .6); }

/* Schritt 4 */
.zxt-dialog .zxt-liste li { border-color: var(--zxt-glas-linie); background: var(--zxt-glas-hell); border-radius: 1.4rem; }
.zxt-dialog .zxt-liste small { color: var(--zxt-text-matt); }
.zxt-dialog .zxt-gr { background: var(--zxt-glas-hell); border-color: var(--zxt-glas-linie); color: #fff; border-radius: 1.4rem; }
.zxt-dialog .zxt-gr__ean { color: rgba(255, 255, 255, .45); }
.zxt-dialog .zxt-gr__stepper { border-color: rgba(255, 255, 255, .25); }
.zxt-dialog .zxt-gr__stepper button, .zxt-dialog .zxt-gr__stepper input { color: #fff; }
.zxt-dialog .zxt-gesamt, .zxt-dialog .zxt-staffeln, .zxt-dialog .zxt-namen, .zxt-dialog .zxt-summe-box {
  background: var(--zxt-glas-hell); border: 1px solid var(--zxt-glas-linie); border-radius: 1.6rem; color: #fff;
}
.zxt-dialog .zxt-namen em { color: #fff; }
.zxt-dialog .zxt-staffel li { color: var(--zxt-text-matt); border-radius: .8rem; }
.zxt-dialog .zxt-staffel li.is-aktiv { background: #fff; color: #111; }
.zxt-dialog .zxt-warnung { background: rgba(243, 220, 155, .14); border-color: rgba(243, 220, 155, .35); color: #f6dc95; }
.zxt-dialog .zxt-summe-box .zxt-summe-box__gesamt { border-top-color: var(--zxt-glas-linie); }

/* Knoepfe: weisse Pill = Hauptaktion, Glas-Pill = Nebenaktion */
.zxt-dialog__fuss .button { background: #fff; color: #111; transition: transform .35s var(--zxt-ease), opacity .2s; }
.zxt-dialog__fuss .button:hover:not(:disabled) { transform: translateY(-1px); }
.zxt-dialog__fuss .button--secondary { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.zxt-dialog__fuss .button:disabled { opacity: .35; }

/* Hauptknopf "Weiter zum Logo-Konfigurator": gross, dunkel, mit Lichtschimmer */
.zxt__cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: 100%;
  min-height: 6.4rem; padding: 0 2.8rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mq-tinte); color: #fff; font: inherit; font-size: 1.7rem; font-weight: 500; letter-spacing: .01em;
  box-shadow: 0 14px 34px rgba(var(--mq-tinte-rgb), .28);
  transition: transform .45s var(--zxt-ease), box-shadow .45s var(--zxt-ease);
}
.zxt__cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%); animation: zxtSchimmer 3.2s var(--zxt-ease) infinite 1s;
}
@keyframes zxtSchimmer { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.zxt__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(var(--mq-tinte-rgb), .36); }
.zxt__cta:active { transform: translateY(0); }
.zxt__cta:focus-visible { outline: 2px solid var(--mq-tinte); outline-offset: 3px; }
.zxt__cta-icon {
  display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: #fff; color: #111; flex: none;
}
.zxt__cta-icon svg { width: 1.8rem; height: 1.8rem; }
.zxt__cta-pfeil { font-size: 2rem; transition: transform .45s var(--zxt-ease); }
.zxt__cta:hover .zxt__cta-pfeil { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .zxt__cta::after { animation: none; } }
@media (max-width: 749px) { .zxt__cta { font-size: 1.5rem; min-height: 5.8rem; padding: 0 1.8rem; } }
.zxt__cta.is-ohne .zxt__cta-icon { display: none; }

.zxt__cta-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zxt__cta { font-size: clamp(1.45rem, .6vw + 1.05rem, 1.7rem); padding: 0 2rem 0 1rem; }
.zxt__cta-pfeil { margin-left: auto; }
.zxt__cta-icon { margin-right: auto; }
/* Garnfarben in der rechten Spalte */
.zxt-steuerung .zxt-garn { margin-top: 0; padding: 1.2rem; }
/* Knopftext: lieber sauber umbrechen als abschneiden */
.zxt__cta-text { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.25; flex: 1; }
.zxt__cta { padding-top: 1rem; padding-bottom: 1rem; }
.zxt__cta-pfeil, .zxt__cta-icon { margin: 0; }

/* ---------- Handy-Feinschliff ---------- */
/* Ohne Unschaerfe-Unterstuetzung (aeltere Browser): deckend dunkel statt grau-weiss */
@supports not (( }
}
.zxt-dialog__box { width: 100%; min-width: 0; }
.zxt-dialog__inhalt { overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 749px) {
  .zxt-dialog {
    inset: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0; background: rgba(var(--mq-tinte-rgb), .97);
  }
  .zxt-dialog__kopf, .zxt-dialog__inhalt, .zxt-dialog__fuss { padding-left: 2rem; padding-right: 2rem; }
  .zxt-dialog__kopf { padding-top: max(1.4rem, env(safe-area-inset-top)); }
  .zxt-dialog__fuss { padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
  .zxt-schritte { padding: 1.2rem 2rem 0; }
  .zxt-dialog__titel { font-size: 1.8rem; }
  .zxt-dialog__sub { display: block; margin: .2rem 0 0; }
  /* iOS zoomt bei Eingabefeldern unter 16px automatisch hinein */
  .zxt input, .zxt select, .zxt textarea { font-size: 16px !important; }
  .zxt-gr__stepper input { width: 4.6rem; }
  .zxt-dialog .zxt-liste li { flex-wrap: wrap; }
  .zxt-summe-box { padding: 1.4rem 1.6rem; }
}