{"product_id":"herren-siegelring-vergoldet-onyx-tigerauge","title":"Vergoldeter Herren Siegelring mit Gravur | Schwarz-Onyx, Tigerauge \u0026 Rot-Onyx","description":"\u003c!-- Fonts \u0026 Icons --\u003e\n\u003clink href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700\u0026amp;family=Inter:wght@300;400;500;600\u0026amp;family=Allura\u0026amp;family=Alex+Brush\u0026amp;family=Kaushan+Script\u0026amp;family=Pacifico\u0026amp;family=Indie+Flower\u0026amp;family=Dancing+Script\u0026amp;display=swap\" rel=\"stylesheet\"\u003e\n\u003clink href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.1\/font\/bootstrap-icons.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- SEO: Titel \u0026 Meta-Beschreibung im Admin unter \"Suchmaschinen-Eintrag bearbeiten\" pflegen --\u003e\n\n\u003cstyle\u003e\n\/* ─── KONFIGURATOR jm-cfg-* ─────────────────────────────────────── *\/\n.jm-cfg-wrap * { box-sizing: border-box; }\n.jm-cfg-wrap { font-family: 'Inter', sans-serif; background: #f5f2ed; padding: 0 0 60px; }\n.jm-cfg-header { text-align: center; padding: 40px 20px 28px; background: #f5f2ed; }\n.jm-cfg-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; color: #9a8050; font-weight: 600; margin-bottom: 12px; }\n.jm-cfg-eyebrow::before, .jm-cfg-eyebrow::after { content: ''; display: inline-block; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #bfac79); }\n.jm-cfg-headline { display: block; font-family: 'Playfair Display', serif; font-size: 40px; color: #1a1410; line-height: 1.15; margin-bottom: 14px; margin-top: 30px !important; text-transform: initial; letter-spacing: 0.2px; }\n@media (max-width: 680px) { .jm-cfg-headline { font-size: 20px; } }\n.jm-cfg-subline { font-size: 14px; color: #7a6a4a; max-width: 420px; margin: 0 auto 28px; line-height: 1.6; }\n.jm-cfg-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 8px; }\n.jm-cfg-step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }\n.jm-cfg-step-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #d4c5a0; background: #f5f2ed; color: #a89060; font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.35s ease; position: relative; z-index: 1; }\n.jm-cfg-step-item.active .jm-cfg-step-circle { background: #fff; border-color: #c9a84c; color: #c9a84c; box-shadow: 0 0 0 4px rgba(201,168,76,0.15); }\n.jm-cfg-step-item.done .jm-cfg-step-circle { background: #c9a84c; border-color: #c9a84c; color: #fff; }\n.jm-cfg-step-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #a89060; font-weight: 600; transition: color 0.3s; }\n.jm-cfg-step-item.active .jm-cfg-step-label, .jm-cfg-step-item.done .jm-cfg-step-label { color: #c9a84c; }\n.jm-cfg-step-line { width: 80px; height: 2px; background: #d4c5a0; margin: 0 6px; margin-bottom: 22px; transition: background 0.4s ease; }\n.jm-cfg-step-line.done { background: #c9a84c; }\n@media (max-width: 480px) { .jm-cfg-step-line { width: 40px; } }\n.jm-cfg-progress-bar { height: 2px; background: #e0d8cc; margin: 0 auto; max-width: 680px; border-radius: 2px; overflow: hidden; }\n.jm-cfg-progress-fill { height: 100%; background: linear-gradient(90deg, #c9a84c, #e8c96a); border-radius: 2px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); width: 0%; }\n.jm-cfg-card { background: #fff; border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.08); max-width: 820px; margin: 24px auto 0; overflow: hidden; display: none; animation: jmCfgFadeIn 0.4s ease; }\n @media (max-width: 768px) { .jm-cfg-wrap { max-width: 1020px; } }\n.jm-cfg-card.active { display: block; }\n@keyframes jmCfgFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }\n.jm-cfg-card-body { padding: 32px 32px 24px; }\n@media (max-width: 600px) { .jm-cfg-card-body { padding: 22px 4px 18px; } }\n#jm-cfg-card-2 { max-width: 980px; }\n.jm-cfg-s1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }\n@media (max-width: 640px) { .jm-cfg-s1-grid { grid-template-columns: 1fr; gap: 20px; } }\n.jm-cfg-s1-left h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: #1a1410; margin: 0 0 6px; }\n.jm-cfg-s1-left p { font-size: 13px; color: #7a6a4a; margin: 0 0 20px; line-height: 1.55; }\n.jm-cfg-stone-list { display: flex; flex-direction: column; gap: 10px; }\n.jm-cfg-stone-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid #e8e0d0; border-radius: 12px; cursor: pointer; transition: all 0.25s ease; background: #faf9f7; }\n.jm-cfg-stone-option:hover { border-color: #c9a84c; background: #fdf8f0; }\n.jm-cfg-stone-option.active { border-color: #c9a84c; background: #fdf8f0; box-shadow: 0 0 0 3px rgba(201,168,76,0.12); }\n.jm-cfg-stone-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }\n.jm-cfg-stone-dot.onyx { background: #1a1a1a; border: 1px solid #444; }\n.jm-cfg-stone-dot.tiger { background: radial-gradient(circle at 40% 40%, #c08830, #7a4e10); }\n.jm-cfg-stone-dot.rot { background: radial-gradient(circle at 40% 40%, #c0392b, #6e1414); }\n.jm-cfg-stone-info { flex: 1; }\n.jm-cfg-stone-name { display: block; font-weight: 700; font-size: 14px; color: #1a1410; margin-bottom: 2px; }\n.jm-cfg-stone-desc { display: block; font-size: 12px; color: #9a8a6a; }\n.jm-cfg-stone-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d4c5a0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }\n.jm-cfg-stone-option.active .jm-cfg-stone-check { background: #c9a84c; border-color: #c9a84c; }\n.jm-cfg-stone-check::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 0.2s; }\n.jm-cfg-stone-option.active .jm-cfg-stone-check::after { opacity: 1; }\n.jm-cfg-size-strip { margin-top: 16px; padding: 10px 14px; background: #f5f2ed; border-radius: 8px; font-size: 12px; color: #7a6a4a; border-left: 3px solid #c9a84c; }\n.jm-cfg-size-strip strong { color: #1a1410; }\n\/* Größenwahl (vergoldete Variante) *\/\n.jm-gs-size-title { display: block; margin: 22px 0 10px; font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #1a1410; }\n.jm-gs-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }\n.jm-gs-size { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1.5px solid #e8e0d0; border-radius: 12px; background: #faf9f7; cursor: pointer; font-family: inherit; transition: all 0.25s ease; }\n.jm-gs-size strong { font-size: 15px; color: #1a1410; }\n.jm-gs-size small { font-size: 11px; color: #9a8a6a; line-height: 1.35; text-align: center; }\n.jm-gs-size:hover { border-color: #c9a84c; background: #fdf8f0; }\n.jm-gs-size.active { border-color: #c9a84c; background: #fdf8f0; box-shadow: 0 0 0 3px rgba(201,168,76,0.12); }\n.jm-gs-size.unavailable { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }\n.jm-gs-shake { animation: jmGsShake 0.35s ease; }\n@keyframes jmGsShake { 0%,100% { transform: translateX(0); } 25%,75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }\n.jm-rsz-tr[data-size] { cursor: pointer; }\n.jm-cfg-ring-img-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #f0ece4; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }\n.jm-cfg-ring-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; transition: opacity 0.4s ease; display: block; }\n.jm-cfg-ring-img-hover { position: absolute; inset: 0; opacity: 0; }\n.jm-cfg-ring-img-label { position: absolute; top: 12px; left: 12px; background: rgba(201,168,76,0.9); color: #1a1410; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }\n.jm-cfg-ring-img-caption { text-align: center; font-size: 12px; color: #9a8a6a; margin-top: 10px; font-style: italic; }\n.jm-cfg-s2-wrap .engraving-preview-section { padding: 0 !important; background: transparent !important; }\n.jm-cfg-s2-wrap .engraving-preview-grid { gap: 40px; }\n.jm-cfg-s3-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #1a1410; text-align: center; margin: 0 0 6px; }\n.jm-cfg-s3-subtitle { text-align: center; font-size: 13px; color: #7a6a4a; margin: 0 0 28px; }\n.jm-cfg-s3-grid { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; margin-bottom: 24px; }\n@media (max-width: 540px) { .jm-cfg-s3-grid { grid-template-columns: 1fr; } }\n.jm-cfg-s3-thumb { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; border: 2px solid #e8e0d0; }\n.jm-cfg-s3-product-name { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: #1a1410; margin: 0 0 16px; }\n.jm-cfg-s3-rows { display: flex; flex-direction: column; gap: 0; }\n.jm-cfg-s3-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0ece4; font-size: 13px; }\n.jm-cfg-s3-row:last-child { border-bottom: none; }\n.jm-cfg-s3-row-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #a89060; font-weight: 700; }\n.jm-cfg-s3-row-value { color: #1a1410; font-weight: 600; font-size: 13px; text-align: right; }\n.jm-cfg-s3-gravur-box { background: linear-gradient(135deg, #1a1410, #2a1f10); border: 1px solid rgba(201,168,76,0.3); border-radius: 12px; padding: 18px 20px; margin-bottom: 24px; }\n.jm-cfg-s3-gravur-eyebrow { display: block; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #c9a84c; font-weight: 700; margin-bottom: 10px; }\n.jm-cfg-s3-gravur-text { display: block; font-size: 1.5rem; color: #f7f0e3; margin-bottom: 6px; min-height: 2rem; }\n.jm-cfg-s3-gravur-meta { display: block; font-size: 11px; color: #8a7055; }\n.jm-cfg-s3-price-wrap { margin-bottom: 20px; }\n.jm-cfg-s3-price-wrap .price-item--regular:not(s) { font-family: 'Playfair Display', serif; font-size: 2rem; color: #1a1410; font-weight: 700; }\n.jm-cfg-s3-price-wrap s.price-item--regular { font-size: 1.1rem; color: #a89060; margin-left: 8px; text-decoration: line-through; }\n.jm-cfg-s3-price-wrap .price__badge--sale span { background: #c9a84c; color: #1a1410; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: 10px; vertical-align: middle; }\n.jm-cfg-s3-trust { display: flex; justify-content: center; gap: 24px; margin-top: 14px; flex-wrap: wrap; }\n.jm-cfg-s3-trust span { font-size: 11px; color: #9a8a6a; display: flex; align-items: center; gap: 5px; }\n.jm-cfg-s3-trust i { color: #c9a84c; }\n.jm-cfg-s3-note { margin-top: 16px; font-size: 11px; color: #a89060; text-align: right; line-height: 1.5; }\n.jm-cfg-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px 24px; border-top: 1px solid #f0ece4; }\n@media (max-width: 600px) { .jm-cfg-card-footer { padding: 14px 18px 20px; } }\n.jm-cfg-btn-back { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: transparent; border: 1.5px solid #d4c5a0; border-radius: 10px; color: #7a6a4a; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }\n.jm-cfg-btn-back:hover { border-color: #c9a84c; color: #c9a84c; }\n.jm-cfg-btn-back[hidden] { visibility: hidden; pointer-events: none; }\n.jm-cfg-btn-next { display: flex; align-items: center; gap: 10px; padding: 10px 17px; background: #1a1410; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.2px; }\n.jm-cfg-btn-next:hover { background: #c9a84c; color: #1a1410; transform: translateX(2px); }\n.jm-cfg-btn-next i { transition: transform 0.2s; }\n.jm-cfg-btn-next:hover i { transform: translateX(3px); }\n#jm-cfg-card-3 .jm-cfg-card-footer { border-top: none; padding-top: 0; }\n\n\/* ── PRODUCT STYLES ── *\/\n.engraving-product { font-family: 'Inter', sans-serif; color: #111; }\n.engraving-product .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }\n.engraving-product .container2 { max-width: 1200px; width: 110%; margin: 0 auto; padding: 0 20px; }\n.engraving-hero { padding: 80px 20px; background: #f9f9f9; }\n.engraving-hero-grid-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 15px; }\n.engraving-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }\n.engraving-hero-text { display: flex; flex-direction: column; justify-content: center; }\n.engraving-badge { display: inline-block; margin-bottom: 16px; font-size: 1.2rem; padding: 6px 14px; border-radius: 999px; background: #f4f1e8; color: #7a6a3a; font-weight: 600; }\n.engraving-badge i { font-size: 1.2rem; }\n.engraving-hero-text h1 { font-size: 3.8rem; line-height: 1.2; margin-bottom: 20px; color: #222; font-weight: 600; font-family: 'Playfair Display', serif; }\n.engraving-hero-text p { font-size: 1.4rem; color: #555; margin-bottom: 25px; }\n.engraving-trust { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 20px; color: #777; }\n.engraving-trust span { display: flex; align-items: center; gap: 8px; }\n.engraving-image { display: flex; align-items: flex-start; justify-content: center; }\n.watch-image { position: relative; width: 140%; max-width: 550px; }\n.watch-image img { width: 100%; object-fit: contain; border-radius: 30px; box-shadow: 0 2px 28px rgb(0 0 0 \/ 47%); transition: opacity 0.45s ease; display: block; }\n.watch-img-hover { position: absolute; inset: 0; opacity: 0; }\n.watch-image:hover .watch-img-primary { opacity: 0; }\n.watch-image:hover .watch-img-hover { opacity: 1; }\n.watch-image.swapping .watch-img-primary, .watch-image.swapping .watch-img-hover { transition: opacity .6s ease; }\n@media (max-width: 992px) { .engraving-hero-grid { grid-template-columns: 1fr; gap: 50px; } .engraving-image { justify-content: center; } .engraving-hero-text h1 { font-size: 2.4rem; margin-top: -40px !important; } }\n.engraving-section { padding: 40px 0; }\n.engraving-section h2 { font-family: 'Playfair Display', serif; font-size: 38px; margin-bottom: 20px; }\n.engraving-section-desc { max-width: 720px; color: #666; margin-bottom: 60px; }\n.engraving-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }\n.engraving-feature { background: #fff; padding: 40px; border-radius: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.06); transition: transform .4s ease; }\n.engraving-feature:hover { transform: translateY(-6px); }\n.engraving-feature i { font-size: 32px; color: #b6a573; margin-bottom: 14px; display: inline-block; }\n.engraving-feature h3 { margin-bottom: 10px; font-size: 18px; }\n.engraving-feature p { font-size: 15px; color: #666; }\n.engraving-specs { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; margin-top: 30px; }\n.engraving-specs ul { list-style: none; padding: 0; margin: 0; }\n.engraving-specs ul li { display: flex; align-items: center; gap: 10px; color: #555; margin-bottom: 12px; padding: 12px 0; border-bottom: 1px solid #eee; font-size: 15px; }\n.engraving-specs ul li i { color: #bfac79; transition: transform 0.3s ease, color 0.3s ease; }\n.engraving-specs ul li:hover i { transform: scale(1.3); color: #9f8650; }\n@media (max-width: 768px) { .engraving-specs { flex-direction: column; align-items: center; gap: 25px; } .engraving-specs ul { text-align: center; } }\n.engraving-cta-strip { background: linear-gradient(135deg, #111, #1c1c1c); color: #fff; padding: 80px 20px; text-align: center; }\n.engraving-cta-strip h2 { color: #fff; margin-bottom: 20px; }\n.engraving-cta-strip p { color: #ccc; margin-bottom: 30px; }\n.engraving-fade { opacity: 0; transform: translateY(30px); transition: 1s ease; }\n.engraving-fade.show { opacity: 1; transform: none; }\n.engraving-collection-btn { position: relative; padding: 14px 28px; border-radius: 999px; background: linear-gradient(135deg, #c7aaaa, #1a1a1a); color: #fff; font-weight: 400; font-size: 13px; letter-spacing: .5px; border: 1px solid rgba(220,184,75,0.6); cursor: pointer; overflow: hidden; transition: all .35s ease; }\n.engraving-collection-btn:hover { transform: translateY(-1px); box-shadow: 0 0 25px rgba(220,184,75,.45), inset 0 0 20px rgba(220,184,75,.15); color: #ffdd7a; }\n.engraving-collection-btn::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at 50% 120%, rgba(220,184,75,.35), transparent 65%); opacity: .45; pointer-events: none; }\n.engraving-collection-btn i { margin-left: 8px; }\n.micro-trust-valentine { margin-top: 1.5rem; font-size: 1.3rem; color: #746742; font-weight: 600; }\n.hero-subline { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }\n.hero-subline .engraving-badge { font-size: 1.1rem; opacity: 0.85; }\n@media (max-width: 768px) { .hero-subline { justify-content: center; } }\n.luxury-shine-btn { position: relative; font-size: 1.2rem; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; color: #e6d3a3; background: linear-gradient(180deg, #141414, #0d0d0d); border: 1px solid rgba(201,168,92,0.45); overflow: hidden; isolation: isolate; transition: transform 0.25s ease, box-shadow 0.25s ease; }\n.luxury-shine-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,168,92,0.35); }\n.luxury-shine-btn::before { content: \"\"; position: absolute; top: -60%; left: -120%; width: 60%; height: 220%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,214,130,0.65) 50%, rgba(255,255,255,0) 65%, transparent 100%); transform: skewX(-20deg); opacity: 0.9; animation: goldLaser 3s ease-in-out infinite; }\n@keyframes goldLaser { 0% { left: -120%; } 55% { left: 140%; } 100% { left: 140%; } }\n.luxury-shine-btn i { color: #c9a85c; font-size: 1.1em; }\n.live-preview-link.luxury { margin-left: 8px; font-weight: 600; color: #ab8e4c; text-decoration: none; position: relative; letter-spacing: 0.02em; transition: color 0.25s ease, opacity 0.25s ease; }\n.live-preview-link.luxury::after { content: \"\"; position: absolute; left: 0; bottom: -2px; width: 0%; height: 1px; background: linear-gradient(90deg, rgba(201,168,92,0), rgba(201,168,92,0.9), rgba(201,168,92,0)); transition: width 0.35s ease; }\n.live-preview-link.luxury:hover::after { width: 100%; }\n.live-preview-link.luxury:hover { opacity: 0.9; }\n.engraving-stone-selector { display: flex; gap: 16px; margin: 20px 0 30px; flex-wrap: wrap; }\n.stone-btn { border: 2px solid #ddd; background: #fff; border-radius: 14px; padding: 12px 20px; cursor: pointer; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease; }\n.stone-btn .stone-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex-shrink: 0; }\n.stone-btn.onyx .stone-dot { background: #1a1a1a; border: 1px solid #444; }\n.stone-btn.tiger .stone-dot { background: radial-gradient(circle at 40% 40%, #c08830, #7a4e10); }\n.stone-btn.rot .stone-dot { background: radial-gradient(circle at 40% 40%, #c0392b, #6e1414); }\n.stone-btn:hover { border-color: #bfac79; transform: translateY(-2px); }\n.stone-btn.active { background: #f7f4ef; border-color: #bfac79; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }\n@media (max-width: 768px) { .engraving-stone-selector { gap: 10px; } .stone-btn { width: 100%; max-width: 260px; } }\n.size-info { margin-top: 10px; margin-bottom: 10px; }\n.size-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }\n.shape-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: 0.5px; background: #f5f5f5; color: #333; border: 2px solid #e0e0e0; margin-right: 10px; margin-top: 8px; border-radius: 6px; transition: all 0.25s ease; }\n.shape-badge:hover { border-color: #b6a573; color: #34aa8b; transform: translateY(-2px); }\n\n\/* RINGGROESSE *\/\n.jm-rsz-section { background: linear-gradient(160deg, #2a2018 0%, #1a1410 55%, #241c0e 100%); padding: 56px 24px 52px; position: relative; }\n.jm-rsz-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 65%); pointer-events: none; }\n.jm-rsz-inner { max-width: 1200px; margin: 0 auto; }\n.jm-rsz-header { text-align: center; margin-bottom: 40px; }\n.jm-rsz-eyebrow { display: block; font-family: 'Playfair Display', serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #c9a84c; margin-bottom: 8px; opacity: 0.75; }\n.jm-rsz-title { display: block; font-family: 'Playfair Display', serif; font-size: 28px; color: #f7f0e3; line-height: 1.2; margin-bottom: 10px; }\n.jm-rsz-subtitle { display: block; color: #8a7055; font-size: 14px; font-weight: 300; letter-spacing: 0.3px; }\n.jm-rsz-grid { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 40px; align-items: start; }\n@media (max-width: 900px) { .jm-rsz-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .jm-rsz-col--svg { grid-column: 1 \/ -1; display: flex; justify-content: center; } }\n@media (max-width: 560px) { .jm-rsz-grid { grid-template-columns: 1fr; gap: 24px; } .jm-rsz-col--svg { grid-column: auto; } }\n.jm-rsz-svg-wrap svg { filter: drop-shadow(0 0 18px rgba(201,168,76,0.22)); display: block; }\n.jm-rsz-col--anno { display: flex; flex-direction: column; gap: 14px; }\n.jm-rsz-anno { background: rgba(201,168,76,0.07); border-left: 3px solid #c9a84c; border-radius: 4px; padding: 12px 16px; }\n.jm-rsz-anno-label { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #c9a84c; font-weight: 700; margin-bottom: 4px; }\n.jm-rsz-anno-value { display: block; font-family: 'Playfair Display', serif; font-size: 20px; color: #f7f0e3; line-height: 1.15; margin-bottom: 5px; }\n.jm-rsz-anno-desc { display: block; font-size: 13px; color: #8a7055; line-height: 1.55; }\n.jm-rsz-anno-desc strong { color: #e8c96a; font-weight: 500; }\n.jm-rsz-tip { display: flex; gap: 12px; background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.2); border-radius: 6px; padding: 12px 14px; align-items: flex-start; margin-top: 4px; }\n.jm-rsz-tip-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }\n.jm-rsz-tip-title { display: block; font-size: 13px; font-weight: 700; color: #e8c96a; margin-bottom: 4px; }\n.jm-rsz-tip-text { display: block; font-size: 12px; color: #8a7055; line-height: 1.55; }\n.jm-rsz-tip-text strong { color: #e8c96a; font-weight: 500; }\n.jm-rsz-col--guide { display: flex; flex-direction: column; gap: 16px; }\n.jm-rsz-block-title { display: block; font-family: 'Playfair Display', serif; font-size: 13px; color: #c9a84c; letter-spacing: 1px; margin-bottom: 4px; text-transform: uppercase; }\n.jm-rsz-steps { display: flex; flex-direction: column; gap: 10px; }\n.jm-rsz-step { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(201,168,76,0.12); border-radius: 6px; padding: 11px 14px; }\n.jm-rsz-step-num { flex-shrink: 0; width: 26px; height: 26px; border: 1.5px solid rgba(201,168,76,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 12px; color: #c9a84c; font-weight: 700; margin-top: 1px; }\n.jm-rsz-step-title { display: block; font-weight: 700; font-size: 13px; color: #f7f0e3; margin-bottom: 3px; }\n.jm-rsz-step-text { display: block; font-size: 12px; color: #8a7055; line-height: 1.5; }\n.jm-rsz-step-text strong { color: #e8c96a; font-weight: 500; }\n.jm-rsz-table-wrap { overflow-x: auto; }\n.jm-rsz-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 280px; }\n.jm-rsz-thead { display: table-header-group; }\n.jm-rsz-tbody { display: table-row-group; }\n.jm-rsz-thead .jm-rsz-tr { border-bottom: 1px solid rgba(201,168,76,0.35); }\n.jm-rsz-th { text-align: left; padding: 7px 10px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #c9a84c; font-weight: 500; }\n.jm-rsz-tbody .jm-rsz-tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; }\n.jm-rsz-tbody .jm-rsz-tr:hover { background: rgba(201,168,76,0.05); }\n.jm-rsz-tbody .jm-rsz-tr.jm-rsz-hl { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); }\n.jm-rsz-td { padding: 8px 10px; color: #8a7055; font-size: 13px; }\n.jm-rsz-td:first-child { color: #f7f0e3; font-weight: 700; }\n.jm-rsz-tbody .jm-rsz-tr.jm-rsz-hl .jm-rsz-td { color: #f7f0e3; }\n.jm-rsz-hl-badge { display: inline-block; background: #c9a84c; color: #1a1410; font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; margin-left: 6px; font-weight: 700; vertical-align: middle; }\n\n\/* SHIPPING *\/\n.engraving-shipping { padding: 20px 0; background: linear-gradient(180deg, #faf9f7 0%, #ffffff 100%); }\n.engraving-shipping-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }\n.engraving-shipping h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 40px; color: #1f2a2a; text-align: center; }\n.shipping-item { text-align: center; padding: 40px 28px; background: #fff; border-radius: 20px; box-shadow: 0 18px 45px rgba(0,0,0,0.06); transition: transform 0.4s ease, box-shadow 0.4s ease; }\n.shipping-item:hover { transform: translateY(-6px); box-shadow: 0 28px 65px rgba(0,0,0,0.1); }\n.shipping-item i { font-size: 2.8rem; color: #bfac79; margin-bottom: 18px; }\n.shipping-item h3 { font-size: 1.6rem; margin-bottom: 10px; font-weight: 600; color: #1f2a2a; margin-top: 10px; }\n.shipping-item p { font-size: 1.3rem; color: #555; line-height: 1.6; }\n@media (max-width: 900px) { .engraving-shipping-grid { grid-template-columns: 1fr; gap: 28px; } .shipping-item { padding: 32px 22px; } }\n\n\/* WHY *\/\n.engraving-why-heart { padding: 80px 0; background: #faf9f7; text-align: center; }\n.engraving-why-heart h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 16px; color: #1f2a2a; }\n.engraving-why-heart p { max-width: 650px; margin: 0 auto 50px auto; font-size: 1.3rem; line-height: 1.7; color: #555; }\n.engraving-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }\n@media (max-width: 1200px) { .engraving-why-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }\n@media (max-width: 700px) { .engraving-why-grid { grid-template-columns: 1fr; gap: 25px; } .engraving-why-heart p { margin-bottom: 40px; } }\n\n\/* WARNING *\/\n.jm-rgt-warning { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #2a1f0a, #1e1608); border: 1px solid rgba(201,168,76,0.35); border-left: 4px solid #c9a84c; border-radius: 10px; padding: 18px 20px; margin-bottom: 40px; }\n.jm-rgt-warning-icon { font-size: 22px; color: #c9a84c; flex-shrink: 0; margin-top: 1px; }\n.jm-rgt-warning-title { display: block; font-size: 14px; font-weight: 700; color: #f7f0e3; margin-bottom: 6px; }\n.jm-rgt-warning-text { display: block; font-size: 13px; color: #8a7055; line-height: 1.65; }\n.jm-rgt-warning-text strong { color: #e8c96a; font-weight: 500; }\n\n\/* PREVIEW SECTION *\/\n.engraving-preview-section { padding: 40px 0; background: #ffffff; }\n.engraving-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\n.engraving-preview-image { position: relative; max-width: 560px; }\n.engraving-preview-image img { width: 100%; border-radius: 28px; transition: opacity 0.3s ease; }\n @media (max-width: 768px) {\n .engraving-preview-image img {\n border-radius: 0 !important; \/* ❌ kein Abschneiden mehr *\/\n transform: scale(1.4); \/* 🔥 deutlich größer *\/\n }\n}\n.engraving-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }\n.engraving-overlay.active { opacity: 1; transform: translateY(0); }\n.engraving-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }\n.engraving-arc-text { font-size: 3px; letter-spacing: 0; fill: rgb(210 195 160 \/ 92%); font-style: italic; filter: drop-shadow(0 0.3px 0.5px rgba(0,0,0,0.8)) drop-shadow(0 -0.3px 0 rgba(255,255,255,0.1)); }\n.engraving-arc-popup-text { font-size: 3px; letter-spacing: 0; fill: rgb(210 195 160 \/ 92%); filter: drop-shadow(0 0.3px 0.5px rgba(0,0,0,0.8)) drop-shadow(0 -0.3px 0 rgba(255,255,255,0.1)); }\n@media (max-width: 1200px) { .engraving-arc-text { font-size: 3.5px; } }\n@media (max-width: 900px) { .engraving-arc-text { font-size: 4px; } }\n@media (max-width: 768px) { .engraving-arc-text { font-size: 5px; } }\n@media (max-width: 480px) { .engraving-arc-text { font-size: 3px; } .engraving-arc-popup-text { font-size: 15px; } }\n@media (max-width: 900px) { #engravingOverlay svg { transform: translateX(3%) translateY(2%); } }\n@media (max-width: 768px) { #engravingOverlay svg { transform: translateX(3%) translateY(0%); } }\n@media (max-width: 480px) { #engravingOverlay svg { transform: translateX(1%) translateY(-5%); } }\n@media (max-width: 768px) { #engraving-mobile-popup .engraving-overlay svg { transform: translateX(3%) translateY(9.8%); } }\n@media (min-width: 480px) { #engraving-mobile-popup .engraving-overlay svg { transform: translateX(3%) translateY(10.8%); } }\n.engraving-preview-content h2 { font-size: 2.1rem; margin-bottom: 12px; color: #2a1f10; font-weight: 600; margin-top: 25px; }\n.engraving-preview-content p { max-width: 480px; margin-bottom: 28px; color: #555; line-height: 1.6; }\n.engraving-input-wrap, .engraving-font-select { margin-bottom: 18px; }\n.engraving-input-wrap label, .engraving-font-select label { display: block; font-weight: 600; margin-bottom: 6px; }\n.engraving-input-wrap input, .engraving-font-select select { width: 50%; padding: 14px 16px; border-radius: 12px; border: 1px solid #ddd; font-size: 1.5rem; }\n.engraving-input-wrap input:focus, .engraving-font-select select:focus { outline: none; border-color: #bfac79; }\n.engraving-input-wrap small { display: block; margin-top: 6px; font-size: 0.85rem; color: #777; }\n.engraving-symbol-picker { margin-bottom: 22px; }\n.symbol-title { display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; color: #444; }\n.symbol-list { display: flex; gap: 10px; flex-wrap: wrap; }\n.symbol-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #ddd; background: #fff; font-size: 2rem; cursor: pointer; transition: all 0.25s ease; }\n.symbol-btn:hover { border-color: #bfac79; background: #f6f3ea; transform: translateY(-2px); }\n.symbol-btn:active { transform: scale(1.05); background: #d7bf78; }\n.engraving-font-picker { margin-bottom: 28px; }\n.font-picker-label { display: block; margin-bottom: 12px; }\n.font-group { margin-bottom: 16px; }\n.font-group-title { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #777; margin-bottom: 8px; }\n.font-btn { display: inline-block; margin: 6px 6px 0 0; padding: 12px 16px; border-radius: 14px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 1.05rem; transition: all 0.25s ease; }\n.font-btn.script { font-size: 1.2rem; }\n.font-btn:hover { border-color: #bfac79; transform: translateY(-1px); }\n.font-btn.active { border-color: #bfac79; background: rgba(191,172,121,0.15); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }\n.innengravur-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #2a1f10, #3d2c0e); color: #e6d3a3; border: 1px solid rgba(201,168,92,0.4); border-radius: 999px; padding: 6px 14px; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 12px; }\n.innengravur-badge i { color: #c9a85c; }\n.jm-grav-trust-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4b8484; margin-top: 16px; }\n.jm-grav-trust-line i { color: #4b8484; }\n@media (max-width: 900px) { .engraving-preview-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; } .engraving-preview-image { margin: 0 auto; } }\n@media (max-width: 640px) {\n .font-group { display: grid; grid-template-columns: auto 1fr; column-gap: 50px; align-items: start; margin-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 12px; }\n .font-group-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }\n .font-btn { height: 42px; padding: 0 6px; font-size: 0.9rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1; }\n .font-btn.script { font-size: 1rem; }\n .symbol-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }\n .symbol-btn { height: 44px; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 10px; }\n .font-group-title { font-size: 0.75rem; font-weight: 600; opacity: 0.6; white-space: nowrap; padding-top: 12px; }\n}\n.preview-check { font-size: 14px; opacity: 0; transform: scale(0.6); transition: opacity 0.25s ease, transform 0.25s ease; }\n.preview-check.show { opacity: 1; transform: scale(1); }\n@keyframes engraveFade { 0% { text-shadow: 0 0 0 rgba(191,172,121,0); } 40% { text-shadow: 0 0 6px rgba(191,172,121,0.55), 0 0 14px rgba(191,172,121,0.30); } 100% { text-shadow: 0 0 0 rgba(191,172,121,0); } }\n.engrave-fade { animation: engraveFade 0.9s ease-out; }\n@keyframes engravingPulse { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(191,172,121,0); } 40% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(191,172,121,0.25); } 100% { transform: scale(1); box-shadow: 0 0 0 rgba(191,172,121,0); } }\n.engraving-preview-image.pulse { animation: engravingPulse 0.6s ease-out; }\n.engraving-preview-note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(60,60,60,0.75); text-align: center; letter-spacing: 0.02em; }\n@media (max-width: 640px) { .engraving-preview-note { font-size: 12px; padding: 0 12px; } }\n\n\/* MOBILE POPUP *\/\n#engraving-mobile-popup { display: block; position: fixed; left: 0; right: 0; bottom: 285px; z-index: 9999; background: #6e644533; padding: 20px; box-shadow: 0 -10px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; }\n#engraving-mobile-popup.show { opacity: 1; transform: translateY(0); pointer-events: auto; }\n.popup-preview-check { position: absolute; top: 36%; right: 14%; font-size: 2rem; opacity: 0; transition: opacity 0.5s ease; }\n.popup-preview-check.show { opacity: 1; }\n@media (min-width: 769px) { #engraving-mobile-popup { display: none !important; } }\n#engraving-mobile-popup .engraving-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateX(3%) translateY(10.8%); }\n \/* ═══════════════════════════════════════════════════════\n TRUST BAR (LIGHT VERSION) AB HIER ins GLOBALE CSS DATEI\n═══════════════════════════════════════════════════════ *\/\n.trust-bar {\n position: relative;\n background: #ffffff;\n border-top: 1px solid rgba(191,172,121,0.25);\n border-bottom: 1px solid rgba(191,172,121,0.25);\n padding: 28px 40px;\n overflow: hidden;\n margin-bottom: 20px;\n}\n\n\/* ✨ subtiler Gold-Shimmer *\/\n.trust-bar::before {\n content: '';\n position: absolute;\n top: 0;\n left: -50%;\n width: 200%; \/* wichtig für sichtbare Bewegung *\/\n height: 100%;\n background: linear-gradient(\n 120deg,\n transparent 30%,\n rgba(191,172,121,0.18) 45%, \/* stärker sichtbar *\/\n rgba(191,172,121,0.28) 50%, \/* Highlight *\/\n rgba(191,172,121,0.18) 55%,\n transparent 70%\n );\n animation: trustShimmer 5s ease-in-out infinite;\n pointer-events: none;\n}\n\n@keyframes trustShimmer {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(50%);\n }\n}\n\n.trust-bar-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 32px;\n flex-wrap: wrap;\n}\n\n\/* 🔥 Text jetzt dunkler \u0026 edler *\/\n.trust-item-3d {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 14px;\n font-weight: 500;\n color: #746742;\n}\n\n.trust-item-3d i {\n font-size: 18px;\n color: #bfac79; \/* dein Gold *\/\n}\n\n\/* Divider dezenter *\/\n.trust-divider-v {\n width: 1px;\n height: 32px;\n background: rgba(0,0,0,0.08);\n}\n\n\/* 🟢 Live Dot bleibt sichtbar auf weiß *\/\n.live-dot-3d {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #4caf7d;\n box-shadow: 0 0 0 0 rgba(76,175,125,.4);\n animation: livePulse 2s infinite;\n flex-shrink: 0;\n}\n\n@keyframes livePulse {\n 0% { box-shadow: 0 0 0 0 rgba(76,175,125,.5); }\n 70% { box-shadow: 0 0 0 8px transparent; }\n 100% { box-shadow: 0 0 0 0 transparent; }\n}\n\n \/* ═══════════════════════════════════════════════════════\n SECTION SHARED (OPTIMIERT)\n═══════════════════════════════════════════════════════ *\/\n\n .section-dark {\n background: #ffff;\n padding: 120px 40px;\n }\n\n .section-cream {\n background: var(--cream);\n padding: 120px 40px;\n }\n\n .section-mid {\n background: #ffff;\n padding: 60px 15px;\n }\n\n .container-lg {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n \/* 🔥 Eyebrow *\/\n .section-eyebrow {\n display: inline-block;\n font-size: 14px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: #bfac79; \/* Gold sauber definiert *\/\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n \/* optional override für light *\/\n .section-eyebrow-dark {\n color: #bfac79;\n }\n\n \/* 🔥 Titel *\/\n .section-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(28px, 3.5vw, 52px);\n line-height: 1.1;\n font-weight: 600;\n color: #000;\n margin-bottom: 20px;\n }\n\n \/* ✅ Light Mode Titel *\/\n .section-title-dark {\n color: #ffffff; \/* statt var(--text) → edler, wärmer *\/\n }\n\n \/* 🔥 Subtext *\/\n .section-sub {\n font-size: 16px;\n line-height: 1.7;\n color: rgb(25 23 23 \/ 70%); \/* vorher zu schwach *\/\n max-width: 560px;\n }\n\n \/* ✅ Light Mode Subtext *\/\n .section-sub-dark {\n color: #746742; \/* dein Wunschton *\/\n }\n\n\/* ═══════════════════════════════════════════════════════\n WHY \/ FEATURES – 3D CARDS\n═══════════════════════════════════════════════════════ *\/\n.cards-3d-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 24px;\n margin-top: 64px;\n}\n @media (max-width: 768px) {\n .cards-3d-grid {\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))!important;\n }\n}\n\n.card-3d {\n position: relative;\n background: #faf9f7;\n border: 1px solid rgba(255,255,255,.07);\n border-radius: 20px;\n padding: 44px 36px;\n overflow: hidden;\n transition: transform 0.4s ease, box-shadow 0.4s ease;\n transform-style: preserve-3d;\n cursor: default;\n}\n.card-3d::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at 30% 0%, rgba(201,168,76,.08) 0%, transparent 60%);\n opacity: 0;\n transition: opacity .4s;\n}\n.card-3d::after {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n opacity: 0;\n transition: opacity .4s;\n}\n.card-3d:hover {\n transform: translateY(-6px);\n border-color: rgba(201,168,76,.3);\n box-shadow: 0 28px 65px rgba(0, 0, 0, 0.1);\n}\n.card-3d:hover::before, .card-3d:hover::after { opacity: 1; }\n\n.card-3d-icon {\n width: 56px;\n height: 56px;\n border-radius: 16px;\n background: rgba(201,168,76,.1);\n border: 1px solid rgba(201,168,76,.2);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n font-size: 24px;\n color: #bfac79;\n transition: all .4s;\n}\n.card-3d:hover .card-3d-icon {\n background: rgba(201,168,76,.18);\n box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);\n}\n.card-3d h3 {\n font-size: 17px;\n font-weight: 600;\n color: #000;\n margin-bottom: 10px;\n}\n.card-3d p {\n font-size: 14px;\n line-height: 1.65;\n color: #555;\n}\n\n\/* Cream variant *\/\n.card-3d-light {\n background: #fff;\n border-color: rgba(0,0,0,.06);\n}\n.card-3d-light::before {\n background: radial-gradient(ellipse at 30% 0%, rgba(201,168,76,.06) 0%, transparent 60%);\n}\n.card-3d-light:hover {\n box-shadow: 0 32px 80px rgba(0,0,0,.1), 0 0 30px rgba(201,168,76,.08);\n border-color: rgba(201,168,76,.3);\n}\n.card-3d-light h3 { color: #000; }\n.card-3d-light p { color: #7a6d47; }\n.card-3d-light .card-3d-icon {\n background: rgba(201,168,76,.08);\n}\n \/* ═══════════════════════════════════════════════════════\n SPECS – TWO COLUMN MINIMAL\n═══════════════════════════════════════════════════════ *\/\n.specs-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n margin-top: 60px;\n border-radius: 30px;\n background:radial-gradient(ellipse at 30% 0%, rgba(201, 168, 76, .08) 0%, transparent 60%);\n padding-right: 20px;\n}\n.specs-list {\n list-style: none;\n}\n.specs-list li {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px 0;\n border-bottom: 1px solid rgba(255,255,255,.06);\n font-size: 14px;\n color: #555;\n}\n.specs-list li i { color: #bfac79;\n transition: transform 0.3s ease, color 0.3s ease; font-size: 16px; flex-shrink: 0; }\n.specs-list li strong { color: #555; margin-right: 4px; }\n@media (max-width: 768px) { .specs-grid { grid-template-columns: 1fr 1fr; gap: 0; } }\n\/* ═══════════════════════════════════════════════════════\n SCROLL ANIMATIONS\n═══════════════════════════════════════════════════════ *\/\n.reveal,\n.reveal-left,\n.reveal-right,\n.reveal-scale {\n opacity: 0;\n will-change: transform, opacity;\n}\n\n\/* ↓ Standard *\/\n.reveal {\n transform: translateY(48px);\n transition: opacity .9s cubic-bezier(.22,1,.36,1),\n transform .9s cubic-bezier(.22,1,.36,1);\n}\n.reveal.in {\n opacity: 1;\n transform: translateY(0);\n}\n\n\/* ↓ LEFT *\/\n.reveal-left {\n transform: translateX(-60px);\n transition: opacity 1s cubic-bezier(.22,1,.36,1),\n transform 1s cubic-bezier(.22,1,.36,1);\n}\n.reveal-left.in {\n opacity: 1;\n transform: translateX(0);\n}\n\n\/* ↓ RIGHT *\/\n.reveal-right {\n transform: translateX(60px);\n transition: opacity 1s cubic-bezier(.22,1,.36,1),\n transform 1s cubic-bezier(.22,1,.36,1);\n}\n.reveal-right.in {\n opacity: 1;\n transform: translateX(0);\n}\n\n\/* ↓ SCALE *\/\n.reveal-scale {\n transform: scale(.88);\n transition: opacity .9s cubic-bezier(.22,1,.36,1),\n transform .9s cubic-bezier(.22,1,.36,1);\n}\n.reveal-scale.in {\n opacity: 1;\n transform: scale(1);\n}\n\n[data-delay=\"1\"] { transition-delay: .1s !important; }\n[data-delay=\"2\"] { transition-delay: .2s !important; }\n[data-delay=\"3\"] { transition-delay: .3s !important; }\n[data-delay=\"4\"] { transition-delay: .4s !important; }\n[data-delay=\"5\"] { transition-delay: .5s !important; }\n[data-delay=\"6\"] { transition-delay: .6s !important; }\n\n \/* ═══════════════════════════════════════════════════════\n HERO PRODUCT GRID (two-col section)\n═══════════════════════════════════════════════════════ *\/\n.product-grid-section {\n padding: 0 40px 120px;\n background: var(--dark);\n}\n.product-split {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: start;\n}\n@media (max-width: 900px) {\n .product-split { grid-template-columns: 1fr; gap: 48px; }\n}\n\n\u003c\/style\u003e\n\n\n\u003cdiv class=\"engraving-product\"\u003e\n\n \u003c!-- HERO --\u003e\n \u003csection class=\"engraving-hero engraving-fade show\"\u003e\n \u003cdiv class=\"engraving-hero-grid-wrapper\"\u003e\n \u003cdiv class=\"hero-eyebrow hero-visible\"\u003eGravur mit Liebe · Seit 1991\u003c\/div\u003e\n \u003cdiv class=\"engraving-hero-grid\"\u003e\n \u003cdiv class=\"engraving-hero-text\"\u003e\n\n \u003ch1\u003eVergoldeter Herren Siegelring mit Gravur | Schwarz-Onyx, Tigerauge \u0026amp; Rot-Onyx\u003c\/h1\u003e\n \u003cdiv class=\"hero-subline\"\u003e\n \u003cspan class=\"engraving-badge\"\u003e\u003ci class=\"bi bi-pencil\"\u003e\u003c\/i\u003e Kostenlose Innengravur\u003c\/span\u003e\n \u003ca href=\"#jm-cfg-wrap\" class=\"luxury-shine-btn live-preview-link luxury\"\u003e\u003ci class=\"bi bi-eye\"\u003e\u003c\/i\u003e Live-Vorschau ansehen\u003c\/a\u003e\n \u003c\/div\u003e\n \u003cp\u003eDieser vergoldete Siegelring aus 316L Edelstahl vereint maskuline Stärke mit edlem Glanz. Wähle deinen Stein – Schwarz-Onyx, Tigerauge oder Rot-Onyx – und veredle ihn mit einer persönlichen Gravur auf der Innenseite.\u003c\/p\u003e\n \u003cdiv class=\"engraving-stone-selector\"\u003e\n \u003cbutton type=\"button\" class=\"stone-btn onyx active\" data-stone=\"onyx\" data-label=\"Schwarz-Onyx\"\u003e\u003cspan class=\"stone-dot\"\u003e\u003c\/span\u003e Schwarz-Onyx\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"stone-btn tiger\" data-stone=\"tiger\" data-label=\"Tigerauge\"\u003e\u003cspan class=\"stone-dot\"\u003e\u003c\/span\u003e Tigerauge\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"stone-btn rot\" data-stone=\"rot\" data-label=\"Rot-Onyx\"\u003e\u003cspan class=\"stone-dot\"\u003e\u003c\/span\u003e Rot-Onyx\u003c\/button\u003e\n \u003c\/div\u003e\n \u003cbutton type=\"button\" class=\"engraving-collection-btn js-scroll-to-form\" data-target=\"#product-form\"\u003eJetzt personalisieren \u003ci class=\"bi bi-arrow-up\"\u003e\u003c\/i\u003e\u003c\/button\u003e\n \n \u003cdiv class=\"micro-trust-valentine\"\u003eSicher · Persönlich · Individuell graviert\u003c\/div\u003e\n \u003cdiv class=\"engraving-trust\"\u003e\n \u003cspan\u003e\u003ci class=\"bi bi-shield-check\"\u003e\u003c\/i\u003e 316L Edelstahl vergoldet\u003c\/span\u003e\n \u003cspan\u003e\u003ci class=\"bi bi-pencil-square\"\u003e\u003c\/i\u003e Gravur auf der Innenseite\u003c\/span\u003e\n \u003cbutton type=\"button\" class=\"jm-hero-details-btn\" onclick=\"document.getElementById('jm-features-specs').scrollIntoView({behavior:'smooth', block:'start'})\"\u003e\n \u003ci class=\"bi bi-list-ul\"\u003e\u003c\/i\u003e Produktdetails ansehen \u003ci class=\"bi bi-chevron-down\"\u003e\u003c\/i\u003e\n\u003c\/button\u003e\n \u003cdiv class=\"size-info\"\u003e\n \u003cdiv class=\"size-badges\"\u003e\n \u003cspan class=\"shape-badge\"\u003e\u003ci class=\"bi bi-rulers\"\u003e\u003c\/i\u003e Ringbreite: 21 mm\u003c\/span\u003e\n \u003cspan class=\"shape-badge\"\u003e\u003ci class=\"bi bi-rulers\"\u003e\u003c\/i\u003e Steinbreite: 16 mm\u003c\/span\u003e\n \u003cspan class=\"shape-badge\"\u003e\u003ci class=\"bi bi-rulers\"\u003e\u003c\/i\u003e 3 Größen: Ø 18,9 · 19,75 · 20,6 mm\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"micro-trust-valentine\"\u003e3 Steinfarben · je 3 Größen verfügbar\u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"engraving-image\"\u003e\n \u003cdiv class=\"watch-image\"\u003e\n \u003cimg class=\"watch-img-primary\" id=\"heroRingPrimary\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Vergoldeter Siegelring Schwarz-Onyx\"\u003e\n \u003cimg class=\"watch-img-hover\" id=\"heroRingHover\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Vergoldeter Siegelring Innenseite\"\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"hero-scroll hero-visible\"\u003e\n \u003cdiv class=\"scroll-line\"\u003e\u003c\/div\u003e\n Scroll\n \u003c\/div\u003e\n \u003c\/section\u003e\n\n \u003c!-- TRUST BAR --\u003e\n \u003cdiv class=\"trust-bar \"\u003e\n \u003cdiv class=\"trust-bar-inner\"\u003e\n \u003cdiv class=\"trust-item-3d\"\u003e\n \u003ci class=\"bi bi-geo-alt\"\u003e\u003c\/i\u003e\n \u003cspan\u003eHandgravur in Deutschland\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"trust-divider-v\"\u003e\u003c\/div\u003e\n \u003cdiv class=\"trust-item-3d\"\u003e\n \u003ci class=\"bi bi-badge-3d\"\u003e\u003c\/i\u003e\n \u003cspan\u003ePräzisionsgravur seit 1991\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"trust-divider-v\"\u003e\u003c\/div\u003e\n \u003cdiv class=\"trust-item-3d\"\u003e\n \u003cdiv class=\"live-dot-3d\"\u003e\u003c\/div\u003e\n \u003cspan\u003eLive Vorschau\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"trust-divider-v\"\u003e\u003c\/div\u003e\n \u003cdiv class=\"trust-item-3d\"\u003e\n \u003ci class=\"bi bi-box-seam\"\u003e\u003c\/i\u003e\n \u003cspan\u003eVersand in 1–3 Werktagen\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"trust-divider-v\"\u003e\u003c\/div\u003e\n \u003cdiv class=\"trust-item-3d\"\u003e\n \u003ci class=\"bi bi-stars\"\u003e\u003c\/i\u003e\n \u003cspan\u003eZufriedenheitsgarantie\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n\n \u003c!-- RINGGROESSE --\u003e\n \u003csection class=\"jm-rsz-section engraving-fade\"\u003e\n \u003cdiv class=\"jm-rsz-inner\"\u003e\n \u003cdiv class=\"jm-rsz-header\"\u003e\n \u003cspan class=\"jm-rsz-eyebrow\"\u003eJuwelier Milano\u003c\/span\u003e\n \u003cspan class=\"jm-rsz-title\"\u003eRinggröße verstehen\u003c\/span\u003e\n \u003cspan class=\"jm-rsz-subtitle\"\u003eDrei Größen zur Wahl – was bedeuten Umfang und Durchmesser? Alle Angaben einfach erklärt.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-grid\"\u003e\n \u003cdiv class=\"jm-rsz-col jm-rsz-col--svg\"\u003e\n \u003cdiv class=\"jm-rsz-svg-wrap\"\u003e\n \u003csvg viewbox=\"0 0 180 200\" width=\"180\" height=\"200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cdefs\u003e\n \u003cradialgradient id=\"jmRszRg1\" cx=\"50%\" cy=\"40%\" r=\"55%\"\u003e\u003cstop offset=\"0%\" stop-color=\"#e8c96a\"\u003e\u003c\/stop\u003e\u003cstop offset=\"45%\" stop-color=\"#c9a84c\"\u003e\u003c\/stop\u003e\u003cstop offset=\"100%\" stop-color=\"#7a5820\"\u003e\u003c\/stop\u003e\u003c\/radialgradient\u003e\n \u003cradialgradient id=\"jmRszRg2\" cx=\"50%\" cy=\"50%\" r=\"50%\"\u003e\u003cstop offset=\"0%\" stop-color=\"#3a2e1e\"\u003e\u003c\/stop\u003e\u003cstop offset=\"100%\" stop-color=\"#1a1410\"\u003e\u003c\/stop\u003e\u003c\/radialgradient\u003e\n \u003cfilter id=\"jmRszGlow\"\u003e\u003cfegaussianblur stddeviation=\"2.5\" result=\"blur\"\u003e\u003c\/fegaussianblur\u003e\u003cfemerge\u003e\u003cfemergenode in=\"blur\"\u003e\u003c\/femergenode\u003e\u003cfemergenode in=\"SourceGraphic\"\u003e\u003c\/femergenode\u003e\u003c\/femerge\u003e\u003c\/filter\u003e\n \u003c\/defs\u003e\n \u003ctext x=\"90\" y=\"14\" text-anchor=\"middle\" font-family=\"Inter, sans-serif\" font-size=\"9.5\" font-weight=\"600\" fill=\"#c9a84c\" letter-spacing=\"0.8\" id=\"jm-gs-svg-umfang\"\u003eUMFANG ≈ 59,6 mm\u003c\/text\u003e\n \u003cline x1=\"90\" y1=\"17\" x2=\"90\" y2=\"55\" stroke=\"#c9a84c\" stroke-width=\"1\" opacity=\"0.6\"\u003e\u003c\/line\u003e\n \u003cpolygon points=\"90,59 86.5,52 93.5,52\" fill=\"#c9a84c\" opacity=\"0.6\"\u003e\u003c\/polygon\u003e\n \u003ccircle cx=\"90\" cy=\"110\" r=\"78\" fill=\"url(#jmRszRg1)\" filter=\"url(#jmRszGlow)\"\u003e\u003c\/circle\u003e\n \u003cellipse cx=\"70\" cy=\"72\" rx=\"30\" ry=\"13\" fill=\"rgba(255,255,255,0.11)\" transform=\"rotate(-18,70,72)\"\u003e\u003c\/ellipse\u003e\n \u003ccircle cx=\"90\" cy=\"110\" r=\"52\" fill=\"url(#jmRszRg2)\"\u003e\u003c\/circle\u003e\n \u003ccircle cx=\"90\" cy=\"110\" r=\"52\" fill=\"none\" stroke=\"#c9a84c\" stroke-width=\"1.2\" opacity=\"0.4\"\u003e\u003c\/circle\u003e\n \u003cline x1=\"40\" y1=\"110\" x2=\"140\" y2=\"110\" stroke=\"#e8c96a\" stroke-width=\"1.5\" stroke-dasharray=\"4,3\"\u003e\u003c\/line\u003e\n \u003cpolygon points=\"40,110 50,106 50,114\" fill=\"#e8c96a\"\u003e\u003c\/polygon\u003e\n \u003cpolygon points=\"140,110 130,106 130,114\" fill=\"#e8c96a\"\u003e\u003c\/polygon\u003e\n \u003crect x=\"61\" y=\"98\" width=\"58\" height=\"18\" rx=\"4\" fill=\"#1a1410\" opacity=\"0.9\"\u003e\u003c\/rect\u003e\n \u003ctext x=\"90\" y=\"111\" text-anchor=\"middle\" font-family=\"Playfair Display, serif\" font-size=\"11.5\" fill=\"#e8c96a\" id=\"jm-gs-svg-d\"\u003eØ 18,9 mm\u003c\/text\u003e\n \u003c\/svg\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-col jm-rsz-col--anno\"\u003e\n \u003cdiv class=\"jm-rsz-anno\"\u003e\n \u003cspan class=\"jm-rsz-anno-label\"\u003eGewählter Umfang\u003c\/span\u003e\u003cspan class=\"jm-rsz-anno-value\" id=\"jm-gs-anno-umfang\"\u003eUmfang = 59,6 mm\u003c\/span\u003e\u003cspan class=\"jm-rsz-anno-desc\"\u003eIn Europa ist die Ringgröße der \u003cstrong\u003eInnenumfang\u003c\/strong\u003e in Millimetern – also der Umfang deines Fingers.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-anno\"\u003e\n \u003cspan class=\"jm-rsz-anno-label\"\u003eInnendurchmesser\u003c\/span\u003e\u003cspan class=\"jm-rsz-anno-value\" id=\"jm-gs-anno-d\"\u003eØ 18,9 mm\u003c\/span\u003e\u003cspan class=\"jm-rsz-anno-desc\"\u003eAbstand von Innenwand zu Innenwand. Für genau diesen Fingerdurchmesser ist der Ring gefertigt.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-anno\"\u003e\n \u003cspan class=\"jm-rsz-anno-label\"\u003eDieser Ring\u003c\/span\u003e\u003cspan class=\"jm-rsz-anno-value\"\u003e3 Größen verfügbar\u003c\/span\u003e\u003cspan class=\"jm-rsz-anno-desc\"\u003e59,6 mm · 62 mm · 64,6 mm Umfang – für schlanke bis kräftige Finger. Tippe in der Tabelle auf deine Größe.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-tip\"\u003e\n \u003cspan class=\"jm-rsz-tip-icon\"\u003e💡\u003c\/span\u003e\u003cdiv\u003e\n \u003cspan class=\"jm-rsz-tip-title\"\u003eRing bereits vorhanden?\u003c\/span\u003e\u003cspan class=\"jm-rsz-tip-text\"\u003e\u003cstrong\u003eInnendurchmesser messen\u003c\/strong\u003e → in der Tabelle rechts in der Spalte „Ø\" nachschlagen.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rgt-warning\"\u003e\n \u003ci class=\"bi bi-exclamation-triangle-fill jm-rgt-warning-icon\"\u003e\u003c\/i\u003e\u003cdiv\u003e\n \u003cspan class=\"jm-rgt-warning-title\"\u003eWichtiger Hinweis: Ringgröße variiert je nach Ringstärke\u003c\/span\u003e\u003cspan class=\"jm-rgt-warning-text\"\u003eDie angegebene Ringgröße bezieht sich auf den \u003cstrong\u003eInnenumfang\u003c\/strong\u003e. Bei breiten Ringen empfehlen wir \u003cstrong\u003eeine halbe bis eine ganze Größe größer\u003c\/strong\u003e. Messen Sie am besten \u003cstrong\u003emittags oder nachmittags\u003c\/strong\u003e.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-col jm-rsz-col--guide\"\u003e\n \u003cspan class=\"jm-rsz-block-title\"\u003eSo messen Sie zu Hause\u003c\/span\u003e\n \u003cdiv class=\"jm-rsz-steps\"\u003e\n \u003cdiv class=\"jm-rsz-step\"\u003e\n \u003cdiv class=\"jm-rsz-step-num\"\u003e1\u003c\/div\u003e\n \u003cdiv\u003e\n \u003cspan class=\"jm-rsz-step-title\"\u003eStreifen schneiden\u003c\/span\u003e\u003cspan class=\"jm-rsz-step-text\"\u003eSchmalen Papier- oder Fadenstreifen (~15 cm) zuschneiden.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-step\"\u003e\n \u003cdiv class=\"jm-rsz-step-num\"\u003e2\u003c\/div\u003e\n \u003cdiv\u003e\n \u003cspan class=\"jm-rsz-step-title\"\u003eFinger umwickeln\u003c\/span\u003e\u003cspan class=\"jm-rsz-step-text\"\u003eEng um den \u003cstrong\u003edicksten Teil\u003c\/strong\u003e legen \u0026amp; Überlappung markieren.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-step\"\u003e\n \u003cdiv class=\"jm-rsz-step-num\"\u003e3\u003c\/div\u003e\n \u003cdiv\u003e\n \u003cspan class=\"jm-rsz-step-title\"\u003eLänge messen\u003c\/span\u003e\u003cspan class=\"jm-rsz-step-text\"\u003eStreifen abflachen \u0026amp; messen → \u003cstrong\u003eErgebnis in mm = Ihre Größe\u003c\/strong\u003e.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-rsz-step\"\u003e\n \u003cdiv class=\"jm-rsz-step-num\"\u003e4\u003c\/div\u003e\n \u003cdiv\u003e\n \u003cspan class=\"jm-rsz-step-title\"\u003eTabelle ablesen\u003c\/span\u003e\u003cspan class=\"jm-rsz-step-text\"\u003eWert unten nachschlagen und die passende unserer 3 Größen wählen.\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cspan class=\"jm-rsz-block-title\"\u003eGrößentabelle\u003c\/span\u003e\n \u003cdiv class=\"jm-rsz-table-wrap\"\u003e\n \u003ctable class=\"jm-rsz-table\"\u003e\n \u003cthead class=\"jm-rsz-thead\"\u003e\n \u003ctr class=\"jm-rsz-tr\"\u003e\n \u003cth class=\"jm-rsz-th\"\u003eGröße\u003c\/th\u003e\n \u003cth class=\"jm-rsz-th\"\u003eUmfang\u003c\/th\u003e\n \u003cth class=\"jm-rsz-th\"\u003eØ mm\u003c\/th\u003e\n \u003cth class=\"jm-rsz-th\"\u003ePassform\u003c\/th\u003e\n \u003c\/tr\u003e\n \u003c\/thead\u003e\n \u003ctbody class=\"jm-rsz-tbody\"\u003e\n \u003ctr class=\"jm-rsz-tr jm-rsz-hl\" data-size=\"s1\"\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e60 \u003cspan class=\"jm-rsz-hl-badge\"\u003eGewählt\u003c\/span\u003e\n\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e59,6 mm\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e18,9\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003eSchlanke bis normale Finger\u003c\/td\u003e\n \u003c\/tr\u003e\n \u003ctr class=\"jm-rsz-tr\" data-size=\"s2\"\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e62 \u003cspan class=\"jm-rsz-hl-badge\"\u003eGewählt\u003c\/span\u003e\n\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e62 mm\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e19,75\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003eHäufigste Herrengröße\u003c\/td\u003e\n \u003c\/tr\u003e\n \u003ctr class=\"jm-rsz-tr\" data-size=\"s3\"\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e65 \u003cspan class=\"jm-rsz-hl-badge\"\u003eGewählt\u003c\/span\u003e\n\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e64,6 mm\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003e20,6\u003c\/td\u003e\n \u003ctd class=\"jm-rsz-td\"\u003eKräftige Hände\u003c\/td\u003e\n \u003c\/tr\u003e\n \u003c\/tbody\u003e\n \u003c\/table\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/section\u003e\n\n\n \u003c!-- WHY --\u003e\n \u003csection class=\"engraving-why-heart engraving-fade\"\u003e\n \u003cdiv class=\"container\"\u003e\n \u003ch2\u003eWarum ein Siegelring mit Innengravur?\u003c\/h2\u003e\n \u003cp\u003eEin Siegelring ist seit Jahrhunderten Symbol für Identität, Stärke und Persönlichkeit. Durch die individuelle Innengravur wird dieses zeitlose Schmuckstück zu einem einzigartigen Begleiter.\u003c\/p\u003e\n \u003cdiv class=\"engraving-why-grid\"\u003e\n \u003cdiv class=\"engraving-feature\"\u003e\n \u003ci class=\"bi bi-gem\"\u003e\u003c\/i\u003e\u003ch3\u003eSchwarz-Onyx · Tigerauge · Rot-Onyx\u003c\/h3\u003e\n \u003cp\u003eSchwarzer Onyx steht für Stärke und Ausdauer. Tigerauge fördert Mut. Roter Onyx steht für Leidenschaft und Energie.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"engraving-feature\"\u003e\n \u003ci class=\"bi bi-pencil\"\u003e\u003c\/i\u003e\u003ch3\u003ePersönliche Innengravur\u003c\/h3\u003e\n \u003cp\u003eInitialen, ein Datum, ein Name – deine Gravur auf der Innenseite ist dein persönliches Geheimnis.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"engraving-feature\"\u003e\n \u003ci class=\"bi bi-shield-check\"\u003e\u003c\/i\u003e\u003ch3\u003eVergoldeter 316L Edelstahl\u003c\/h3\u003e\n \u003cp\u003eHochwertiger Edelstahl in Schmuckqualität mit edler Vergoldung – robust, hautfreundlich und mit warmem Goldglanz.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"engraving-feature\"\u003e\n \u003ci class=\"bi bi-gift\"\u003e\u003c\/i\u003e\u003ch3\u003ePerfektes Herrengeschenk\u003c\/h3\u003e\n \u003cp\u003eFür Geburtstage, Jubiläen oder besondere Anlässe – ein bedeutungsvolles, individuelles Geschenk.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/section\u003e\n\n\n \u003c!-- SHIPPING --\u003e\n \u003csection class=\"engraving-shipping engraving-fade\"\u003e\n \u003cdiv class=\"container\"\u003e\n \u003ch2\u003eSorgfältig gefertigt \u0026amp; sicher geliefert\u003c\/h2\u003e\n \u003cdiv class=\"engraving-shipping-grid\"\u003e\n \u003cdiv class=\"shipping-item\"\u003e\n \u003ci class=\"bi bi-truck\"\u003e\u003c\/i\u003e\u003ch3\u003eSchneller Versand\u003c\/h3\u003e\n \u003cp\u003eVersand innerhalb von \u003cstrong\u003e1–3 Werktagen\u003c\/strong\u003e nach Gravur – sorgfältig \u0026amp; sicher verpackt.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"shipping-item\"\u003e\n \u003ci class=\"bi bi-geo-alt\"\u003e\u003c\/i\u003e\u003ch3\u003eHandarbeit in Deutschland\u003c\/h3\u003e\n \u003cp\u003eJede Gravur entsteht in unserem Familienbetrieb – \u003cstrong\u003ekein Dropshipping\u003c\/strong\u003e, keine externe Arbeit.\u003c\/p\u003e\n \u003cp\u003eJede Gravur wird vor dem Versand manuell kontrolliert.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"shipping-item\"\u003e\n \u003ci class=\"bi bi-shield-check\"\u003e\u003c\/i\u003e\u003ch3\u003eSicher \u0026amp; Vertrauensvoll\u003c\/h3\u003e\n \u003cp\u003eSichere Zahlung, persönlicher Support und höchste Qualitätskontrolle vor dem Versand.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/section\u003e\n\n\n \u003c!-- ════════════════════════════════════════\n FEATURES + SPECS\n ════════════════════════════════════════ --\u003e\n \u003csection class=\"section-mid\" id=\"jm-features-specs\"\u003e\n \u003cdiv class=\"container-lg\"\u003e\n \u003cdiv class=\"product-split\"\u003e\n \u003c!-- Features --\u003e\n \u003cdiv class=\"reveal-left\"\u003e\n \u003cspan class=\"section-eyebrow\"\u003eFeatures\u003c\/span\u003e\n \u003ch2 class=\"section-title\" style=\"font-size:clamp(24px,2.8vw,40px);\"\u003ePräzision in\u003cbr\u003ejedem Detail\u003c\/h2\u003e\n \u003cp class=\"section-sub\" style=\"margin-bottom:40px;\"\u003eDieser vergoldete Siegelring vereint maskulinen Charakter mit handwerklicher Perfektion.\u003c\/p\u003e\n \u003cdiv class=\"cards-3d-grid\" style=\"grid-template-columns:1fr 1fr;gap:16px;margin-top:0;\"\u003e\n \u003cdiv class=\"card-3d\" style=\"padding:28px 24px;\"\u003e\n \u003cdiv class=\"card-3d-icon\" style=\"width:44px;height:44px;font-size:18px;margin-bottom:16px;\"\u003e\u003ci class=\"bi bi-pencil-square\"\u003e\u003c\/i\u003e\u003c\/div\u003e\n \u003ch3 style=\"font-size:15px;\"\u003eInnengravur\u003c\/h3\u003e\n \u003cp style=\"font-size:13px;\"\u003eAuf der Ringinnenseite – nur für dich sichtbar.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"card-3d\" style=\"padding:28px 24px;\"\u003e\n \u003cdiv class=\"card-3d-icon\" style=\"width:44px;height:44px;font-size:18px;margin-bottom:16px;\"\u003e\u003ci class=\"bi bi-gem\"\u003e\u003c\/i\u003e\u003c\/div\u003e\n \u003ch3 style=\"font-size:15px;\"\u003eDrei Edelsteine\u003c\/h3\u003e\n \u003cp style=\"font-size:13px;\"\u003eSchwarz-Onyx, Tigerauge oder Rot-Onyx – jeder mit eigener Symbolik.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"card-3d\" style=\"padding:28px 24px;\"\u003e\n \u003cdiv class=\"card-3d-icon\" style=\"width:44px;height:44px;font-size:18px;margin-bottom:16px;\"\u003e\u003ci class=\"bi bi-shield-check\"\u003e\u003c\/i\u003e\u003c\/div\u003e\n \u003ch3 style=\"font-size:15px;\"\u003e316L vergoldet\u003c\/h3\u003e\n \u003cp style=\"font-size:13px;\"\u003eEdelstahl in Schmuckqualität mit warmem Goldglanz.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"card-3d\" style=\"padding:28px 24px;\"\u003e\n \u003cdiv class=\"card-3d-icon\" style=\"width:44px;height:44px;font-size:18px;margin-bottom:16px;\"\u003e\u003ci class=\"bi bi-gift\"\u003e\u003c\/i\u003e\u003c\/div\u003e\n \u003ch3 style=\"font-size:15px;\"\u003eElegant verpackt\u003c\/h3\u003e\n \u003cp style=\"font-size:13px;\"\u003eHochwertige Verpackung – sofort bereit als Geschenk.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n\n \u003c!-- Specs --\u003e\n \u003cdiv class=\"reveal-right\"\u003e\n \u003cspan class=\"section-eyebrow\"\u003eProduktdetails\u003c\/span\u003e\n \u003ch2 class=\"section-title\" style=\"font-size:clamp(24px,2.8vw,40px);\"\u003eTechnische\u003cbr\u003eSpezifikationen\u003c\/h2\u003e\n \u003cdiv class=\"specs-grid\" style=\"margin-top:36px;gap:0;\"\u003e\n \u003cul class=\"specs-list\"\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-gem\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eTyp:\u003c\/strong\u003e Siegelring mit Edelstein\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-shield-check\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eMaterial:\u003c\/strong\u003e 316L Edelstahl, vergoldet\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-person\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eGeschlecht:\u003c\/strong\u003e Herren\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-palette\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eSteinfarben:\u003c\/strong\u003e Schwarz-Onyx, Tigerauge, Rot-Onyx\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-rulers\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eRingbreite:\u003c\/strong\u003e 21 mm\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-rulers\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eSteinbreite:\u003c\/strong\u003e 16 mm\u003c\/span\u003e\n\u003c\/li\u003e\n \u003c\/ul\u003e\n \u003cul class=\"specs-list\"\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-rulers\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eDurchmesser:\u003c\/strong\u003e 18,9 · 19,75 · 20,6 mm\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-rulers\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eUmfang:\u003c\/strong\u003e 59,6 · 62 · 64,6 mm\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-box-seam\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eGewicht:\u003c\/strong\u003e ca. 17–30 g\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-pencil\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eGravur:\u003c\/strong\u003e Innenseite · kostenlos\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-star\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eStil:\u003c\/strong\u003e Modisch · Unisex-tauglich\u003c\/span\u003e\n\u003c\/li\u003e\n \u003cli\u003e\n\u003ci class=\"bi bi-droplet-half\"\u003e\u003c\/i\u003e\u003cspan\u003e\u003cstrong\u003eHinweis:\u003c\/strong\u003e Wasser \u0026amp; Chemikalien vermeiden\u003c\/span\u003e\n\u003c\/li\u003e\n \u003c\/ul\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/section\u003e\n\n\n\n\n\n\n\n\n\n\n \u003c!-- 3-SCHRITT KONFIGURATOR --\u003e\n \u003cdiv class=\"jm-cfg-wrap\" id=\"jm-cfg-wrap\"\u003e\n \u003c!-- ambient particles --\u003e\n \u003cdiv class=\"hero-particles\" id=\"heroParticles\"\u003e\u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-header\"\u003e\n \u003cspan class=\"jm-cfg-eyebrow\"\u003eJuwelier Milano · Gravur-Studio\u003c\/span\u003e\n \u003ch2 class=\"jm-cfg-headline\"\u003eDeine Botschaft. Für immer eingraviert.\u003c\/h2\u003e\n \u003cp class=\"jm-cfg-subline\"\u003eGestalte jetzt in 3 Schritten deine persönliche Innengravur – und sieh sofort, wie sie auf dem Ring wirkt. Kostenlos, präzise und mit Liebe gefertigt.\u003c\/p\u003e\n \u003cdiv class=\"jm-cfg-steps\"\u003e\n \u003cdiv class=\"jm-cfg-step-item active\" id=\"jm-cfg-si-1\"\u003e\n \u003cdiv class=\"jm-cfg-step-circle\" id=\"jm-cfg-sc-1\"\u003e1\u003c\/div\u003e\n \u003cspan class=\"jm-cfg-step-label\"\u003eVariante\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-step-line\" id=\"jm-cfg-line-1\"\u003e\u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-step-item\" id=\"jm-cfg-si-2\"\u003e\n \u003cdiv class=\"jm-cfg-step-circle\" id=\"jm-cfg-sc-2\"\u003e2\u003c\/div\u003e\n \u003cspan class=\"jm-cfg-step-label\"\u003eGravur\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-step-line\" id=\"jm-cfg-line-2\"\u003e\u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-step-item\" id=\"jm-cfg-si-3\"\u003e\n \u003cdiv class=\"jm-cfg-step-circle\" id=\"jm-cfg-sc-3\"\u003e3\u003c\/div\u003e\n \u003cspan class=\"jm-cfg-step-label\"\u003eBestätigung\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-progress-bar\"\u003e\u003cdiv class=\"jm-cfg-progress-fill\" id=\"jm-cfg-progress\"\u003e\u003c\/div\u003e\u003c\/div\u003e\n \u003c\/div\u003e\n\n \u003c!-- SCHRITT 1 --\u003e\n \u003cdiv class=\"jm-cfg-card active\" id=\"jm-cfg-card-1\"\u003e\n \u003cdiv class=\"jm-cfg-card-body\"\u003e\n \u003cdiv class=\"jm-cfg-s1-grid\"\u003e\n \u003cdiv class=\"jm-cfg-s1-left\"\u003e\n \u003ch3\u003eWähle deinen Stein\u003c\/h3\u003e\n \u003cp\u003e Jeder Edelstein steht für eine eigene Symbolik – wähle den, der zu dir passt.\u003c\/p\u003e\n \u003cdiv class=\"jm-cfg-stone-list\"\u003e\n \u003cdiv class=\"jm-cfg-stone-option active\" data-stone=\"onyx\" data-label=\"Schwarz-Onyx\"\u003e\n \u003cspan class=\"jm-cfg-stone-dot onyx\"\u003e\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-stone-info\"\u003e\u003cspan class=\"jm-cfg-stone-name\"\u003eSchwarz-Onyx\u003c\/span\u003e\u003cspan class=\"jm-cfg-stone-desc\"\u003eStärke \u0026amp; Ausdauer\u003c\/span\u003e\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-stone-check\"\u003e\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-stone-option\" data-stone=\"tiger\" data-label=\"Tigerauge\"\u003e\n \u003cspan class=\"jm-cfg-stone-dot tiger\"\u003e\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-stone-info\"\u003e\u003cspan class=\"jm-cfg-stone-name\"\u003eTigerauge\u003c\/span\u003e\u003cspan class=\"jm-cfg-stone-desc\"\u003eMut \u0026amp; Selbstbewusstsein\u003c\/span\u003e\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-stone-check\"\u003e\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-stone-option\" data-stone=\"rot\" data-label=\"Rot-Onyx\"\u003e\n \u003cspan class=\"jm-cfg-stone-dot rot\"\u003e\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-stone-info\"\u003e\u003cspan class=\"jm-cfg-stone-name\"\u003eRot-Onyx\u003c\/span\u003e\u003cspan class=\"jm-cfg-stone-desc\"\u003eLeidenschaft \u0026amp; Energie\u003c\/span\u003e\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-stone-check\"\u003e\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cspan class=\"jm-gs-size-title\"\u003eWähle deine Größe\u003c\/span\u003e\n \u003cdiv class=\"jm-gs-sizes\" id=\"jm-gs-sizes\"\u003e\n \u003cbutton type=\"button\" class=\"jm-gs-size active\" data-size=\"s1\"\u003e\u003cstrong\u003e59,6 mm\u003c\/strong\u003e\u003csmall\u003eUmfang · Ø 18,9 mm\u003c\/small\u003e\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"jm-gs-size\" data-size=\"s2\"\u003e\u003cstrong\u003e62 mm\u003c\/strong\u003e\u003csmall\u003eUmfang · Ø 19,75 mm\u003c\/small\u003e\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"jm-gs-size\" data-size=\"s3\"\u003e\u003cstrong\u003e64,6 mm\u003c\/strong\u003e\u003csmall\u003eUmfang · Ø 20,6 mm\u003c\/small\u003e\u003c\/button\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-size-strip\" id=\"jm-gs-size-strip\"\u003e\n \u003cstrong\u003eGröße 59,6 mm\u003c\/strong\u003e · Ø 18,9 mm · Ringbreite 21 mm · 316L vergoldet\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-s1-right\"\u003e\n \u003cdiv class=\"jm-cfg-ring-img-wrap\"\u003e\n \u003cimg class=\"jm-cfg-ring-img-primary\" id=\"jm-cfg-ring-primary\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Vergoldeter Siegelring\"\u003e\n \u003cimg class=\"jm-cfg-ring-img-hover\" id=\"jm-cfg-ring-hover\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Vergoldeter Siegelring Innenseite\"\u003e\n \u003cspan class=\"jm-cfg-ring-img-label\" id=\"jm-cfg-ring-label\"\u003eSchwarz-Onyx\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cp class=\"jm-cfg-ring-img-caption\" id=\"jm-cfg-ring-caption\"\u003eStein: Schwarz-Onyx\u003c\/p\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-card-footer\"\u003e\n \u003cbutton class=\"jm-cfg-btn-back\" hidden\u003e\u003ci class=\"bi bi-arrow-left\"\u003e\u003c\/i\u003e Zurück\u003c\/button\u003e\n \u003cbutton class=\"jm-cfg-btn-next\" id=\"jm-cfg-next-1\"\u003eWeiter zur Gravur \u003ci class=\"bi bi-arrow-right\"\u003e\u003c\/i\u003e\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n\n \u003c!-- SCHRITT 2 --\u003e\n \u003cdiv class=\"jm-cfg-card\" id=\"jm-cfg-card-2\"\u003e\n \u003cdiv class=\"jm-cfg-card-body jm-cfg-s2-wrap\"\u003e\n \u003csection class=\"engraving-preview-section\"\u003e\n \u003cdiv class=\"engraving-preview-grid\"\u003e\n \u003cdiv class=\"engraving-preview-image\" id=\"previewImageWrap\"\u003e\n \u003c!-- Bild kommt aus den Produktbildern dieses Produkts (JS) --\u003e\n \u003cimg id=\"jmGoldStep2Img\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Vergoldeter Siegelring Innengravur Vorschau\"\u003e\n \u003cdiv class=\"engraving-overlay\" id=\"engravingOverlay\"\u003e\n \u003csvg id=\"engravingArcSvg\" viewbox=\"0 0 100 100\" preserveaspectratio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\u003e\n \u003cdefs\u003e\u003cpath id=\"ringArcPath\" d=\"M 18,36 A 55,18 0 0,1 82,42\" fill=\"none\"\u003e\u003c\/path\u003e\u003c\/defs\u003e\n \u003ctext class=\"engraving-arc-text\"\u003e\n \u003ctextpath href=\"#ringArcPath\" id=\"engravingArcTextEl\" startoffset=\"53%\" text-anchor=\"middle\"\u003eDeine Gravur\u003c\/textpath\u003e\n \u003c\/text\u003e\n \u003c\/svg\u003e\n \u003cspan id=\"engravingPreviewText\" style=\"display:none;\"\u003eDeine Gravur\u003c\/span\u003e\n \u003cspan class=\"preview-check\" style=\"position:absolute;top:36%;right:14%;font-size:2rem;\"\u003e\u003ci class=\"bi bi-check\" style=\"color:#34aa8b;\"\u003e\u003c\/i\u003e\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cp class=\"engraving-preview-note\"\u003e✦ Diese Darstellung zeigt die Innengravur als Vorschau. Jede Gravur ist handwerkliches Unikat – Schriftgröße und Position wird optimal angepasst.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"engraving-preview-content\" id=\"engraving-preview\"\u003e\n \u003cspan class=\"innengravur-badge\"\u003e\u003ci class=\"bi bi-pencil\"\u003e\u003c\/i\u003e Innengravur · Kostenlos \u0026amp; Persönlich\u003c\/span\u003e\n \u003ch2\u003eDeine Botschaft. Für immer eingraviert.\u003c\/h2\u003e\n \u003cp\u003eGib deine gewünschte Gravur ein – Initialen, ein Datum, ein Name – und sieh sofort, wie dein persönlicher vergoldeter Siegelring entsteht.\u003c\/p\u003e\n \u003cdiv class=\"engraving-input-wrap\"\u003e\n \u003clabel for=\"engravingInput\"\u003eDeine Innengravur\u003c\/label\u003e\n \u003cinput type=\"text\" id=\"engravingInput\" maxlength=\"11\" placeholder=\"z. B. A + M | 12.06.24\"\u003e\n \u003csmall id=\"engravingCounter\"\u003eMax. 11 Zeichen · Initialen, Datum oder Botschaft\u003c\/small\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"engraving-symbol-picker\"\u003e\n \u003cspan class=\"symbol-title\"\u003eSymbole hinzufügen\u003c\/span\u003e\n \u003cdiv class=\"symbol-list\"\u003e\n \u003cbutton type=\"button\" class=\"symbol-btn\" data-symbol=\"♥\"\u003e♥\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"symbol-btn\" data-symbol=\"∞\"\u003e∞\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"symbol-btn\" data-symbol=\"★\"\u003e★\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"symbol-btn\" data-symbol=\"✝\"\u003e✝\u003c\/button\u003e\n \u003cbutton type=\"button\" class=\"symbol-btn\" data-symbol=\"❥\"\u003e❥\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"engraving-font-picker\"\u003e\n \u003clabel class=\"font-picker-label\"\u003eSchriftart wählen\u003c\/label\u003e\n \u003cdiv class=\"font-group\"\u003e\n \u003cspan class=\"font-group-title\"\u003eSerif\u003c\/span\u003e\u003cdiv class=\"font-group-buttons\"\u003e\n \u003cbutton type=\"button\" class=\"font-btn\" data-font=\"Times New Roman\" style=\"font-family:'Times New Roman'\"\u003eTimes New Roman\u003c\/button\u003e\u003cbutton type=\"button\" class=\"font-btn\" data-font=\"Georgia\" style=\"font-family:Georgia\"\u003eGeorgia\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"font-group\"\u003e\n \u003cspan class=\"font-group-title\"\u003eSans-serif\u003c\/span\u003e\u003cdiv class=\"font-group-buttons\"\u003e\n \u003cbutton type=\"button\" class=\"font-btn\" data-font=\"Arial\" style=\"font-family:Arial\"\u003eArial\u003c\/button\u003e\u003cbutton type=\"button\" class=\"font-btn\" data-font=\"Helvetica\" style=\"font-family:Helvetica\"\u003eHelvetica\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"font-group\"\u003e\n \u003cspan class=\"font-group-title\"\u003eMonospace\u003c\/span\u003e\u003cdiv class=\"font-group-buttons\"\u003e\n \u003cbutton type=\"button\" class=\"font-btn\" data-font=\"Courier New\" style=\"font-family:'Courier New'\"\u003eCourier New\u003c\/button\u003e\u003cbutton type=\"button\" class=\"font-btn\" data-font=\"Lucida Console\" style=\"font-family:'Lucida Console'\"\u003eLucida Console\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"font-group\"\u003e\n \u003cspan class=\"font-group-title\"\u003eSchreibschrift\u003c\/span\u003e\u003cdiv class=\"font-group-buttons\"\u003e\n \u003cbutton type=\"button\" class=\"font-btn script\" data-font=\"Allura\" style=\"font-family:'Allura'\"\u003eAllura\u003c\/button\u003e\u003cbutton type=\"button\" class=\"font-btn script\" data-font=\"Alex Brush\" style=\"font-family:'Alex Brush'\"\u003eAlex Brush\u003c\/button\u003e\u003cbutton type=\"button\" class=\"font-btn script\" data-font=\"Kaushan Script\" style=\"font-family:'Kaushan Script'\"\u003eKaushan Script\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"font-group\"\u003e\n \u003cspan class=\"font-group-title\"\u003eHandschrift\u003c\/span\u003e\u003cdiv class=\"font-group-buttons\"\u003e\n \u003cbutton type=\"button\" class=\"font-btn script\" data-font=\"Pacifico\" style=\"font-family:'Pacifico'\"\u003ePacifico\u003c\/button\u003e\u003cbutton type=\"button\" class=\"font-btn script\" data-font=\"Indie Flower\" style=\"font-family:'Indie Flower'\"\u003eIndie Flower\u003c\/button\u003e\u003cbutton type=\"button\" class=\"font-btn script\" data-font=\"Dancing Script\" style=\"font-family:'Dancing Script'\"\u003eDancing Script\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cinput type=\"hidden\" name=\"properties[Schriftart]\" id=\"selectedFont\"\u003e\n \u003c\/div\u003e\n \u003cspan class=\"jm-grav-trust-line\"\u003e\u003ci class=\"bi bi-shield-check\"\u003e\u003c\/i\u003e Jede Gravur wird individuell geprüft \u0026amp; präzise gefertigt\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/section\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-card-footer\"\u003e\n \u003cbutton class=\"jm-cfg-btn-back\" id=\"jm-cfg-back-2\"\u003e\u003ci class=\"bi bi-arrow-left\"\u003e\u003c\/i\u003e Zurück\u003c\/button\u003e\n \u003cbutton class=\"jm-cfg-btn-next\" id=\"jm-cfg-next-2\"\u003eZur Bestätigung \u003ci class=\"bi bi-arrow-right\"\u003e\u003c\/i\u003e\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n\n \u003c!-- SCHRITT 3 --\u003e\n \u003cdiv class=\"jm-cfg-card\" id=\"jm-cfg-card-3\"\u003e\n \u003cdiv class=\"jm-cfg-card-body\"\u003e\n \u003ch3 class=\"jm-cfg-s3-title\"\u003eIhre Konfiguration im Überblick\u003c\/h3\u003e\n \u003cp class=\"jm-cfg-s3-subtitle\"\u003ePrüfe alle deine Angaben, bevor du sie in den Warenkorb legst.\u003c\/p\u003e\n \u003cdiv class=\"jm-cfg-s3-grid\"\u003e\n \u003cimg class=\"jm-cfg-s3-thumb\" id=\"jm-cfg-s3-thumb\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Gewählter Ring\"\u003e\n \u003cdiv\u003e\n \u003cp class=\"jm-cfg-s3-product-name\"\u003eVergoldeter Herren Siegelring mit Gravur\u003c\/p\u003e\n \u003cdiv class=\"jm-cfg-s3-rows\"\u003e\n \u003cdiv class=\"jm-cfg-s3-row\"\u003e\n \u003cspan class=\"jm-cfg-s3-row-label\"\u003eStein\u003c\/span\u003e\u003cspan class=\"jm-cfg-s3-row-value\" id=\"jm-cfg-s3-stone\"\u003eSchwarz-Onyx\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-s3-row\"\u003e\n \u003cspan class=\"jm-cfg-s3-row-label\"\u003eRinggröße\u003c\/span\u003e\u003cspan class=\"jm-cfg-s3-row-value\" id=\"jm-cfg-s3-size\"\u003e59,6 mm · Ø 18,9 mm\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-s3-row\"\u003e\n \u003cspan class=\"jm-cfg-s3-row-label\"\u003eGravur\u003c\/span\u003e\u003cspan class=\"jm-cfg-s3-row-value\"\u003eInnenseite · kostenlos\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-s3-gravur-box\"\u003e\n \u003cspan class=\"jm-cfg-s3-gravur-eyebrow\"\u003eIhre Innengravur\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-s3-gravur-text\" id=\"jm-cfg-s3-gravur-text\"\u003e–\u003c\/span\u003e\n \u003cspan class=\"jm-cfg-s3-gravur-meta\" id=\"jm-cfg-s3-gravur-meta\"\u003eSchriftart: Playfair Display\u003c\/span\u003e\n \u003cdiv style=\"margin-top:14px;padding-top:12px;border-top:1px solid rgba(201,168,76,0.2);\"\u003e\n \u003cspan style=\"display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#c9a84c;font-weight:700;margin-bottom:10px;\"\u003eGewählte Schriftart\u003c\/span\u003e\n \u003cdiv id=\"jm-cfg-s3-font-preview\" style=\"display:inline-block;padding:10px 18px;border:2px solid #c9a84c;border-radius:12px;background:rgba(201,168,76,0.12);color:#f7f0e3;font-size:1.3rem;letter-spacing:0.05em;box-shadow:0 4px 14px rgba(0,0,0,0.15);\"\u003e\u003c\/div\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-s3-price-wrap\" id=\"jm-cfg-s3-price\"\u003e\u003c\/div\u003e\n \u003cbutton type=\"button\" class=\"engraving-collection-btn jm-cfg-s3-cta\" id=\"jm-cfg-s3-cta-btn\" style=\"width:100%;justify-content:center;font-size:15px;padding:18px 32px;\"\u003e\n \u003ci class=\"bi bi-bag-check\"\u003e\u003c\/i\u003e Jetzt personalisieren \u003ci class=\"bi bi-arrow-up\"\u003e\u003c\/i\u003e\n \u003c\/button\u003e\n \u003cdiv class=\"jm-cfg-s3-trust\"\u003e\n \u003cspan\u003e\u003ci class=\"bi bi-shield-check\"\u003e\u003c\/i\u003e Handgravur in Deutschland\u003c\/span\u003e\n \u003cspan\u003e\u003ci class=\"bi bi-truck\"\u003e\u003c\/i\u003e Versand 1–3 Werktage\u003c\/span\u003e\n \u003cspan\u003e\u003ci class=\"bi bi-lock\"\u003e\u003c\/i\u003e Sichere Zahlung\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cp class=\"jm-cfg-s3-note\"\u003e✦ Personalisierte Produkte sind vom Umtausch ausgeschlossen.\u003cbr\u003eBitte prüfen Sie Ihre Angaben sorgfältig.\u003c\/p\u003e\n \u003c\/div\u003e\n \u003cdiv class=\"jm-cfg-card-footer\"\u003e\n \u003cbutton class=\"jm-cfg-btn-back\" id=\"jm-cfg-back-3\"\u003e\u003ci class=\"bi bi-arrow-left\"\u003e\u003c\/i\u003e Gravur ändern\u003c\/button\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n\n \u003c\/div\u003e\n \u003c!-- \/jm-cfg-wrap --\u003e\n \u003c!-- CTA STRIP --\u003e\n \u003csection class=\"engraving-cta-strip engraving-fade\" id=\"gravur\"\u003e\n \u003ci class=\"bi bi-stars\" style=\"font-size:6rem;color:#c0a860;\"\u003e\u003c\/i\u003e\n \u003ch2 style=\"margin-top:15px;\"\u003eDeine Gravur.\u003cbr\u003e Deine Geschichte.\u003c\/h2\u003e\n \u003cp\u003eEin Ring, der mehr sagt als Worte.\u003c\/p\u003e\n \u003cp\u003eHandarbeit mit Herz. Wir verewigen Emotionen – präzise, hochwertig und mit Respekt.\u003c\/p\u003e\n \u003cp style=\"color:#fff;font-weight:400;\"\u003eExcellence seit 1991.\u003c\/p\u003e\n \u003cbutton type=\"button\" class=\"engraving-collection-btn js-scroll-to-form\" data-target=\"#product-form\"\u003eJetzt personalisieren \u003ci class=\"bi bi-arrow-up\"\u003e\u003c\/i\u003e\u003c\/button\u003e\n \u003c\/section\u003e\n\n\u003c\/div\u003e\u003c!-- \/engraving-product --\u003e\n\u003c!-- MOBILE POPUP --\u003e\n\u003cdiv id=\"engraving-mobile-popup\"\u003e\n \u003cdiv class=\"popup-preview\" style=\"position:relative;margin-bottom:10px;\"\u003e\n \u003c!-- Eigene ID: wird nicht vom globalen theme.js überschrieben --\u003e\n \u003cimg id=\"jmGoldPopupImg\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Gravur Vorschau Mobile\" style=\"width:100%;border-radius:14px;\"\u003e\n \u003cdiv class=\"engraving-overlay active\"\u003e\n \u003csvg viewbox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"position:absolute;inset:0;width:100%;height:100%;overflow:visible;\"\u003e\n \u003cdefs\u003e\u003cpath id=\"popupArcPath\" d=\"M 76,232 A 120,120 0 0,1 320,240\" fill=\"none\"\u003e\u003c\/path\u003e\u003c\/defs\u003e\n \u003ctext class=\"engraving-arc-popup-text\"\u003e\n \u003ctextpath href=\"#popupArcPath\" id=\"popupArcTextEl\" startoffset=\"50%\" text-anchor=\"middle\"\u003e\u003c\/textpath\u003e\n \u003c\/text\u003e\n \u003c\/svg\u003e\n \u003cspan class=\"popup-preview-check\"\u003e\u003ci class=\"bi bi-check\" style=\"color:#34aa8b;\"\u003e\u003c\/i\u003e\u003c\/span\u003e\n \u003c\/div\u003e\n \u003c\/div\u003e\n \u003cbutton type=\"button\" class=\"engraving-collection-btn\" id=\"jm-cfg-popup-next\"\u003e\n Zur Bestätigung \u003ci class=\"bi bi-arrow-right\"\u003e\u003c\/i\u003e\n \u003c\/button\u003e\n\u003c\/div\u003e\n\n\n\u003cscript\u003e\/* ═══════════════════════════════════════════════════════════════\n JUWELIER MILANO – FINALES JS\n Stand: 25.04.2025\n Neu: Inner-Vorschaubild pro Stein · Mobile Popup bei Symbol + Font\n Polling Fallback für Symbol-Inserts (Shopify Handler)\n ═══════════════════════════════════════════════════════════════ *\/\n\n\n\/* ════════════════════════════════════════════════════════════\n GRAVUR-POSITION PRO FARBE (Werte mit ?jmtweak=1 ermitteln)\n Ziele:\n step2_desktop – Gravur-Studio Schritt 2, Desktop\n step2_mobile – Gravur-Studio Schritt 2, Mobile\n popup – Mobile-Popup unten (Gravur-Studio)\n panel – Live-Vorschau oben, Desktop-Panel\n mfp – Live-Vorschau oben, Mobile-Popup\n Schlüssel je Ziel: default (alle Farben) oder onyx \/ tiger \/ rot.\n Werte in % der Bildfläche:\n cx\/cy = Mitte · w = Breite · tilt = Winkel (+ = rechts höher, − = rechts tiefer)\n bulge = Wölbung · rot = Drehung ° · size = Schriftgröße\n offset = Textposition auf dem Bogen · spacing = Zeichenabstand\n Ziele ohne Eintrag bleiben unverändert.\n ════════════════════════════════════════════════════════════ *\/\n var JM_ARC = {\n step2_desktop: {\n default: { cx: 50, cy: 39, w: 64, tilt: -6, bulge: 7, rot: 0, size: 3, offset: 53, spacing: 0 },\n onyx: { cx: 53, cy: 51, w: 73, tilt: -6, bulge: 55, rot: -13, size: 4.4, offset: 52, spacing: 0 },\n tiger: { cx: 51, cy: 38.5, w: 56.5, tilt: 0.5, bulge: 26.5, rot: 0, size: 3.95, offset: 52.5, spacing: 0 },\n rot: { cx: 49.5, cy: 32.5, w: 61.5, tilt: -6, bulge: 9.5, rot: -5, size: 3.55, offset: 53, spacing: 0 }\n },\n step2_mobile: {\n default: { cx: 50, cy: 39, w: 64, tilt: -6, bulge: 7, rot: 0, size: 4, offset: 53, spacing: 0 },\n rot: { cx: 50, cy: 40.5, w: 65.5, tilt: -1.5, bulge: 29.5, rot: 0, size: 4, offset: 48, spacing: 0 }\n },\n popup: {\n default: { cx: 49.5, cy: 59, w: 61, tilt: -2, bulge: 61, rot: 0, size: 3.75, offset: 50, spacing: 0 },\n onyx: { cx: 48.5, cy: 46.5, w: 98.5, tilt: -3, bulge: 61, rot: -3, size: 4.7, offset: 50, spacing: 0 },\n tiger: { cx: 48, cy: 47.5, w: 77.5, tilt: -2, bulge: 58, rot: -1, size: 5.2, offset: 50, spacing: 0 },\n rot: { cx: 48, cy: 50.5, w: 83.5, tilt: -2, bulge: 59, rot: 0, size: 3.75, offset: 50, spacing: 0 }\n },\n panel: {\n onyx: { cx: 50.5, cy: 33.5, w: 60, tilt: 0.5, bulge: 12, rot: 0, size: 5.1, offset: 50, spacing: 0 },\n tiger: { cx: 51, cy: 40, w: 55, tilt: 0, bulge: 23, rot: 0, size: 4.05, offset: 50, spacing: 0 },\n rot: { cx: 50.5, cy: 40, w: 41.5, tilt: 0, bulge: 19, rot: 0, size: 3.65, offset: 50, spacing: 0 }\n },\n mfp: {}\n };\n\nwindow.currentFont = \"'Playfair Display', serif\";\n\n(function () {\n 'use strict';\n\n const MAX_CHARS = 11;\n\n \/* ════════════════════════════════════════════\n BILDER AUS DEN PRODUKTBILDERN DIESES PRODUKTS\n – Hauptbild je Stein = Variantenbild der Farbe\n – Innenseite je Stein = Produktbild mit Alt-Text \"innen\" + Farbe\n (z. B. \"Innenseite Schwarz-Onyx\"), sonst Hauptbild\n ════════════════════════════════════════════ *\/\n const PH = 'data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';\n const STONES = {\n onyx: { keys: ['schwarz', 'black'], label: 'Schwarz-Onyx' },\n tiger: { keys: ['tiger'], label: 'Tigerauge' },\n rot: { keys: ['rot', 'red'], label: 'Rot-Onyx' }\n };\n const SIZES = {\n s1: { keys: ['59'], umfang: '59,6 mm', d: '18,9 mm' },\n s2: { keys: ['62'], umfang: '62 mm', d: '19,75 mm' },\n s3: { keys: ['64'], umfang: '64,6 mm', d: '20,6 mm' }\n };\n \/* Übergangsweise EIN Innenseiten-Vorschaubild für alle Farben.\n Sobald je Farbe eigene Innenseiten-Bilder (Alt-Text \"Innenseite vergoldet …\") hochgeladen sind,\n hier einfach '' eintragen – dann greift automatisch das Bild pro Farbe. *\/\n const INNER_FIXED = '';\n const IMGS = { onyx: { inner: INNER_FIXED }, tiger: { inner: INNER_FIXED }, rot: { inner: INNER_FIXED } }; \/* {primary, inner, hover} *\/\n const INNER_IMGS = {}; \/* Kompatibilität *\/\n let PRODUCT = null;\n \/* ── DOM ── *\/\n const engInput = document.getElementById('engravingInput');\n const arcEl = document.getElementById('engravingArcTextEl');\n const hiddenSpan = document.getElementById('engravingPreviewText');\n const overlay = document.getElementById('engravingOverlay');\n const mobilePopup = document.getElementById('engraving-mobile-popup');\n const popupArcEl = document.getElementById('popupArcTextEl');\n const popupPreviewImg = document.getElementById('jmGoldPopupImg');\n const hiddenFont = document.getElementById('selectedFont');\n const previewImage = document.querySelector('.engraving-preview-image');\n const symbolBtns = document.querySelectorAll('.symbol-btn');\n const fontBtns = document.querySelectorAll('.font-btn');\n const popupCheck = mobilePopup \u0026\u0026 mobilePopup.querySelector('.popup-preview-check');\n const desktopCheck = document.querySelector('.preview-check');\n const engCounter = document.getElementById('engravingCounter');\n\n let lastValue = '';\n let hasPulsed = false;\n\n \/* ── Konfigurator State ── *\/\n const jmCfgState = {\n stone: 'onyx',\n label: 'Schwarz-Onyx',\n size: 's1',\n imgPrimary: PH,\n imgInner: PH,\n };\n\n \/* ── Zähler ── *\/\n function updateCounter(val) {\n if (!engCounter) return;\n const r = MAX_CHARS - val.length;\n if (!val.length) {\n engCounter.textContent = 'Max. 11 Zeichen · Initialen, Datum oder Botschaft';\n engCounter.style.color = '';\n } else {\n engCounter.textContent = val.length + ' \/ 11 Zeichen';\n engCounter.style.color = r === 0 ? '#d44' : r \u003c= 2 ? '#c9630e' : '#777';\n }\n }\n\n \/* ── Popup ── *\/\n function showPopup() { if (window.innerWidth \u003e 768) return; mobilePopup \u0026\u0026 mobilePopup.classList.add('show'); }\n function hidePopup() { mobilePopup \u0026\u0026 mobilePopup.classList.remove('show'); }\n\n \/* ── Popup Arc + Check sync ── *\/\n function syncPopupFromPreview() {\n \/* Konfigurator-Input (Schritt 2) ODER Product Form Input *\/\n const konfVal = engInput ? engInput.value.trim() : '';\n const formInput = document.querySelector('#gravurtext_innenseite');\n const formVal = formInput ? formInput.value.trim() : '';\n const val = konfVal || formVal;\n if (!val) return;\n\n if (popupArcEl) {\n popupArcEl.textContent = val;\n popupArcEl.style.fontFamily = window.currentFont;\n }\n if (popupCheck) {\n popupCheck.classList.add('show');\n clearTimeout(popupCheck._t);\n popupCheck._t = setTimeout(() =\u003e popupCheck.classList.remove('show'), 1000);\n }\n mobilePopup \u0026\u0026 mobilePopup.classList.add('show');\n }\n\n \/* ── Arc update (Desktop + Popup) ── *\/\n function updateArcs(value) {\n if (arcEl) { arcEl.textContent = value; arcEl.style.fontFamily = window.currentFont; }\n if (hiddenSpan) hiddenSpan.textContent = value;\n if (popupArcEl) { popupArcEl.textContent = value; popupArcEl.style.fontFamily = window.currentFont; }\n }\n\n \/* ── Desktop Check ── *\/\n function showCheck() {\n [desktopCheck, popupCheck].forEach(el =\u003e {\n if (!el) return;\n el.classList.add('show');\n clearTimeout(el._t);\n el._t = setTimeout(() =\u003e el.classList.remove('show'), 1000);\n });\n }\n\n \/* ── Glow ── *\/\n function triggerGlow() {\n if (!arcEl) return;\n arcEl.classList.remove('engrave-fade');\n void arcEl.getBoundingClientRect();\n arcEl.classList.add('engrave-fade');\n }\n\n \/* ── Pulse (einmalig) ── *\/\n function triggerPulse() {\n if (hasPulsed || !previewImage) return;\n previewImage.classList.remove('pulse');\n void previewImage.offsetWidth;\n previewImage.classList.add('pulse');\n hasPulsed = true;\n }\n\n \/* ── Hauptfunktion ── *\/\n function updatePreview(forceEffects) {\n const val = engInput ? engInput.value : '';\n if (!val) { overlay \u0026\u0026 overlay.classList.remove('active'); hidePopup(); lastValue = ''; return; }\n updateArcs(val);\n overlay \u0026\u0026 overlay.classList.add('active');\n if (forceEffects || val !== lastValue) {\n triggerGlow();\n showCheck();\n if (val.length === 1) triggerPulse();\n showPopup();\n }\n lastValue = val;\n }\n\n \/* ── Next2 disabled state ── *\/\n const next2Btn = document.getElementById('jm-cfg-next-2');\n function updateNext2State() {\n if (!next2Btn) return;\n const empty = !engInput || !engInput.value.trim();\n next2Btn.disabled = empty;\n next2Btn.style.opacity = empty ? '0.4' : '1';\n next2Btn.style.cursor = empty ? 'not-allowed' : 'pointer';\n next2Btn.style.pointerEvents = empty ? 'none' : 'auto';\n }\n updateNext2State();\n\n \/* ── Input ── *\/\n if (engInput) {\n engInput.addEventListener('input', () =\u003e {\n updatePreview(false);\n updateNext2State();\n updateCounter(engInput.value);\n \/* Mobile: Popup bei Tippen *\/\n if (engInput.value.trim()) requestAnimationFrame(syncPopupFromPreview);\n });\n }\n\n \/* ── Symbols (Konfigurator .symbol-btn) ── *\/\n symbolBtns.forEach(btn =\u003e {\n btn.addEventListener('click', () =\u003e {\n if (!engInput) return;\n const sym = btn.dataset.symbol || '';\n if (engInput.value.length + sym.length \u003e MAX_CHARS) return;\n const s = engInput.selectionStart, e = engInput.selectionEnd;\n engInput.value = engInput.value.substring(0, s) + sym + engInput.value.substring(e);\n engInput.focus();\n engInput.selectionStart = engInput.selectionEnd = s + sym.length;\n updatePreview(true);\n updateNext2State();\n updateCounter(engInput.value);\n \/* Mobile Popup bei Symbol-Insert *\/\n requestAnimationFrame(syncPopupFromPreview);\n });\n });\n\n \/* ── Fonts ── *\/\n fontBtns.forEach(btn =\u003e {\n btn.addEventListener('click', () =\u003e {\n window.currentFont = btn.dataset.font || window.currentFont;\n if (hiddenFont) hiddenFont.value = window.currentFont;\n if (arcEl) arcEl.style.fontFamily = window.currentFont;\n if (popupArcEl) popupArcEl.style.fontFamily = window.currentFont;\n\n const fontSelect = document.querySelector('#gravur_schriftart');\n if (fontSelect) {\n Array.from(fontSelect.options).forEach((opt, i) =\u003e {\n if (window.currentFont.includes(opt.value)) fontSelect.selectedIndex = i;\n });\n }\n\n fontBtns.forEach(b =\u003e b.classList.remove('active'));\n btn.classList.add('active');\n updatePreview(true);\n \/* Mobile Popup bei Font-Wechsel *\/\n requestAnimationFrame(syncPopupFromPreview);\n });\n });\n\n \/* ── Polling Fallback: Konfigurator engInput ──\n Erkennt Symbol-Inserts die kein native input-Event feuern *\/\n if (engInput) {\n let lastEngVal = engInput.value;\n setInterval(() =\u003e {\n if (engInput.value !== lastEngVal) {\n lastEngVal = engInput.value;\n updateCounter(engInput.value);\n updateNext2State();\n if (engInput.value.trim()) requestAnimationFrame(syncPopupFromPreview);\n }\n }, 200);\n }\n\n \/* ── Polling Fallback: Product Form #gravurtext_innenseite ──\n Erkennt Symbol-Inserts vom Shopify Symbol-Handler *\/\n const formInputRef = document.querySelector('#gravurtext_innenseite');\n if (formInputRef) {\n let lastFormVal = formInputRef.value;\n setInterval(() =\u003e {\n if (formInputRef.value !== lastFormVal) {\n lastFormVal = formInputRef.value;\n if (formInputRef.value.trim()) requestAnimationFrame(syncPopupFromPreview);\n }\n }, 200);\n }\n\n \/* ── Hero Stone Selector ── *\/\n document.querySelectorAll('.stone-btn').forEach(btn =\u003e {\n btn.addEventListener('click', () =\u003e {\n document.querySelectorAll('.stone-btn').forEach(b =\u003e b.classList.remove('active'));\n btn.classList.add('active');\n const primary = document.getElementById('heroRingPrimary');\n const hover = document.getElementById('heroRingHover');\n const wrap = primary \u0026\u0026 primary.closest('.watch-image');\n if (primary \u0026\u0026 hover \u0026\u0026 wrap) {\n wrap.classList.add('swapping');\n primary.style.opacity = '0'; hover.style.opacity = '0';\n setTimeout(() =\u003e {\n const im = IMGS[btn.dataset.stone] || {};\n primary.src = im.primary || PH;\n hover.src = im.hover || im.primary || PH;\n primary.alt = 'Vergoldeter Siegelring ' + btn.dataset.label;\n primary.style.opacity = '1';\n wrap.classList.remove('swapping');\n }, 220);\n }\n \/* Konfigurator + Produktformular mitziehen *\/\n const opt = document.querySelector('.jm-cfg-stone-option[data-stone=\"' + btn.dataset.stone + '\"]');\n if (opt \u0026\u0026 !opt.classList.contains('active')) opt.click();\n });\n });\n\n \/* ── Hero CTA ── *\/\n document.querySelectorAll('.js-scroll-to-form').forEach(btn =\u003e {\n btn.addEventListener('click', e =\u003e {\n e.preventDefault();\n const gravurInput = document.querySelector('#gravurtext_innenseite');\n if (gravurInput \u0026\u0026 hiddenSpan) {\n gravurInput.value = hiddenSpan.textContent.trim();\n gravurInput.style.fontFamily = window.currentFont;\n }\n const fontSelect = document.querySelector('#gravur_schriftart');\n if (fontSelect) {\n Array.from(fontSelect.options).forEach((opt, i) =\u003e {\n if (window.currentFont.includes(opt.value)) fontSelect.selectedIndex = i;\n });\n }\n const form = document.querySelector('#product-form, form[action*=\"\/cart\/add\"]');\n if (!form) return;\n form.scrollIntoView({ behavior: 'smooth', block: 'start' });\n const first = form.querySelector('input, textarea, select');\n if (first) setTimeout(() =\u003e first.focus(), 500);\n });\n });\n\n \/* ── Live Preview Link ── *\/\n document.querySelectorAll('.live-preview-link').forEach(link =\u003e {\n link.addEventListener('click', e =\u003e {\n e.preventDefault();\n document.getElementById('jm-cfg-wrap') \u0026\u0026\n document.getElementById('jm-cfg-wrap').scrollIntoView({ behavior: 'smooth', block: 'start' });\n });\n });\n\n \/* ── Popup außerhalb \/ Scroll ── *\/\n document.addEventListener('click', e =\u003e {\n if (!mobilePopup) return;\n if (!mobilePopup.contains(e.target) \u0026\u0026 e.target !== engInput) hidePopup();\n });\n window.addEventListener('scroll', hidePopup, { passive: true });\n\n \/* ── Intersection Observer ── *\/\n const io = new IntersectionObserver(entries =\u003e {\n entries.forEach(en =\u003e { if (en.isIntersecting) en.target.classList.add('show'); });\n }, { threshold: 0.15 });\n document.querySelectorAll('.engraving-fade').forEach(el =\u003e io.observe(el));\n\n\n \/* ════════════════════════════════════════════\n 3-SCHRITT KONFIGURATOR\n ════════════════════════════════════════════ *\/\n\n let jmStep = 1;\n const TOTAL = 3;\n\n function jmSetStep(n, scroll) {\n jmStep = n;\n document.querySelectorAll('.jm-cfg-card').forEach(c =\u003e c.classList.remove('active'));\n const card = document.getElementById('jm-cfg-card-' + n);\n if (card) card.classList.add('active');\n\n for (let i = 1; i \u003c= TOTAL; i++) {\n const si = document.getElementById('jm-cfg-si-' + i);\n const sc = document.getElementById('jm-cfg-sc-' + i);\n if (!si || !sc) continue;\n si.classList.remove('active', 'done');\n if (i \u003c n) { si.classList.add('done'); sc.innerHTML = '\u003ci class=\"bi bi-check-lg\"\u003e\u003c\/i\u003e'; }\n if (i === n){ si.classList.add('active'); sc.textContent = i; }\n if (i \u003e n) { sc.textContent = i; }\n }\n\n for (let i = 1; i \u003c TOTAL; i++) {\n const ln = document.getElementById('jm-cfg-line-' + i);\n if (ln) ln.classList.toggle('done', n \u003e i);\n }\n\n const fill = document.getElementById('jm-cfg-progress');\n if (fill) fill.style.width = Math.round(((n - 1) \/ (TOTAL - 1)) * 100) + '%';\n\n if (n !== 2) hidePopup();\n if (n === 3) jmFillSummary();\n if (n === 2) updateNext2State();\n\n if (scroll) {\n const wrap = document.getElementById('jm-cfg-wrap');\n if (wrap) wrap.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n }\n\n \/* ── Stone Options ── *\/\n document.querySelectorAll('.jm-cfg-stone-option').forEach(opt =\u003e {\n opt.addEventListener('click', function () {\n document.querySelectorAll('.jm-cfg-stone-option').forEach(o =\u003e o.classList.remove('active'));\n this.classList.add('active');\n\n const im = IMGS[this.dataset.stone] || {};\n jmCfgState.stone = this.dataset.stone;\n jmCfgState.label = this.dataset.label;\n jmCfgState.imgPrimary = im.primary || PH;\n jmCfgState.imgInner = im.inner || im.primary || PH;\n\n const p = document.getElementById('jm-cfg-ring-primary');\n const h = document.getElementById('jm-cfg-ring-hover');\n const lb = document.getElementById('jm-cfg-ring-label');\n const cp = document.getElementById('jm-cfg-ring-caption');\n if (p) { p.style.opacity = '0'; setTimeout(() =\u003e { p.src = jmCfgState.imgPrimary; p.style.opacity = '1'; }, 200); }\n if (h) h.src = im.hover || jmCfgState.imgPrimary;\n if (lb) lb.textContent = this.dataset.label;\n if (cp) cp.textContent = 'Stein: ' + this.dataset.label;\n\n \/* Schritt-2-Vorschaubild tauschen *\/\n const previewImg = document.getElementById('jmGoldStep2Img');\n if (previewImg) {\n previewImg.style.opacity = '0';\n setTimeout(() =\u003e { previewImg.src = jmCfgState.imgInner; previewImg.style.opacity = '1'; }, 200);\n }\n if (popupPreviewImg) popupPreviewImg.src = jmCfgState.imgInner;\n\n const hp = document.getElementById('heroRingPrimary');\n const hh = document.getElementById('heroRingHover');\n if (hp) hp.src = jmCfgState.imgPrimary;\n if (hh) hh.src = im.hover || jmCfgState.imgPrimary;\n\n document.querySelectorAll('.stone-btn').forEach(b =\u003e {\n b.classList.toggle('active', b.dataset.stone === this.dataset.stone);\n });\n\n updateSizeAvailability();\n if (!jmSilent) {\n ensureAvailableSize();\n selectVariant();\n \/* Swatch im Produktformular mitklicken → gleiche Bildlogik wie oben *\/\n const sw = formSwatchFor(this.dataset.stone);\n if (sw) { jmSilent = true; sw.click(); jmSilent = false; }\n }\n const imNow = IMGS[this.dataset.stone] || {};\n setTimeout(() =\u003e setPanels(imNow.inner || imNow.primary), 80);\n if (typeof window.jmArcOnStone === 'function') window.jmArcOnStone();\n if (typeof applyAllArcs === 'function') applyAllArcs();\n });\n });\n\n \/* ── Summary ── *\/\n function jmFillSummary() {\n const stoneEl = document.getElementById('jm-cfg-s3-stone');\n if (stoneEl) stoneEl.textContent = jmCfgState.label;\n const sizeEl = document.getElementById('jm-cfg-s3-size');\n const sz = SIZES[jmCfgState.size];\n if (sizeEl \u0026\u0026 sz) sizeEl.textContent = sz.umfang + ' · Ø ' + sz.d;\n\n const thumb = document.getElementById('jm-cfg-s3-thumb');\n if (thumb) thumb.src = jmCfgState.imgPrimary;\n\n const gravurText = hiddenSpan ? hiddenSpan.textContent.trim() : '';\n const gravurEl = document.getElementById('jm-cfg-s3-gravur-text');\n const gravurMeta = document.getElementById('jm-cfg-s3-gravur-meta');\n if (gravurEl) { gravurEl.textContent = gravurText || '–'; gravurEl.style.fontFamily = window.currentFont; }\n\n const fontName = window.currentFont.replace(\/['\"]\/g, '').split(',')[0].trim();\n if (gravurMeta) gravurMeta.textContent = 'Schriftart: ' + fontName + ' · ' + gravurText.length + ' Zeichen';\n\n const fp = document.getElementById('jm-cfg-s3-font-preview');\n if (fp) { fp.textContent = fontName; fp.style.fontFamily = window.currentFont; }\n\n const priceSource = document.querySelector('.price__pricing-group');\n const priceTarget = document.getElementById('jm-cfg-s3-price');\n if (priceSource \u0026\u0026 priceTarget) priceTarget.innerHTML = priceSource.innerHTML;\n }\n\n \/* ── Navigation ── *\/\n const next1 = document.getElementById('jm-cfg-next-1');\n const next2 = document.getElementById('jm-cfg-next-2');\n const back2 = document.getElementById('jm-cfg-back-2');\n const back3 = document.getElementById('jm-cfg-back-3');\n\n if (next1) next1.addEventListener('click', () =\u003e jmSetStep(2, true));\n if (back2) back2.addEventListener('click', () =\u003e jmSetStep(1, true));\n\n if (next2) next2.addEventListener('click', () =\u003e {\n const gravurInput = document.querySelector('#gravurtext_innenseite');\n if (gravurInput \u0026\u0026 hiddenSpan) {\n gravurInput.value = hiddenSpan.textContent.trim();\n gravurInput.style.fontFamily = window.currentFont;\n }\n const fontSelect = document.querySelector('#gravur_schriftart');\n if (fontSelect) {\n Array.from(fontSelect.options).forEach((opt, i) =\u003e {\n if (window.currentFont.includes(opt.value)) fontSelect.selectedIndex = i;\n });\n }\n jmSetStep(3, true);\n });\n\n if (back3) back3.addEventListener('click', () =\u003e jmSetStep(2, true));\n\n \/* ── Popup CTA ── *\/\n const popupNext = document.getElementById('jm-cfg-popup-next');\n if (popupNext) {\n popupNext.addEventListener('click', () =\u003e {\n hidePopup();\n if (jmStep === 2) {\n const gravurInput = document.querySelector('#gravurtext_innenseite');\n if (gravurInput \u0026\u0026 hiddenSpan) {\n gravurInput.value = hiddenSpan.textContent.trim();\n gravurInput.style.fontFamily = window.currentFont;\n }\n jmSetStep(3, true);\n }\n });\n }\n\n \/* ── Schritt 3 CTA ── *\/\n const s3Cta = document.getElementById('jm-cfg-s3-cta-btn');\n if (s3Cta) {\n s3Cta.addEventListener('click', () =\u003e {\n const gravurInput = document.querySelector('#gravurtext_innenseite');\n if (gravurInput \u0026\u0026 hiddenSpan) {\n const val = hiddenSpan.textContent.trim();\n gravurInput.value = val;\n gravurInput.style.fontFamily = window.currentFont;\n gravurInput.dispatchEvent(new Event('input', { bubbles: true }));\n gravurInput.dispatchEvent(new Event('change', { bubbles: true }));\n const maxNote = gravurInput.parentElement \u0026\u0026 gravurInput.parentElement.querySelector('.max-length-note');\n if (maxNote) maxNote.textContent = maxNote.textContent.replace(\/\\d+(?=\\s*\\\/|\\s*Zeichen)\/, val.length);\n }\n const fontSelect = document.querySelector('#gravur_schriftart');\n if (fontSelect) {\n Array.from(fontSelect.options).forEach((opt, i) =\u003e {\n if (window.currentFont.includes(opt.value)) fontSelect.selectedIndex = i;\n });\n fontSelect.dispatchEvent(new Event('change', { bubbles: true }));\n }\n selectVariant();\n document.querySelectorAll('.font-btn').forEach(btn =\u003e {\n btn.classList.toggle('active', window.currentFont.includes(btn.dataset.font || ''));\n });\n const form = document.querySelector('#product-form, form[action*=\"\/cart\/add\"]');\n if (!form) return;\n form.scrollIntoView({ behavior: 'smooth', block: 'start' });\n });\n }\n\n \/* ════════════════════════════════════════════\n VARIANTEN-LOGIK (Stein + Größe ↔ Produktformular)\n ════════════════════════════════════════════ *\/\n let jmSilent = false;\n const productForm = document.querySelector('#product-form, form[action*=\"\/cart\/add\"]');\n\n function hasKey(str, keys) {\n const s = String(str || '').toLowerCase();\n return keys.some(k =\u003e s.indexOf(k) \u003e -1);\n }\n function stoneOfVariant(v) {\n for (const k in STONES) { if (v.options.some(o =\u003e hasKey(o, STONES[k].keys))) return k; }\n return null;\n }\n function sizeOfVariant(v) {\n for (const k in SIZES) { if (v.options.some(o =\u003e hasKey(String(o).replace(',', '.'), SIZES[k].keys))) return k; }\n return null;\n }\n function findVariant(stone, size) {\n if (!PRODUCT) return null;\n return PRODUCT.variants.find(v =\u003e stoneOfVariant(v) === stone \u0026\u0026 sizeOfVariant(v) === size) || null;\n }\n function imgUrl(src) {\n if (!src) return '';\n if (src.indexOf('\/\/') === 0) src = 'https:' + src;\n return src + (src.indexOf('?') \u003e -1 ? '\u0026' : '?') + 'width=900';\n }\n\n \/* Produktformular auf Stein + Größe setzen *\/\n function selectVariant() {\n const v = findVariant(jmCfgState.stone, jmCfgState.size);\n if (!v || !productForm) return;\n const vals = v.options.map(String);\n productForm.querySelectorAll('select').forEach(sel =\u003e {\n if (sel.name === 'id') return;\n Array.from(sel.options).forEach((o, i) =\u003e {\n if (vals.indexOf(o.value) \u003e -1 \u0026\u0026 sel.selectedIndex !== i) {\n sel.selectedIndex = i;\n sel.dispatchEvent(new Event('change', { bubbles: true }));\n }\n });\n });\n productForm.querySelectorAll('input[type=\"radio\"]').forEach(r =\u003e {\n if (vals.indexOf(r.value) \u003e -1 \u0026\u0026 !r.checked) {\n r.checked = true;\n r.dispatchEvent(new Event('change', { bubbles: true }));\n }\n });\n const idSel = productForm.querySelector('select[name=\"id\"]');\n if (idSel \u0026\u0026 String(idSel.value) !== String(v.id)) {\n idSel.value = v.id;\n idSel.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\n\n \/* Größen ohne Bestand für den gewählten Stein ausgrauen *\/\n function updateSizeAvailability() {\n document.querySelectorAll('.jm-gs-size').forEach(b =\u003e {\n const v = findVariant(jmCfgState.stone, b.dataset.size);\n b.classList.toggle('unavailable', !!PRODUCT \u0026\u0026 (!v || !v.available));\n });\n }\n\n \/* Gewählte Größe für diesen Stein ausverkauft → erste verfügbare Größe nehmen *\/\n function ensureAvailableSize() {\n if (!PRODUCT) return;\n const cur = findVariant(jmCfgState.stone, jmCfgState.size);\n if (cur \u0026\u0026 cur.available) return;\n const alt = Object.keys(SIZES).find(k =\u003e { const v = findVariant(jmCfgState.stone, k); return v \u0026\u0026 v.available; });\n if (alt) applySize(alt);\n }\n\n \/* Größenanzeige überall aktualisieren *\/\n function applySize(key) {\n const sz = SIZES[key];\n if (!sz) return;\n jmCfgState.size = key;\n document.querySelectorAll('.jm-gs-size').forEach(b =\u003e b.classList.toggle('active', b.dataset.size === key));\n document.querySelectorAll('.jm-rsz-tr[data-size]').forEach(tr =\u003e tr.classList.toggle('jm-rsz-hl', tr.dataset.size === key));\n const set = (id, txt) =\u003e { const el = document.getElementById(id); if (el) el.textContent = txt; };\n set('jm-gs-svg-umfang', 'UMFANG ≈ ' + sz.umfang);\n set('jm-gs-svg-d', 'Ø ' + sz.d);\n set('jm-gs-anno-umfang', 'Umfang = ' + sz.umfang);\n set('jm-gs-anno-d', 'Ø ' + sz.d);\n const strip = document.getElementById('jm-gs-size-strip');\n if (strip) strip.innerHTML = '\u003cstrong\u003eGröße ' + sz.umfang + '\u003c\/strong\u003e · Ø ' + sz.d + ' · Ringbreite 21 mm · 316L vergoldet';\n }\n\n function chooseSize(key, el) {\n const v = findVariant(jmCfgState.stone, key);\n if (PRODUCT \u0026\u0026 (!v || !v.available)) {\n if (el) { el.classList.remove('jm-gs-shake'); void el.offsetWidth; el.classList.add('jm-gs-shake'); }\n return;\n }\n applySize(key);\n selectVariant();\n }\n\n document.querySelectorAll('.jm-gs-size').forEach(b =\u003e b.addEventListener('click', () =\u003e chooseSize(b.dataset.size, b)));\n document.querySelectorAll('.jm-rsz-tr[data-size]').forEach(tr =\u003e tr.addEventListener('click', () =\u003e chooseSize(tr.dataset.size, tr)));\n\n \/* Produktformular → Konfigurator (Dropdown\/Swatches geändert) *\/\n let lastVariantId = null;\n function syncFromForm() {\n if (!PRODUCT || !productForm) return;\n const idField = productForm.querySelector('[name=\"id\"]');\n const id = idField ? String(idField.value) : null;\n if (!id || id === lastVariantId) return;\n lastVariantId = id;\n const v = PRODUCT.variants.find(x =\u003e String(x.id) === id);\n if (!v) return;\n const stone = stoneOfVariant(v), size = sizeOfVariant(v);\n jmSilent = true;\n if (stone \u0026\u0026 stone !== jmCfgState.stone) {\n const opt = document.querySelector('.jm-cfg-stone-option[data-stone=\"' + stone + '\"]');\n if (opt) opt.click();\n }\n jmSilent = false;\n if (size) applySize(size);\n updateSizeAvailability();\n const imF = IMGS[jmCfgState.stone] || {};\n setTimeout(() =\u003e setPanels(imF.inner || imF.primary), 120);\n }\n if (productForm) {\n productForm.addEventListener('change', () =\u003e setTimeout(syncFromForm, 60));\n setInterval(syncFromForm, 500);\n }\n\n \/* ── Fallback: Bilder aus den Farb-Swatches im Produktformular ──\n (die Swatches tragen das Variantenbild in data-img-primary) *\/\n function formSwatchFor(stone) {\n if (!productForm || !STONES[stone]) return null;\n const els = productForm.querySelectorAll('[data-img-primary]');\n for (const el of els) {\n const inp = el.querySelector('input');\n const txt = [el.dataset.value, el.dataset.label, el.getAttribute('title'), el.getAttribute('aria-label'),\n inp \u0026\u0026 inp.value, el.textContent].join(' ');\n if (hasKey(txt, STONES[stone].keys)) return el;\n }\n return null;\n }\n function fillFromSwatches() {\n Object.keys(STONES).forEach(k =\u003e {\n const sw = formSwatchFor(k);\n if (!sw || !sw.dataset.imgPrimary) return;\n const url = imgUrl(sw.dataset.imgPrimary);\n const cur = IMGS[k] || {};\n if (!cur.primary) IMGS[k] = { primary: url, inner: INNER_FIXED || cur.inner || url, hover: cur.hover || INNER_FIXED || cur.inner || url };\n });\n }\n\n \/* ── Live-Vorschau oben im Produktformular (Desktop-Panel + Mobile-Popup) ──\n Nutzt die vorhandene Funktion window.syncPanelImages aus dem Gravur-Snippet\n und den Freigabe-Flag, damit der Bildschutz dort das Bild nicht zurücksetzt. *\/\n function setPanels(url) {\n if (!url || url === PH) return;\n window.jmAllowPanelChange = true;\n if (typeof window.syncPanelImages === 'function') {\n window.syncPanelImages(url);\n } else {\n const d = document.getElementById('jm-desktop-preview-img');\n const m = document.querySelector('#jm-mobile-form-popup img');\n if (d) d.src = url;\n if (m) m.src = url;\n }\n clearTimeout(setPanels._t);\n setPanels._t = setTimeout(() =\u003e { window.jmAllowPanelChange = false; }, 700);\n guardPanels();\n }\n\n \/* Wächter: setzt ein fremdes Skript (z. B. das Gravur-Snippet beim Öffnen des Panels)\n ein anderes Bild, wird sofort wieder das Bild dieses Produkts eingesetzt. *\/\n function panelWant() {\n const im = IMGS[jmCfgState.stone] || {};\n return im.inner || im.primary || '';\n }\n function guardOne(img) {\n if (!img || img._jmGuard) return;\n img._jmGuard = true;\n new MutationObserver(() =\u003e {\n const want = panelWant();\n if (!want || img._jmBusy) return;\n const a = document.createElement('a'); a.href = want;\n if (img.src === a.href) return;\n img._jmBusy = true;\n window.jmAllowPanelChange = true;\n img.src = want;\n setTimeout(() =\u003e { img._jmBusy = false; window.jmAllowPanelChange = false; }, 60);\n }).observe(img, { attributes: true, attributeFilter: ['src'] });\n }\n function guardPanels() {\n guardOne(document.getElementById('jm-desktop-preview-img'));\n guardOne(document.querySelector('#jm-mobile-form-popup img'));\n }\n\n \/* Bilder setzen, sobald Produktdaten da sind *\/\n function applyImages() {\n const im = IMGS[jmCfgState.stone] || {};\n const set = (id, src) =\u003e { const el = document.getElementById(id); if (el \u0026\u0026 src) el.src = src; };\n set('heroRingPrimary', im.primary);\n set('heroRingHover', im.hover || im.primary);\n set('jm-cfg-ring-primary', im.primary);\n set('jm-cfg-ring-hover', im.hover || im.primary);\n set('jmGoldStep2Img', im.inner || im.primary);\n set('jmGoldPopupImg', im.inner || im.primary);\n set('jm-cfg-s3-thumb', im.primary);\n setPanels(im.inner || im.primary);\n jmCfgState.imgPrimary = im.primary || PH;\n jmCfgState.imgInner = im.inner || im.primary || PH;\n }\n\n function loadProduct() {\n const el = document.querySelector('script[id^=\"ProductJson\"], script[data-product-json]');\n if (el) { try { return Promise.resolve(JSON.parse(el.textContent)); } catch (e) {} }\n return fetch(location.pathname.replace(\/\\\/$\/, '') + '.js').then(r =\u003e r.json());\n }\n\n loadProduct().then(p =\u003e {\n PRODUCT = p;\n const media = (p.media || []).map(m =\u003e ({ alt: String(m.alt || ''), src: m.src || (m.preview_image \u0026\u0026 m.preview_image.src) }));\n const first = imgUrl(typeof p.featured_image === 'object' \u0026\u0026 p.featured_image ? p.featured_image.src : (p.featured_image || (p.images \u0026\u0026 p.images[0])));\n\n Object.keys(STONES).forEach(k =\u003e {\n const keys = STONES[k].keys;\n const v = p.variants.find(x =\u003e stoneOfVariant(x) === k \u0026\u0026 x.featured_image);\n const altMain = media.find(m =\u003e hasKey(m.alt, keys) \u0026\u0026 !hasKey(m.alt, ['innen']));\n \/* Nur Bilder mit Alt-Text \"Innenseite vergoldet \u003cFarbe\u003e\" – schließt kopierte Edelstahl-Bilder aus *\/\n const altInner = media.find(m =\u003e hasKey(m.alt, keys) \u0026\u0026 hasKey(m.alt, ['innenseite']) \u0026\u0026 hasKey(m.alt, ['vergoldet']));\n const primary = v ? imgUrl(v.featured_image.src) : (altMain ? imgUrl(altMain.src) : first);\n const inner = INNER_FIXED || (altInner ? imgUrl(altInner.src) : primary);\n IMGS[k] = { primary: primary, inner: inner, hover: inner !== primary ? inner : primary };\n INNER_IMGS[k] = inner;\n });\n\n \/* Startzustand aus der aktuell gewählten Variante *\/\n const idField = productForm \u0026\u0026 productForm.querySelector('[name=\"id\"]');\n const cur = idField \u0026\u0026 p.variants.find(x =\u003e String(x.id) === String(idField.value));\n const startStone = (cur \u0026\u0026 stoneOfVariant(cur)) || 'onyx';\n const startSize = (cur \u0026\u0026 sizeOfVariant(cur)) || 's1';\n lastVariantId = cur ? String(cur.id) : null;\n\n jmSilent = true;\n const opt = document.querySelector('.jm-cfg-stone-option[data-stone=\"' + startStone + '\"]');\n if (opt) opt.click();\n jmSilent = false;\n applySize(startSize);\n applyImages();\n updateSizeAvailability();\n }).catch(err =\u003e { console.warn('[JM Siegelring] Produktdaten nicht geladen:', err); });\n\n \/* ════════════════════════════════════════════\n GRAVUR-BOGEN: Werte pro Farbe anwenden\n ════════════════════════════════════════════ *\/\n const ARC_TARGETS = {\n step2_desktop: { label: 'Schritt 2 · Desktop', el: 'engravingArcTextEl', path: 'ringArcPath' },\n step2_mobile: { label: 'Schritt 2 · Mobile', el: 'engravingArcTextEl', path: 'ringArcPath' },\n popup: { label: 'Mobile-Popup (mit „Zur Bestätigung“)', el: 'popupArcTextEl', path: 'popupArcPath' },\n panel: { label: 'Live-Vorschau oben · Desktop', el: 'jm-desktop-arc-text', box: '#jm-desktop-preview-panel' },\n mfp: { label: 'Theme-Popup oben · Mobile', el: 'jm-mfp-text', box: '#jm-mobile-form-popup' }\n };\n const ARC_FALLBACK = { cx: 50, cy: 40, w: 60, tilt: 0, bulge: 10, rot: 0, size: 6, offset: 50, spacing: 0 };\n const arcOverride = {}; \/* Live-Werte aus dem Tweak-Panel *\/\n\n function arcParts(name) {\n const t = ARC_TARGETS[name];\n if (!t) return null;\n \/* 1. Bogen-Text (textPath) im Container suchen, 2. per ID, 3. normales Text-Element *\/\n const box = t.box ? document.querySelector(t.box) : null;\n let el = box ? box.querySelector('textPath, textpath') : null;\n if (!el) el = document.getElementById(t.el);\n if (!el) return null;\n const svg = el.closest('svg');\n if (!svg) {\n \/* Kein SVG: Text ist ein normales HTML-Element → Position\/Drehung\/Größe per CSS *\/\n return { html: true, el: el, box: box || el.parentElement };\n }\n const tp = el.tagName.toLowerCase() === 'textpath' ? el : el.querySelector('textPath, textpath');\n const text = tp ? tp.closest('text') : (el.tagName.toLowerCase() === 'text' ? el : null);\n if (!tp || !text) return null;\n let path = t.path ? document.getElementById(t.path) : null;\n if (!path) {\n const ref = (tp.getAttribute('href') || tp.getAttribute('xlink:href') || '').replace('#', '');\n path = (ref \u0026\u0026 document.getElementById(ref)) || svg.querySelector('path');\n }\n if (!path) return null;\n const vb = svg.viewBox \u0026\u0026 svg.viewBox.baseVal;\n return { svg, tp, text, path, vw: (vb \u0026\u0026 vb.width) || 100, vh: (vb \u0026\u0026 vb.height) || 100 };\n }\n\n function arcValues(name, stone) {\n if (arcOverride[name]) return arcOverride[name];\n const cfg = (window.JM_ARC || {})[name] || {};\n return cfg[stone] || cfg.default || null;\n }\n\n function applyArc(name, v) {\n const p = arcParts(name);\n if (!p || !v) return;\n if (p.html) {\n const W = (p.box \u0026\u0026 p.box.getBoundingClientRect().width) || window.innerWidth * 0.9;\n p.el.style.position = 'absolute';\n p.el.style.left = v.cx + '%';\n p.el.style.top = v.cy + '%';\n p.el.style.transform = 'translate(-50%, -50%) rotate(' + v.rot + 'deg)';\n p.el.style.fontSize = (v.size * W \/ 100).toFixed(2) + 'px';\n p.el.style.letterSpacing = (v.spacing * W \/ 100).toFixed(2) + 'px';\n p.el.style.whiteSpace = 'nowrap';\n return;\n }\n const kx = p.vw \/ 100, ky = p.vh \/ 100;\n const x1 = (v.cx - v.w \/ 2) * kx, x2 = (v.cx + v.w \/ 2) * kx;\n const y1 = (v.cy + v.tilt \/ 2) * ky, y2 = (v.cy - v.tilt \/ 2) * ky;\n const qx = (x1 + x2) \/ 2, qy = (y1 + y2) \/ 2 - v.bulge * ky;\n p.path.setAttribute('d', 'M ' + x1.toFixed(2) + ',' + y1.toFixed(2) + ' Q ' + qx.toFixed(2) + ',' + qy.toFixed(2) + ' ' + x2.toFixed(2) + ',' + y2.toFixed(2));\n p.text.style.transform = '';\n p.text.setAttribute('transform', 'rotate(' + v.rot + ' ' + (v.cx * kx).toFixed(2) + ' ' + (v.cy * ky).toFixed(2) + ')');\n p.text.style.fontSize = (v.size * kx).toFixed(2) + 'px';\n p.text.style.letterSpacing = (v.spacing * kx).toFixed(2) + 'px';\n p.tp.setAttribute('startOffset', v.offset + '%');\n p.tp.setAttribute('text-anchor', 'middle');\n }\n\n function step2Mode() { return window.innerWidth \u003e 768 ? 'step2_desktop' : 'step2_mobile'; }\n\n function applyAllArcs() {\n const st = jmCfgState.stone;\n applyArc(step2Mode(), arcValues(step2Mode(), st));\n ['popup', 'panel', 'mfp'].forEach(n =\u003e applyArc(n, arcValues(n, st)));\n }\n\n window.addEventListener('resize', () =\u003e { clearTimeout(applyAllArcs._r); applyAllArcs._r = setTimeout(applyAllArcs, 150); });\n if (productForm) productForm.addEventListener('input', () =\u003e setTimeout(applyAllArcs, 60));\n document.addEventListener('DOMContentLoaded', () =\u003e setTimeout(applyAllArcs, 200));\n window.addEventListener('load', () =\u003e setTimeout(applyAllArcs, 400));\n\n \/* ── Tweak-Panel: ?jmtweak=1 ── *\/\n \/* Tweak-Modus merken: Shopify ersetzt beim Variantenwechsel die URL (?variant=…),\n dadurch würde ?jmtweak=1 nach einem Neuladen fehlen. ?jmtweak=0 schaltet ihn wieder aus. *\/\n let jmTweakOn = false;\n try {\n if (\/[?\u0026]jmtweak=0\/.test(location.search)) sessionStorage.removeItem('jmtweak');\n else if (\/[?\u0026]jmtweak\/.test(location.search)) sessionStorage.setItem('jmtweak', '1');\n jmTweakOn = sessionStorage.getItem('jmtweak') === '1';\n } catch (e) { jmTweakOn = \/[?\u0026]jmtweak(?!=0)\/.test(location.search); }\n\n if (jmTweakOn) {\n const FIELDS = [\n ['cx', 'Mitte horizontal %', 0, 100, 0.5], ['cy', 'Mitte vertikal %', 0, 100, 0.5],\n ['w', 'Breite %', 5, 120, 0.5], ['tilt', 'Winkel', -40, 40, 0.5],\n ['bulge', 'Wölbung', -80, 80, 0.5], ['rot', 'Drehung °', -60, 60, 1],\n ['size', 'Schriftgröße', 0.5, 15, 0.05], ['offset', 'Position auf Bogen %', 0, 100, 0.5],\n ['spacing', 'Zeichenabstand', -1, 3, 0.05]\n ];\n const css = document.createElement('style');\n css.textContent = '#jm-arc-tweak{position:fixed;right:20px;top:90px;z-index:2147483647;width:270px;max-width:calc(100vw - 20px);max-height:85vh;overflow:auto;background:rgba(17,17,17,.94);color:#eee;border:1px solid #c9a84c;border-radius:12px;padding:0 12px 12px;font:12px\/1.4 Inter,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.4)}'\n + '#jm-at-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 -12px 4px;padding:10px 12px;background:#1b1b1b;border-bottom:1px solid #333;cursor:move;touch-action:none;user-select:none}'\n + '#jm-at-head strong{color:#c9a84c}'\n + '#jm-at-min,#jm-at-flip{width:auto!important;margin:0!important;padding:4px 12px!important;background:#333!important;color:#eee!important;font-size:14px!important}'\n + '#jm-arc-tweak.jm-min{max-height:none;overflow:visible}#jm-arc-tweak.jm-min #jm-at-body{display:none}'\n + '@media (max-width:768px){#jm-arc-tweak{width:230px;max-height:45vh;top:70px;right:8px;background:rgba(17,17,17,.85)}}'\n + '#jm-arc-tweak select,#jm-arc-tweak button{width:100%;margin-top:6px;padding:5px;border-radius:6px;border:0;font:inherit}'\n + '#jm-arc-tweak button{background:#c9a84c;color:#111;font-weight:600;cursor:pointer}'\n + '#jm-arc-tweak label{display:flex;justify-content:space-between;margin-top:7px}'\n + '#jm-arc-tweak input[type=range]{width:100%;cursor:pointer}'\n + '#jm-arc-tweak code{display:block;margin-top:8px;padding:6px;background:#222;border-radius:6px;font-size:10.5px;white-space:pre-wrap;cursor:text;word-break:break-all}'\n + '#jm-arc-tweak .jm-hint{color:#c9a84c;margin-top:6px;font-size:11px}';\n document.head.appendChild(css);\n\n const tw = document.createElement('div');\n tw.id = 'jm-arc-tweak';\n let html = '\u003cdiv id=\"jm-at-head\"\u003e\u003cstrong\u003e⠿ Gravur-Position\u003c\/strong\u003e\u003cspan\u003e\u003cbutton type=\"button\" id=\"jm-at-flip\" title=\"oben\/unten\"\u003e⇅\u003c\/button\u003e \u003cbutton type=\"button\" id=\"jm-at-min\" title=\"einklappen\"\u003e–\u003c\/button\u003e\u003c\/span\u003e\u003c\/div\u003e\u003cdiv id=\"jm-at-body\"\u003e'\n + '\u003cselect id=\"jm-at-target\"\u003e' + Object.keys(ARC_TARGETS).map(k =\u003e '\u003coption value=\"' + k + '\"\u003e' + ARC_TARGETS[k].label + '\u003c\/option\u003e').join('') + '\u003c\/select\u003e'\n + '\u003cselect id=\"jm-at-scope\"\u003e\u003coption value=\"stone\"\u003eNur aktuelle Farbe\u003c\/option\u003e\u003coption value=\"default\"\u003eAlle Farben (default)\u003c\/option\u003e\u003c\/select\u003e'\n + '\u003cdiv class=\"jm-hint\" id=\"jm-at-info\"\u003e\u003c\/div\u003e';\n FIELDS.forEach(f =\u003e {\n html += '\u003clabel\u003e' + f[1] + ' \u003cspan id=\"jm-at-v-' + f[0] + '\"\u003e\u003c\/span\u003e\u003c\/label\u003e'\n + '\u003cinput type=\"range\" data-k=\"' + f[0] + '\" min=\"' + f[2] + '\" max=\"' + f[3] + '\" step=\"' + f[4] + '\"\u003e';\n });\n html += '\u003ccode id=\"jm-at-out\"\u003e\u003c\/code\u003e\u003cbutton type=\"button\" id=\"jm-at-copy\"\u003eWerte kopieren\u003c\/button\u003e\u003c\/div\u003e';\n tw.innerHTML = html;\n document.body.appendChild(tw);\n\n \/* Sicherheitsnetz: liegt das Panel außerhalb des sichtbaren Bereichs, zurück nach oben rechts *\/\n function keepVisible() {\n const r = tw.getBoundingClientRect();\n if (r.bottom \u003c 40 || r.top \u003e window.innerHeight - 40 || r.right \u003c 60 || r.left \u003e window.innerWidth - 60) {\n tw.style.left = 'auto'; tw.style.right = '8px'; tw.style.top = '70px'; tw.style.bottom = 'auto';\n }\n }\n setTimeout(keepVisible, 300);\n window.addEventListener('resize', keepVisible);\n\n const selT = tw.querySelector('#jm-at-target'), selS = tw.querySelector('#jm-at-scope');\n Array.from(selT.options).forEach(o =\u003e {\n if (!arcParts(o.value)) o.textContent = ARC_TARGETS[o.value].label + ' – nicht auf dieser Seite';\n });\n let cur = {};\n\n \/* Live-Vorschau-Popup (mobil) schließt sonst nach 3 s – beim Einstellen offen halten *\/\n function keepOpen() {\n if (selT.value !== 'mfp') return;\n const pop = document.getElementById('jm-mobile-form-popup');\n if (!pop) return;\n clearTimeout(pop._t);\n pop.style.display = 'block';\n }\n function loadTarget() {\n const name = selT.value;\n keepOpen();\n cur = Object.assign({}, ARC_FALLBACK, arcValues(name, jmCfgState.stone) || {});\n FIELDS.forEach(f =\u003e {\n tw.querySelector('[data-k=\"' + f[0] + '\"]').value = cur[f[0]];\n tw.querySelector('#jm-at-v-' + f[0]).textContent = cur[f[0]];\n });\n const found = !!arcParts(name);\n const parts = arcParts(name);\n tw.querySelector('#jm-at-info').textContent = (found ? (parts \u0026\u0026 parts.html ? 'Text ohne Bogen: Breite\/Winkel\/Wölbung\/Position wirken hier nicht · ' : '') : '⚠ Element nicht gefunden – ') + 'Farbe: ' + jmCfgState.label\n + (name.indexOf('step2') === 0 ? ' · Schritt 2 öffnen' : ' · Gravurtext eingeben, damit es sichtbar ist');\n writeOut();\n }\n function writeOut() {\n const key = selS.value === 'default' ? 'default' : jmCfgState.stone;\n const vals = FIELDS.map(f =\u003e f[0] + ': ' + cur[f[0]]).join(', ');\n tw.querySelector('#jm-at-out').textContent = 'JM_ARC.' + selT.value + '.' + key + ' = { ' + vals + ' };';\n }\n tw.addEventListener('input', e =\u003e {\n const k = e.target.dataset \u0026\u0026 e.target.dataset.k;\n if (!k) return;\n cur[k] = parseFloat(e.target.value);\n keepOpen();\n tw.querySelector('#jm-at-v-' + k).textContent = cur[k];\n arcOverride[selT.value] = Object.assign({}, cur);\n applyArc(selT.value, cur);\n writeOut();\n });\n selT.addEventListener('change', loadTarget);\n selS.addEventListener('change', writeOut);\n tw.querySelector('#jm-at-copy').addEventListener('click', function () {\n if (navigator.clipboard) navigator.clipboard.writeText(tw.querySelector('#jm-at-out').textContent);\n const b = this; b.textContent = 'Kopiert ✓';\n setTimeout(() =\u003e { b.textContent = 'Werte kopieren'; }, 1500);\n });\n \/* Farbwechsel → Live-Werte verwerfen, Werte der neuen Farbe laden *\/\n window.jmArcOnStone = () =\u003e { Object.keys(arcOverride).forEach(k =\u003e delete arcOverride[k]); loadTarget(); };\n\n \/* verschiebbar per Maus UND Finger – nur über die Kopfzeile, damit die Regler normal bedienbar bleiben *\/\n const head = tw.querySelector('#jm-at-head');\n let drag = false, ox = 0, oy = 0;\n function dragStart(x, y) {\n const r = tw.getBoundingClientRect();\n tw.style.left = r.left + 'px'; tw.style.top = r.top + 'px';\n tw.style.right = 'auto'; tw.style.bottom = 'auto';\n drag = true; ox = x - r.left; oy = y - r.top;\n }\n function dragMove(x, y) {\n if (!drag) return;\n const maxX = window.innerWidth - 60, maxY = window.innerHeight - 40;\n tw.style.left = Math.min(Math.max(x - ox, -tw.offsetWidth + 60), maxX) + 'px';\n tw.style.top = Math.min(Math.max(y - oy, 0), maxY) + 'px';\n }\n const isBtn = t =\u003e t.closest \u0026\u0026 t.closest('button');\n \/* Maus *\/\n head.addEventListener('mousedown', e =\u003e { if (isBtn(e.target)) return; dragStart(e.clientX, e.clientY); e.preventDefault(); });\n document.addEventListener('mousemove', e =\u003e dragMove(e.clientX, e.clientY));\n document.addEventListener('mouseup', () =\u003e { drag = false; });\n \/* Finger (iOS \/ Android) *\/\n head.addEventListener('touchstart', e =\u003e {\n if (isBtn(e.target)) return;\n const t = e.touches[0]; dragStart(t.clientX, t.clientY); e.preventDefault();\n }, { passive: false });\n document.addEventListener('touchmove', e =\u003e {\n if (!drag) return;\n const t = e.touches[0]; dragMove(t.clientX, t.clientY); e.preventDefault();\n }, { passive: false });\n document.addEventListener('touchend', () =\u003e { drag = false; });\n\n \/* ⇅ : Panel mit einem Tipp zwischen oben und unten wechseln *\/\n tw.querySelector('#jm-at-flip').addEventListener('click', () =\u003e {\n const r = tw.getBoundingClientRect();\n const toTop = r.top \u003e window.innerHeight \/ 2;\n tw.style.left = 'auto'; tw.style.right = '8px';\n if (toTop) { tw.style.top = '10px'; tw.style.bottom = 'auto'; }\n else { tw.style.top = 'auto'; tw.style.bottom = '10px'; }\n });\n\n \/* Minimieren: nur Kopfzeile sichtbar, Bild darunter frei *\/\n tw.querySelector('#jm-at-min').addEventListener('click', function () {\n const min = tw.classList.toggle('jm-min');\n this.textContent = min ? '+' : '–';\n });\n\n loadTarget();\n }\n\n \/* ── Init ── *\/\n document.addEventListener('DOMContentLoaded', () =\u003e setTimeout(applyImages, 150));\n window.addEventListener('load', () =\u003e setTimeout(applyImages, 300));\n fillFromSwatches();\n applyImages();\n applySize('s1');\n jmSetStep(1, false);\n applyAllArcs();\n\n})();\n \/* ── Scroll Reveal (Features + Specs) ── *\/\nconst revealObs = new IntersectionObserver(entries =\u003e {\n entries.forEach(entry =\u003e {\n if (entry.isIntersecting) {\n entry.target.classList.add('in');\n revealObs.unobserve(entry.target);\n }\n });\n}, { threshold: 0.12 });\n\ndocument.querySelectorAll('.reveal-left, .reveal-right').forEach(el =\u003e {\n revealObs.observe(el);\n});\n\n\n\/* ── 3D Card Tilt (nur Desktop) ── *\/\nif (window.innerWidth \u003e 1024) {\n document.querySelectorAll('.card-3d').forEach(card =\u003e {\n\n card.addEventListener('mousemove', e =\u003e {\n const rect = card.getBoundingClientRect();\n const x = (e.clientX - rect.left - rect.width \/ 2) \/ (rect.width \/ 2);\n const y = (e.clientY - rect.top - rect.height \/ 2) \/ (rect.height \/ 2);\n\n card.style.transform =\n `translateY(-8px) rotateX(${ -y * 6 }deg) rotateY(${ x * 6 }deg)`;\n\n card.style.transition = 'transform .08s ease';\n });\n\n card.addEventListener('mouseleave', () =\u003e {\n card.style.transform = '';\n card.style.transition = 'transform .5s cubic-bezier(.23,1,.32,1)';\n });\n\n });\n}\n document.addEventListener(\"DOMContentLoaded\", function () {\n\n \/* ── Scroll reveal ── *\/\n const revealObs = new IntersectionObserver(entries =\u003e {\n entries.forEach(e =\u003e {\n if (e.isIntersecting) {\n e.target.classList.add('in');\n revealObs.unobserve(e.target);\n }\n });\n }, { threshold: 0.25 });\n\n document.querySelectorAll(\n '.reveal, .reveal-left, .reveal-right, .reveal-scale'\n ).forEach(el =\u003e revealObs.observe(el));\n\n});\n \n \n\u003c\/script\u003e","brand":"Juwelier Milano","offers":[{"title":"vergoldet schwarz-onyx \/ 59.6 mm","offer_id":57448265154825,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet schwarz-onyx \/ 62 mm","offer_id":57448341537033,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet schwarz-onyx \/ 64.6 mm","offer_id":57448341569801,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet tigerauge \/ 59.6 mm","offer_id":57448265187593,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet tigerauge \/ 62 mm","offer_id":57448341602569,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet tigerauge \/ 64.6 mm","offer_id":57448341635337,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet rot-onyx \/ 59.6 mm","offer_id":57448265220361,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet rot-onyx \/ 62 mm","offer_id":57448341668105,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true},{"title":"vergoldet rot-onyx \/ 64.6 mm","offer_id":57448341700873,"sku":null,"price":99.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0532\/9941\/3155\/files\/vergoldet_Siegelreing_tigerauge.png?v=1791935960","url":"https:\/\/shop.juwelier-milano.de\/products\/herren-siegelring-vergoldet-onyx-tigerauge","provider":"Juwelier Milano","version":"1.0","type":"link"}