.flip-card{perspective:1000px}
.flip-inner{position:relative;width:100%;padding-top:130%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.flip-card:hover .flip-inner,.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:.75rem;overflow:hidden;background:#0d1b2e}
.flip-back{transform:rotateY(180deg)}
.flip-front img,.flip-back img{width:100%;height:100%;object-fit:contain;padding:.5rem}
.trikot-card{background:#0d1b2e;border-radius:1rem;border:1px solid rgba(255,255,255,0.07);box-shadow:0 2px 10px rgba(0,0,0,.3);transition:box-shadow .25s,transform .25s;overflow:hidden}
.trikot-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.5);transform:translateY(-3px)}
.hchip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all .18s;background:rgba(255,255,255,0.07);color:#cbd5e1;user-select:none;white-space:nowrap}
.hchip:hover{background:rgba(255,255,255,0.12)}
.hchip.active{color:#fff}
.hdot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1.5px solid rgba(255,255,255,0.2)}
.mchip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:500;cursor:pointer;border:2px solid rgba(255,255,255,0.1);transition:all .15s;background:rgba(255,255,255,0.05);color:#94a3b8;user-select:none;white-space:nowrap}
.mchip:hover{border-color:rgba(255,255,255,0.25);color:#e2e8f0}
.mchip.active{background:#4f46e5;color:#fff;border-color:#4f46e5}
.schip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:500;cursor:pointer;border:2px solid rgba(255,255,255,0.1);transition:all .15s;background:rgba(255,255,255,0.05);color:#94a3b8;user-select:none;white-space:nowrap}
.schip:hover{border-color:rgba(255,255,255,0.25);color:#e2e8f0}
.schip.active{background:#1e3a5f;color:#fff;border-color:#3b82f6}
.sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,0.2)}
.alle-chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all .18s;background:#eab308;color:#0f172a;user-select:none}
.alle-chip.off{background:rgba(255,255,255,0.07);color:#94a3b8}
.filter-bar{position:sticky;top:64px;z-index:40;background:rgba(4,9,15,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.07)}
.atag{display:inline-flex;align-items:center;gap:3px;background:#1e3a5f;color:#93c5fd;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:600}
.atag button{background:none;border:none;color:rgba(147,197,253,.7);cursor:pointer;font-size:.75rem;line-height:1;padding:0 0 0 2px}
.atag.muster-tag{background:#312e81;color:#a5b4fc}
.flip-hint{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.5);color:#fff;font-size:.6rem;padding:2px 7px;border-radius:999px;pointer-events:none;z-index:10}
#lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);align-items:center;justify-content:center}
#lightbox.open{display:flex}
#lightbox img{max-height:85vh;max-width:88vw;object-fit:contain;border-radius:1rem}
#lb-prev,#lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;border:none;width:46px;height:46px;border-radius:50%;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
#lb-prev:hover,#lb-next:hover{background:rgba(255,255,255,.25)}
#lb-prev{left:14px}#lb-next{right:14px}
#lb-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.12);color:#fff;border:none;width:38px;height:38px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
#lb-label{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:.82rem;background:rgba(0,0,0,.6);padding:5px 14px;border-radius:999px;white-space:nowrap}
.badge-muster{font-size:.63rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#475569}
#no-results{display:none}
.mgl{font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#475569;margin-right:3px}
#muster-drawer{display:none;border-top:1px solid rgba(255,255,255,0.06);padding-top:8px;margin-top:4px}
#muster-drawer.open{display:block}
#sub-farb-panel{display:none;border-top:1px solid rgba(255,255,255,0.06);padding-top:6px;margin-top:4px}
#sub-farb-panel.open{display:block}

/* === Bearbeitungsbereich: Bild-Zoom bei Hover/Klick === */
.edit-img-wrap{
  display:inline-block;
  position:relative;
  cursor:zoom-in;
  transition:transform .25s cubic-bezier(.4,0,.2,1), z-index 0s;
  z-index:1;
}
.edit-img-wrap:hover,
.edit-img-wrap.zoomed{
  transform:scale(2);
  z-index:100;
  cursor:zoom-out;
}
.edit-img-wrap img{
  display:block;
  max-width:100%;
  border-radius:.5rem;
}