/* Bekleidungs-Editor */
.ffs-merch { text-align: left; margin: 0 auto 2em; max-width: 1100px; }
.ffs-merch .mx-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: start; }
.ffs-merch .mx-preview { position: sticky; top: 16px; }
.ffs-merch .mx-stage { position: relative; aspect-ratio: 600 / 720; background: #fff; border-radius: 10px; overflow: hidden; }
.ffs-merch .mx-garment, .ffs-merch .mx-special-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ffs-merch .mx-special-img { position: absolute; inset: 0; background: #fff; }
.ffs-merch .mx-logo {
	position: absolute; transform: translate(-50%, -50%); display: block;
	background-size: 100% 100%; background-repeat: no-repeat;
	-webkit-mask-image: var(--mask); mask-image: var(--mask);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	transition: background-color .2s;
}
.ffs-merch .mx-shade {
	position: absolute; transform: translate(-50%, -50%); display: block; pointer-events: none;
	background-repeat: no-repeat; mix-blend-mode: overlay; opacity: .45;
	-webkit-mask-image: var(--mask); mask-image: var(--mask);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ffs-merch .mx-logo[hidden], .ffs-merch [hidden] { display: none !important; }
.ffs-merch .mx-views { display: flex; gap: 8px; justify-content: center; margin: 12px 0 6px; }
.ffs-merch .mx-view { background: transparent; color: #fff; border: 1px solid #555; border-radius: 20px; padding: 6px 18px; cursor: pointer; font: inherit; }
.ffs-merch .mx-view.is-active { border-color: var(--ffs-cyan); color: var(--ffs-cyan); }
.ffs-merch .mx-summary { text-align: center; margin: 4px 0 0; font-size: 15px; opacity: .9; }
.ffs-merch .mx-note-synth { text-align: center; font-size: 13px; opacity: .65; margin: 4px 0 0; }

.ffs-merch .mx-step { border: 0; border-top: 1px solid #3a3a3a; margin: 0; padding: 16px 0 18px; min-width: 0; }
.ffs-merch .mx-step:first-of-type { border-top: 0; padding-top: 0; }
.ffs-merch legend { font-size: 18px; font-weight: 600; padding: 0; margin-bottom: 10px; color: #fff; }
.ffs-merch legend .mx-current { font-weight: 400; opacity: .75; font-size: 15px; }
.ffs-merch .mx-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ffs-cyan); color: #111; font-size: 14px; font-weight: 700; margin-right: 6px; }
.ffs-merch .mx-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ffs-merch .mx-hint { font-size: 13px; opacity: .7; margin: 8px 0 0; }

.ffs-merch .mx-opt { position: relative; cursor: pointer; }
.ffs-merch .mx-opt input, .ffs-merch .mx-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ffs-merch .mx-opt span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #555; border-radius: 6px; padding: 8px 14px; min-width: 52px; justify-content: center; transition: border-color .15s, background .15s; }
.ffs-merch .mx-opt.mx-big span { padding: 12px 18px; font-size: 17px; flex-direction: column; gap: 2px; }
.ffs-merch .mx-opt small { font-size: 13px; opacity: .75; }
.ffs-merch .mx-opt input:checked + span { border-color: var(--ffs-cyan); background: rgba(0, 255, 255, .08); color: var(--ffs-cyan); }
.ffs-merch .mx-opt input:focus-visible + span, .ffs-merch .mx-swatch input:focus-visible + span { outline: 2px solid var(--ffs-cyan); outline-offset: 2px; }
.ffs-merch .mx-logo-thumb { width: 34px; height: 34px; display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

.ffs-merch .mx-swatches { gap: 10px; }
.ffs-merch .mx-swatch { position: relative; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; width: 54px; }
.ffs-merch .mx-swatch span { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #555; box-shadow: inset 0 0 0 2px #252525; background-size: cover; background-position: center; transition: border-color .15s, transform .15s; }
.ffs-merch .mx-swatch input:checked + span { border-color: var(--ffs-cyan); transform: scale(1.08); }
.ffs-merch .mx-swatch em { font-style: normal; font-size: 11px; line-height: 1.2; text-align: center; margin-top: 4px; opacity: .75; }

.ffs-merch .mx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ffs-merch .mx-contact .ffs-field input:not([type="checkbox"]), .ffs-merch .mx-contact .ffs-field textarea { width: 100%; }
.ffs-merch .mx-contact .ffs-consent input { width: auto; flex: 0 0 auto; }
.ffs-merch .mx-contact .ffs-consent label { display: block; flex: 1; }
.ffs-merch .mx-submit { margin-top: 6px; }

/* Namensdruck */
.ffs-merch .mx-name { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1.05; white-space: nowrap; pointer-events: none; text-align: center; opacity: .96; }
.ffs-merch .mx-name span { display: block; }
.ffs-merch .mx-sub { font-size: 15px; font-weight: 600; margin: 14px 0 8px; }
.ffs-merch .mx-sub .mx-current { font-weight: 400; opacity: .75; }
.ffs-merch .mx-name-fields { margin-top: 12px; }
.ffs-merch .mx-name-fields .ffs-field input { width: 100%; }
.ffs-merch .mx-font span { flex-direction: column; gap: 2px; min-width: 110px; padding: 8px 12px; }
.ffs-merch .mx-font b { font-size: 24px; font-weight: 400; line-height: 1.2; }

/* Lupe */
.ffs-merch .mx-canvas { position: absolute; inset: 0; transition: transform .35s ease; }
.ffs-merch .is-zoomed .mx-canvas, .ffs-merch.is-zoomed .mx-canvas { transform: scale(2); }
.ffs-merch .ffs-form .mx-zoom, .ffs-merch .mx-zoom {
	position: absolute; right: 8px; bottom: 8px; z-index: 2; margin: 0;
	background: rgba(20, 20, 20, .82); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 18px;
	padding: 5px 12px 5px 30px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: 10px center; background-size: 15px;
}
.ffs-merch .mx-zoom[aria-pressed="true"] { border-color: var(--ffs-cyan); color: var(--ffs-cyan); }

/* Special-Auswahl */
.ffs-merch .mx-special-pick { margin-bottom: 18px; }
.ffs-merch .mx-specials { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ffs-merch .ffs-form label.mx-card { display: block; margin: 0; cursor: pointer; position: relative; }
.ffs-merch .mx-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ffs-merch .mx-card-in { display: flex; flex-direction: column; background: #1c1c1c; border: 2px solid #3a3a3a; border-radius: 10px; padding: 10px; height: 100%; transition: border-color .15s; }
.ffs-merch .mx-card-in img { width: 100%; height: auto; aspect-ratio: 900 / 540; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
.ffs-merch .mx-card-in strong { margin: 10px 0 2px; font-size: 17px; color: var(--ffs-text-light); }
.ffs-merch .mx-card-in small { font-size: 13px; opacity: .75; line-height: 1.4; }
.ffs-merch .mx-card input:checked + .mx-card-in { border-color: var(--ffs-cyan); }
.ffs-merch .mx-card input:checked + .mx-card-in strong { color: var(--ffs-cyan); }
.ffs-merch .mx-card input:focus-visible + .mx-card-in { outline: 2px solid var(--ffs-cyan); outline-offset: 2px; }
.ffs-merch .mx-switch { text-align: center; margin-top: 2em; }
.ffs-merch .mx-switch a { color: var(--ffs-cyan); font-weight: 600; }

/* Startseite Bekleidung */
.mx-start { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 1.5em auto 2em; text-align: left; }
.mx-start .mx-tile { display: flex; flex-direction: column; background: #1c1c1c; border: 2px solid #3a3a3a; border-radius: 12px; overflow: hidden; color: var(--ffs-text-light); text-decoration: none; transition: border-color .15s, transform .15s; }
.mx-start .mx-tile:hover, .mx-start .mx-tile:focus-visible { border-color: var(--ffs-cyan); transform: translateY(-2px); }
.mx-start .mx-tile img { width: 100%; height: auto; aspect-ratio: 900 / 540; object-fit: contain; background: #fff; display: block; }
.mx-start .mx-tile-text { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.mx-start .mx-tile-text strong { font-size: 26px; color: var(--ffs-cyan); }
.mx-start .mx-tile-text em { font-style: normal; font-weight: 700; margin-top: 4px; }

/* Info-Bereich Startseite Bekleidung */
.mx-info { max-width: 1100px; margin: 1em auto 2.5em; text-align: left; }
.mx-info h2 { font-size: 26px; margin: 0 0 16px; }
.mx-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.mx-info h3 { font-size: 18px; margin: 0 0 6px; color: var(--ffs-cyan); }
.mx-info p { margin: 0; line-height: 1.55; }

@media (max-width: 834px) {
	.mx-info-grid { grid-template-columns: 1fr; }
	.mx-info h2 { font-size: 22px; }
	.mx-start { grid-template-columns: 1fr; gap: 16px; }
	.ffs-merch .mx-specials { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ffs-merch .mx-card-in strong { font-size: 15px; }
	.ffs-merch .mx-card-in small { display: none; }
	.ffs-merch .mx-layout { grid-template-columns: 1fr; gap: 16px; }
	.ffs-merch .mx-preview { position: sticky; top: 0; z-index: 5; background: var(--ffs-bg, #252525); padding: 8px 0 6px; }
	.ffs-merch .mx-stage { max-width: 215px; margin: 0 auto; transition: max-width .2s; }
	.ffs-merch .mx-views { margin: 6px 0 2px; }
	.ffs-merch .ffs-form .mx-view, .ffs-merch .mx-view { padding: 4px 16px; font-size: 14px; }
	.ffs-merch .mx-summary { font-size: 12px; line-height: 1.35; padding: 0 4px; }
	/* Namensdruck auf dem Handy */
	.ffs-merch .mx-fonts { display: grid; grid-template-columns: 1fr 1fr; }
	.ffs-merch .ffs-form label.mx-font { display: block; }
	.ffs-merch .mx-font span { width: 100%; min-width: 0; box-sizing: border-box; }
	.ffs-merch .mx-swatches { gap: 8px 4px; }
	.ffs-merch .mx-name-fields input { scroll-margin-top: 230px; }
	.ffs-merch.is-typing-name .mx-stage { max-width: 150px; }
	.ffs-merch.is-typing-name .mx-summary, .ffs-merch.is-typing-name .mx-views, .ffs-merch.is-typing-name .mx-note-synth { display: none; }
	.ffs-merch.is-typing .mx-preview { position: static; }
	.ffs-merch .ffs-form input, .ffs-merch .ffs-form textarea { font-size: 16px; }
	.ffs-merch .mx-grid { grid-template-columns: 1fr; }
	/* Auf dem Handy die zentrierte Darstellung der Seite nicht übernehmen */
	.ffs-mobile-center .ffs-content .ffs-merch { text-align: left; }
	.ffs-mobile-center .ffs-content .ffs-merch ul { width: auto; }
}

/* Formular-Feinheiten */
.ffs-merch .ffs-form.mx-form { max-width: none; }
.ffs-merch .ffs-form input[type="number"], .ffs-merch .ffs-form input[type="tel"] {
	width: 100%; padding: 10px 12px; background: #1b1b1b; border: 1px solid #555; color: var(--ffs-text-light); font: inherit;
}
.ffs-merch .ffs-form textarea { min-height: 80px; }
.ffs-merch .mx-opt span, .ffs-merch .mx-swatch { color: var(--ffs-text-light); }
.ffs-merch .ffs-form label.mx-opt, .ffs-merch .ffs-form label.mx-swatch { display: inline-flex; margin: 0; }
.ffs-merch .mx-view, .ffs-merch .mx-special-reset { font-weight: 400; }
.ffs-merch .ffs-form .mx-view { padding: 6px 18px; background: transparent; color: #fff; border: 1px solid #555; }
.ffs-merch .ffs-form .mx-view.is-active { color: var(--ffs-cyan); border-color: var(--ffs-cyan); }
.ffs-merch .ffs-form .mx-special-reset { padding: 0; background: transparent; color: var(--ffs-cyan); }