.mfe-app{ --mfe-teal:#3F938C; --mfe-teal-dark:#2E706A; --mfe-teal-tint:#E9F5F3; --mfe-grey:#F4F4F2; --mfe-anthracite:#33383B; --mfe-line:#E4E2DE; --mfe-text:#1E2024; --mfe-sub:#7C7F85; max-width:480px; margin:24px 0; font-family:inherit; color:var(--mfe-text); }
.mfe-app *{ box-sizing:border-box; }

.mfe-drop{ border:2.5px dashed var(--mfe-teal); border-radius:16px; background:var(--mfe-teal-tint); padding:22px 16px 18px; text-align:center; cursor:pointer; color:var(--mfe-teal); }
.mfe-drop input{ display:none; }
.mfe-cloud{ margin:0 auto 10px; width:38px; height:38px; }
.mfe-upload-title{ font-size:17px; font-weight:800; margin:0 0 5px; color:var(--mfe-text); }
.mfe-upload-lead{ font-size:13px; color:#565A60; margin:0 0 3px; line-height:1.35; }
.mfe-upload-hint{ font-size:11.5px; color:#9C9FA4; margin:0 0 12px; }
.mfe-browse{ display:inline-block; background:var(--mfe-teal); color:#fff; font-weight:700; font-size:13px; padding:8px 22px; border-radius:8px; border:none; cursor:pointer; }
.mfe-browse:hover{ background:var(--mfe-teal-dark); }

.mfe-steps-card{ display:none; }
.mfe-steps-card.active{ display:block; }
.mfe-frame{ padding:2px; border-radius:16px; background:linear-gradient(150deg,#E85AA6 0%,#8B6FE0 45%,var(--mfe-teal) 100%); }
.mfe-card-inner{ background:#fff; border-radius:14px; padding:20px 20px 16px; text-align:center; }
.mfe-logo-ring{ position:relative; width:56px; height:56px; margin:0 auto 16px; }
.mfe-logo-ring svg{ position:absolute; inset:0; animation:mfe-spin 1.3s linear infinite; transform-origin:50% 50%; }
@keyframes mfe-spin{ to{ transform:rotate(360deg); } }
.mfe-mark{ position:absolute; inset:7px; border-radius:50%; background:var(--mfe-teal); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:9px; }
.mfe-step-list{ text-align:left; }
.mfe-step{ position:relative; display:flex; gap:12px; padding-bottom:12px; }
.mfe-step:last-child{ padding-bottom:0; }
.mfe-rail{ position:relative; width:24px; flex:0 0 auto; }
.mfe-rail .mfe-rline{ position:absolute; top:24px; bottom:-12px; left:50%; width:2px; transform:translateX(-50%); background:var(--mfe-anthracite); }
.mfe-step.done .mfe-rail .mfe-rline{ background:var(--mfe-teal); }
.mfe-step:last-child .mfe-rail .mfe-rline{ display:none; }
.mfe-marker{ position:relative; z-index:1; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mfe-step.done .mfe-marker{ background:var(--mfe-teal); }
.mfe-step.done .mfe-marker svg{ width:11px; height:11px; }
.mfe-step.active .mfe-marker{ background:var(--mfe-teal-tint); border:2px solid var(--mfe-teal); }
.mfe-step.active .mfe-marker .mfe-sdot{ width:7px; height:7px; border-radius:50%; background:var(--mfe-teal); }
.mfe-step.pending .mfe-marker{ background:#fff; border:2px solid var(--mfe-anthracite); }
.mfe-step-body{ padding-top:1px; }
.mfe-step-title{ font-size:13px; font-weight:700; color:#B9B7B2; }
.mfe-step.done .mfe-step-title{ color:var(--mfe-teal-dark); }
.mfe-step.active .mfe-step-title{ color:var(--mfe-text); }
.mfe-step-detail{ font-size:11.5px; color:var(--mfe-teal-dark); margin-top:1px; min-height:14px; }
.mfe-step.active .mfe-step-detail{ color:var(--mfe-teal); font-weight:600; }

.mfe-dims{ display:none; }
.mfe-dims.active{ display:block; }
.mfe-dims-outer{ display:grid; grid-template-columns:44px 1fr; grid-template-rows:40px auto; column-gap:10px; row-gap:10px; max-width:75%; }
.mfe-h-cell{ grid-column:2; grid-row:1; display:flex; flex-direction:column; justify-content:flex-end; }
.mfe-h-label{ text-align:center; font-size:15px; font-weight:700; color:var(--mfe-teal); margin-bottom:4px; }
.mfe-h-line{ position:relative; height:2px; background:var(--mfe-teal); }
.mfe-h-line::before,.mfe-h-line::after{ content:''; position:absolute; top:50%; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; transform:translateY(-50%); }
.mfe-h-line::before{ left:0; border-right:8px solid var(--mfe-teal); }
.mfe-h-line::after{ right:0; border-left:8px solid var(--mfe-teal); }
.mfe-v-cell{ grid-column:1; grid-row:2; display:flex; flex-direction:row; justify-content:flex-end; align-items:stretch; }
.mfe-v-label{ display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg); font-size:15px; font-weight:700; color:var(--mfe-teal); margin-right:4px; }
.mfe-v-line{ position:relative; width:2px; background:var(--mfe-teal); }
.mfe-v-line::before,.mfe-v-line::after{ content:''; position:absolute; left:50%; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; transform:translateX(-50%); }
.mfe-v-line::before{ top:0; border-bottom:8px solid var(--mfe-teal); }
.mfe-v-line::after{ bottom:0; border-top:8px solid var(--mfe-teal); }
.mfe-dims-box{ grid-column:2; grid-row:2; position:relative; border:1px solid var(--mfe-line); border-radius:14px; overflow:hidden; background:linear-gradient(45deg,#eee 25%,transparent 25%) 0 0/18px 18px, linear-gradient(-45deg,#eee 25%,transparent 25%) 0 0/18px 18px, linear-gradient(45deg,transparent 75%,#eee 75%) 0 0/18px 18px, linear-gradient(-45deg,transparent 75%,#eee 75%) 0 0/18px 18px, #fff; }
.mfe-dims-box img{ display:block; width:100%; height:auto; }
.mfe-pdf-badge{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; font-size:14px; font-weight:800; color:var(--mfe-sub); letter-spacing:1px; }
.mfe-dims-caption{ text-align:center; font-size:14px; color:var(--mfe-sub); margin:14px 0 26px; }

.mfe-result-card{ border:1px solid var(--mfe-line); border-radius:10px; margin-bottom:18px; overflow:hidden; }
.mfe-result-row{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--mfe-line); font-size:13px; line-height:1.3; }
.mfe-result-row:last-child{ border-bottom:none; }
.mfe-r-link, .mfe-r-btn{ margin-left:auto; background:none; border:none; color:var(--mfe-teal); font-size:12.5px; font-weight:600; cursor:pointer; padding:0; white-space:nowrap; }
.mfe-r-btn{ background:var(--mfe-teal); color:#fff; padding:5px 10px; border-radius:6px; }

.mfe-order-title{ font-size:13px; font-weight:700; color:var(--mfe-sub); text-transform:uppercase; letter-spacing:.3px; margin:0 0 8px; }
.mfe-order-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; margin-bottom:6px; width:100%; }
.mfe-order-spacer{ flex:1 1 auto; min-width:12px; }
.mfe-order-field{ display:flex; flex-direction:column; gap:5px; }
.mfe-order-field label{ font-size:12px; color:var(--mfe-sub); font-weight:600; white-space:nowrap; }
.mfe-order-stepper{ display:flex !important; align-items:stretch !important; height:34px !important; border:1px solid var(--mfe-line) !important; border-radius:4px !important; overflow:hidden !important; background:#fff !important; }
.mfe-order-stepper button{ width:26px !important; height:34px !important; flex:0 0 auto !important; border:none !important; border-radius:0 !important; background:var(--mfe-grey) !important; font-size:15px !important; line-height:1 !important; font-weight:600 !important; color:var(--mfe-text) !important; cursor:pointer !important; margin:0 !important; padding:0 !important; box-shadow:none !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.mfe-order-stepper button:hover{ background:#E4E2DE !important; }
.mfe-order-stepper input{ border:none !important; border-radius:0 !important; padding:0 4px !important; margin:0 !important; font-size:15px !important; font-weight:700 !important; color:var(--mfe-text) !important; width:40px !important; height:34px !important; line-height:34px !important; text-align:center !important; background:transparent !important; box-shadow:none !important; -moz-appearance:textfield !important; vertical-align:middle !important; }
.mfe-order-stepper input::-webkit-outer-spin-button, .mfe-order-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none !important; margin:0 !important; }
.mfe-order-field--qty .mfe-order-stepper input{ width:28px !important; }
.mfe-order-price, .mfe-order-total{ display:flex; flex-direction:column; gap:2px; }
.mfe-order-price .mfe-lbl, .mfe-order-total .mfe-lbl{ font-size:12px; color:var(--mfe-sub); white-space:nowrap; }
.mfe-order-price .mfe-val{ font-size:14px; font-weight:700; color:var(--mfe-text); white-space:nowrap; }
.mfe-order-total .mfe-val{ font-size:14px; font-weight:800; color:var(--mfe-teal); white-space:nowrap; }
.mfe-add-size-link{ display:block; background:none; border:none; color:var(--mfe-teal); font-size:14px; font-weight:600; cursor:pointer; padding:0; margin-bottom:14px; }

.mfe-cart-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--mfe-teal); color:#fff; border:none; border-radius:12px; padding:16px; font-size:15.5px; font-weight:700; cursor:pointer; }
.mfe-cart-btn:hover{ background:var(--mfe-teal-dark); }
.mfe-cart-btn:disabled{ opacity:.6; cursor:default; }
.mfe-cart-btn svg{ width:19px; height:19px; }

.mfe-error{ background:#FDECEC; color:#B23A3A; border-radius:10px; padding:12px 14px; font-size:14px; margin-bottom:16px; }
.mfe-dpi-warn{ background:#FFF6E5; color:#8A5A00; border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.4; margin:8px 0 14px; }

/* Vergleichs-Modal */
.mfe-modal-overlay{ position:fixed; inset:0; background:rgba(20,20,22,.55); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
.mfe-modal{ background:#fff; border-radius:16px; max-width:460px; width:100%; padding:18px 18px 16px; position:relative; }
.mfe-modal-close{ position:absolute; top:12px; right:12px; width:auto; height:auto; background:none; border:none; font-size:18px; line-height:1; color:var(--mfe-sub, #7C7F85); cursor:pointer; padding:4px; }
.mfe-modal h2{ font-size:17px; font-weight:800; margin:0 22px 4px 0; }
.mfe-modal p.mfe-modal-desc{ font-size:12px; color:var(--mfe-sub, #7C7F85); line-height:1.4; margin:0 0 12px; }
.mfe-modal .mfe-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.4px; color:#A9ACB1; margin:0 0 6px; }
.mfe-modal .mfe-pair{ display:flex; gap:8px; margin-bottom:12px; }
.mfe-modal .mfe-thumb{ position:relative; flex:1; border-radius:10px; overflow:hidden; border:1px solid var(--mfe-line,#E4E2DE); aspect-ratio:4/3; background:linear-gradient(45deg,#eee 25%,transparent 25%) 0 0/16px 16px, linear-gradient(-45deg,#eee 25%,transparent 25%) 0 0/16px 16px, linear-gradient(45deg,transparent 75%,#eee 75%) 0 0/16px 16px, linear-gradient(-45deg,transparent 75%,#eee 75%) 0 0/16px 16px, #fff; }
.mfe-modal .mfe-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.mfe-modal .mfe-pill{ position:absolute; top:6px; left:6px; z-index:2; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; color:#fff; }
.mfe-modal .mfe-pill.dark{ background:#3A3D42; }
.mfe-modal .mfe-pill.teal{ background:var(--mfe-teal,#3F938C); }
.mfe-modal .mfe-slider-wrap{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--mfe-line,#E4E2DE); aspect-ratio:2/1; margin-bottom:14px; cursor:ew-resize; background:linear-gradient(45deg,#eee 25%,transparent 25%) 0 0/16px 16px, linear-gradient(-45deg,#eee 25%,transparent 25%) 0 0/16px 16px, linear-gradient(45deg,transparent 75%,#eee 75%) 0 0/16px 16px, linear-gradient(-45deg,transparent 75%,#eee 75%) 0 0/16px 16px, #fff; }
.mfe-modal .mfe-slider-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.mfe-modal .mfe-slider-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mfe-modal .mfe-after-clip{ position:absolute; inset:0; overflow:hidden; }
.mfe-modal .mfe-handle{ position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.mfe-modal .mfe-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--mfe-teal,#3F938C); font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.mfe-modal-choices{ display:flex; gap:8px; }
.mfe-choice-btn{ flex:1; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; border:1.5px solid var(--mfe-line,#E4E2DE); background:#fff; color:var(--mfe-text,#1E2024); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mfe-choice-btn.primary{ border-color:var(--mfe-teal,#3F938C); background:var(--mfe-teal-tint,#E9F5F3); color:var(--mfe-teal-dark,#2E706A); }

/* Bild-Zoom — legt sich über alles, auch über eine offene Vergleichen-Modal. */
.mfe-zoom-overlay{ position:fixed; inset:0; z-index:10001; background:rgba(10,10,12,.82); display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:24px; }
.mfe-zoom-overlay img{ width:92vw; height:88vh; object-fit:contain; background:repeating-conic-gradient(#333 0% 25%, #222 0% 50%) 0 0/16px 16px; border-radius:6px; }