Personalisierte Weihnachtsgeschenke mit Gravur

<!–
ZISANO CHRISTMAS ZODIAC — ALL-IN-ONE DIVI CODE MODULE BUILD
Paste this ENTIRE file into ONE Divi Code module.
No external landing-page CSS or JS file is required.
–>
<style id=“zxm-christmas-rewrite-css“>
/* ========================================================================
ZISANO CHRISTMAS ZODIAC — FULL REWRITE CSS v1.0
Standalone visual system for /zisano-weihnacht/
Standalone stylesheet. No legacy landing-page CSS is required.
It is deliberately scoped to .zxm-page so the rest of ZISANO is untouched.
======================================================================== */

.zxm-page.zxm-premium-xmas,
.zxm-page.zxm-premium-ready,
.zxm-page {
–zz-purple: #943fa2;
–zz-purple-600: #7d318a;
–zz-purple-700: #64236f;
–zz-purple-800: #4b1954;
–zz-purple-900: #2d1034;
–zz-plum: #1b0b20;
–zz-lilac: #efe4f2;
–zz-lilac-2: #f8f3f9;
–zz-gold: #d7b66e;
–zz-gold-light: #f2dfae;
–zz-cream: #fffaf6;
–zz-white: #ffffff;
–zz-ink: #251c28;
–zz-copy: #625668;
–zz-muted: #8c8190;
–zz-line: rgba(78, 34, 88, .13);
–zz-line-strong: rgba(148, 63, 162, .24);
–zz-glass: rgba(255, 255, 255, .84);
–zz-shadow-sm: 0 10px 28px rgba(54, 22, 63, .07);
–zz-shadow-md: 0 22px 58px rgba(54, 22, 63, .11);
–zz-shadow-lg: 0 36px 90px rgba(49, 17, 57, .16);
–zz-radius-sm: 13px;
–zz-radius-md: 18px;
–zz-radius-lg: 25px;
–zz-radius-xl: 34px;
–zz-ease: cubic-bezier(.2,.8,.2,1);

width: 100%;
max-width: 100%;
overflow: visible;
color: var(–zz-ink);
background:
radial-gradient(circle at 8% 12%, rgba(148,63,162,.075), transparent 25%),
radial-gradient(circle at 93% 38%, rgba(215,182,110,.08), transparent 23%),
#fff;
font-family: „Manrope“, „Avenir Next“, „Segoe UI“, Arial, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

.zxm-page *,
.zxm-page *::before,
.zxm-page *::after {
box-sizing: border-box;
}

.zxm-page h1,
.zxm-page h2,
.zxm-page h3,
.zxm-page h4,
.zxm-page h5,
.zxm-page p,
.zxm-page blockquote,
.zxm-page figure {
margin-top: 0;
}

.zxm-page img {
display: block;
max-width: 100%;
}

.zxm-page button,
.zxm-page input,
.zxm-page select,
.zxm-page textarea {
font: inherit;
}

.zxm-page button,
.zxm-page label,
.zxm-page a {
-webkit-tap-highlight-color: transparent;
}

.zxm-page button {
cursor: pointer;
}

.zxm-page a {
color: inherit;
}

.zxm-page .zxm-shell {
width: min(1180px, calc(100% – 42px));
max-width: 1180px;
margin-inline: auto;
padding: 0;
}

.zxm-page .zxm-kicker-mini,
.zxm-page .zxm-kicker,
.zxm-page .zxm-eyebrow {
display: inline-block;
color: var(–zz-purple);
font-size: 10px;
line-height: 1.3;
font-weight: 850;
letter-spacing: .16em;
text-transform: uppercase;
}

.zxm-page .zxm-surface {
background: rgba(255,255,255,.88);
border: 1px solid var(–zz-line);
box-shadow: var(–zz-shadow-sm);
backdrop-filter: blur(14px);
}

/* ========================================================================
HERO
======================================================================== */

.zxm-page .zxm-hero {
position: relative;
min-height: min(850px, 91vh);
display: grid;
align-items: center;
overflow: hidden;
isolation: isolate;
background:
linear-gradient(90deg,
rgba(255,255,255,.985) 0%,
rgba(255,255,255,.955) 39%,
rgba(255,255,255,.77) 57%,
rgba(255,255,255,.38) 100%),
url(„https://zisano.zxm-at/wp-content/uploads/2026/08/main_banner_xmas.zxm-webp“)
72% center / cover no-repeat;
}

.zxm-page .zxm-hero::before {
content: „“;
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(circle at 69% 34%, rgba(148,63,162,.17), transparent 21%),
radial-gradient(circle at 82% 64%, rgba(215,182,110,.18), transparent 20%);
}

.zxm-page .zxm-hero::after {
content: „“;
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 150px;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg, transparent, #fff);
}

.zxm-page .zxm-hero__grid {
position: relative;
z-index: 3;
min-height: 700px;
padding-block: 88px 105px;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(365px, .72fr);
gap: clamp(32px, 6vw, 86px);
align-items: center;
}

.zxm-page .zxm-eyebrow {
padding: 9px 13px;
border-radius: 999px;
border: 1px solid rgba(148,63,162,.16);
background: rgba(255,255,255,.72);
backdrop-filter: blur(10px);
}

.zxm-page .zxm-hero-title {
max-width: 800px;
margin: 20px 0 23px;
font-size: clamp(54px, 6.15vw, 94px);
line-height: .91;
letter-spacing: -.058em;
font-weight: 780;
}

.zxm-page .zxm-hero-title__line {
display: block;
}

.zxm-page .zxm-hero-title__line–dark {
color: #211a23;
}

.zxm-page .zxm-hero-title__line–accent {
color: var(–zz-purple);
text-shadow: 0 10px 34px rgba(148,63,162,.13);
}

.zxm-page .zxm-hero .zxm-hero__lead {
max-width: 670px;
margin-bottom: 0;
color: #625668;
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.65;
}

.zxm-page .zxm-hero__actions {
margin-top: 31px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 11px;
}

.zxm-page .zxm-button-primary,
.zxm-page .zxm-button-secondary,
.zxm-page .zxm-personal-cta {
appearance: none;
min-height: 56px;
padding: 0 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
border: 0;
text-decoration: none;
font-weight: 800;
transition:
transform .25s var(–zz-ease),
box-shadow .25s var(–zz-ease),
background .25s var(–zz-ease);
}

.zxm-page .zxm-button-primary,
.zxm-page .zxm-personal-cta {
color: #fff;
background: linear-gradient(135deg, #a049ae 0%, var(–zz-purple) 45%, #73257f 100%);
box-shadow: 0 15px 34px rgba(148,63,162,.25);
}

.zxm-page .zxm-button-secondary {
color: var(–zz-purple-800);
background: rgba(255,255,255,.80);
border: 1px solid rgba(148,63,162,.20);
backdrop-filter: blur(12px);
}

.zxm-page .zxm-button-primary:hover,
.zxm-page .zxm-button-secondary:hover,
.zxm-page .zxm-personal-cta:hover {
transform: translateY(-2px);
}

.zxm-page .zxm-button-primary:active,
.zxm-page .zxm-button-secondary:active,
.zxm-page .zxm-personal-cta:active {
transform: translateY(0);
}

.zxm-page .zxm-hero__gift {
flex-basis: 100%;
width: fit-content;
display: flex;
gap: 10px;
align-items: center;
margin-top: 4px;
padding: 10px 14px;
border: 1px solid rgba(215,182,110,.35);
border-radius: 17px;
background: rgba(255,255,255,.78);
backdrop-filter: blur(12px);
box-shadow: 0 7px 22px rgba(74,36,82,.06);
}

.zxm-page .zxm-hero__gift > i {
width: 32px;
height: 32px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
font-style: normal;
color: #8b6830;
background: rgba(215,182,110,.18);
}

.zxm-page .zxm-hero__gift > div {
display: grid;
gap: 1px;
}

.zxm-page .zxm-hero__gift strong {
font-size: 12px;
}

.zxm-page .zxm-hero__gift small {
color: var(–zz-muted);
font-size: 10px;
}

/* Cosmic object */
.zxm-page .zxm-astro-wrap {
position: relative;
width: min(100%, 530px);
aspect-ratio: 1;
margin-inline: auto;
perspective: 900px;
filter: drop-shadow(0 34px 55px rgba(56,20,64,.17));
}

.zxm-page .zxm-astro-scene,
.zxm-page .zxm-astro-canvas {
position: absolute;
inset: 0;
}

.zxm-page .zxm-astro-scene {
border-radius: 50%;
transform-style: preserve-3d;
}

.zxm-page .zxm-astro-canvas {
width: 100%;
height: 100%;
}

.zxm-page .zxm-cosmos-haze {
position: absolute;
border-radius: 50%;
filter: blur(30px);
opacity: .48;
}

.zxm-page .zxm-cosmos-haze–one {
width: 42%;
height: 42%;
left: 10%;
top: 15%;
background: rgba(148,63,162,.20);
}

.zxm-page .zxm-cosmos-haze–two {
width: 36%;
height: 36%;
right: 9%;
bottom: 12%;
background: rgba(215,182,110,.17);
}

.zxm-page .zxm-constellation-map {
position: absolute;
inset: 4%;
width: 92%;
height: 92%;
overflow: visible;
}

.zxm-page .zxm-constellation path {
fill: none;
stroke: rgba(148,63,162,.19);
stroke-width: 1;
}

.zxm-page .zxm-constellation circle {
fill: rgba(148,63,162,.52);
}

.zxm-page .zxm-astro-clock {
position: absolute;
inset: 12%;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.98), rgba(248,238,250,.80) 47%, rgba(148,63,162,.07) 73%, rgba(255,255,255,.45));
border: 1px solid rgba(148,63,162,.15);
box-shadow:
inset 0 0 0 14px rgba(255,255,255,.24),
0 28px 72px rgba(80,31,90,.15);
backdrop-filter: blur(6px);
}

.zxm-page .zxm-clock-glow {
position: absolute;
inset: 18%;
border-radius: 50%;
background: radial-gradient(circle, rgba(148,63,162,.13), transparent 68%);
}

.zxm-page .zxm-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(148,63,162,.22);
}

.zxm-page .zxm-ring.zxm-outer { inset: 7%; }
.zxm-page .zxm-ring.zxm-middle { inset: 22%; border-color: rgba(215,182,110,.30); }
.zxm-page .zxm-ring.zxm-inner { inset: 35%; border-style: dashed; }

.zxm-page .zxm-clock-ticks,
.zxm-page .zxm-clock-spokes {
position: absolute;
inset: 12%;
border-radius: 50%;
opacity: .28;
background:
repeating-conic-gradient(
from 0deg,
rgba(148,63,162,.40) 0deg 1deg,
transparent 1deg 15deg
);
mask: radial-gradient(circle, transparent 67%, #000 68% 71%, transparent 72%);
}

.zxm-page .zxm-clock-spokes {
inset: 23%;
opacity: .11;
}

.zxm-page .zxm-clock-hand {
position: absolute;
left: 50%;
top: 50%;
width: 1px;
height: 29%;
transform-origin: 50% 100%;
transform: translate(-50%,-100%) rotate(38deg);
background: linear-gradient(180deg, transparent, rgba(148,63,162,.55));
}

.zxm-page .zxm-clock-hand.zxm-second {
transform: translate(-50%,-100%) rotate(128deg);
opacity: .46;
}

.zxm-page .zxm-zodiac-feature {
position: absolute;
inset: 31%;
display: grid;
place-items: center;
}

.zxm-page .zxm-zodiac-hero-symbol__tile {
width: clamp(88px, 10vw, 128px);
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
background:
radial-gradient(circle at 35% 27%, #bd74c7, var(–zz-purple) 48%, #672273 100%);
box-shadow:
0 20px 45px rgba(148,63,162,.28),
inset 0 1px 0 rgba(255,255,255,.55);
}

.zxm-page .zxm-zodiac-hero-symbol__tile b {
font-size: clamp(43px, 5vw, 62px);
font-weight: 500;
}

.zxm-page .zxm-celestial-orbit {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(148,63,162,.18);
}

.zxm-page .zxm-celestial-orbit–moon { inset: 17%; }
.zxm-page .zxm-celestial-orbit–planet { inset: 29%; }

.zxm-page .zxm-celestial-body {
position: absolute;
left: 50%;
top: -4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(–zz-gold);
box-shadow: 0 0 14px rgba(215,182,110,.65);
}

.zxm-page .zxm-celestial-body–planet {
background: var(–zz-purple);
box-shadow: 0 0 14px rgba(148,63,162,.50);
}

.zxm-page .zxm-comet {
position: absolute;
right: 7%;
top: 21%;
width: 70px;
height: 1px;
transform: rotate(-26deg);
background: linear-gradient(90deg, transparent, rgba(148,63,162,.42));
opacity: .7;
}

.zxm-page .zxm-cosmic-stars {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}

.zxm-page .zxm-cosmic-star {
position: absolute;
width: var(–s, 2px);
height: var(–s, 2px);
border-radius: 50%;
opacity: var(–o, .6);
background: var(–zz-purple);
animation: zzTakeoverTwinkle var(–d, 7s) ease-in-out var(–delay, 0s) infinite;
}

.zxm-page .zxm-cosmic-star.is-gold {
background: var(–zz-gold);
}

.zxm-page .zxm-xmas-scroll {
position: absolute;
z-index: 8;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
color: var(–zz-muted);
text-decoration: none;
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
display: grid;
justify-items: center;
gap: 7px;
}

.zxm-page .zxm-xmas-scroll i {
width: 23px;
height: 36px;
border: 1px solid rgba(148,63,162,.24);
border-radius: 999px;
display: grid;
place-items: start center;
padding-top: 8px;
}

.zxm-page .zxm-xmas-scroll i b:first-child {
width: 3px;
height: 7px;
border-radius: 999px;
background: var(–zz-purple);
animation: zzTakeoverScroll 2s infinite;
}

.zxm-page .zxm-xmas-scroll i b:last-child { display: none; }

/* ========================================================================
TRUST / CONVERSION STRIP
======================================================================== */

.zxm-page .zxm-benefits {
width: min(1120px, calc(100% – 42px));
margin: -43px auto 24px;
position: relative;
z-index: 12;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
overflow: hidden;
border: 1px solid rgba(148,63,162,.12);
border-radius: 22px;
background: rgba(148,63,162,.08);
box-shadow: var(–zz-shadow-md);
}

.zxm-page .zxm-benefits > div {
min-height: 91px;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 14px;
background: rgba(255,255,255,.95);
}

.zxm-page .zxm-benefits i {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 50%;
display: grid;
place-items: center;
color: var(–zz-purple);
background: rgba(148,63,162,.08);
font-style: normal;
}

.zxm-page .zxm-benefits span {
display: grid;
gap: 2px;
}

.zxm-page .zxm-benefits strong {
color: var(–zz-ink);
font-size: 14px;
}

.zxm-page .zxm-benefits small {
color: var(–zz-muted);
font-size: 11px;
}

/* ========================================================================
MAIN HUB NAVIGATION
======================================================================== */

.zxm-page .zxm-hub-nav-wrap {
position: sticky;
top: 8px;
z-index: 90;
width: min(760px, calc(100% – 28px));
margin: 17px auto 34px;
padding: 0;
border: 1px solid rgba(148,63,162,.13);
border-radius: 999px;
background: rgba(255,255,255,.84);
backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 13px 34px rgba(57,21,65,.11);
}

.zxm-page .zxm-hub-nav {
padding: 6px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}

.zxm-page .zxm-hub-tab {
appearance: none;
min-width: 0;
min-height: 50px;
padding: 0 15px;
border: 0;
border-radius: 999px;
color: #75677a;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 780;
transition: .25s var(–zz-ease);
}

.zxm-page .zxm-hub-tab > i {
font-style: normal;
color: var(–zz-purple);
}

.zxm-page .zxm-hub-tab.is-active {
color: #fff;
background: linear-gradient(135deg, var(–zz-purple), #75267f);
box-shadow: 0 10px 23px rgba(148,63,162,.21);
}

.zxm-page .zxm-hub-tab.is-active > i {
color: #fff;
}

.zxm-page .zxm-limited-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(–zz-gold);
box-shadow: 0 0 0 4px rgba(215,182,110,.12);
}

/* Tool visibility */
.zxm-page .zxm-tool-panel {
scroll-margin-top: 100px;
}

.zxm-page .zxm-tool-panel:not(.is-active) {
display: none !important;
}

.zxm-page .zxm-personal-section,
.zxm-page .zxm-match-view,
.zxm-page .zxm-explorer-section {
padding: 30px 0 84px;
}

/* ========================================================================
PERSONALISATION INTRO
======================================================================== */

.zxm-page .zxm-personal-shell {
display: grid;
gap: 23px;
}

.zxm-page .zxm-xmas-story,
.zxm-page .zxm-personal-hero {
position: relative;
min-height: 332px;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
border: 1px solid var(–zz-line);
border-radius: var(–zz-radius-xl);
background:
radial-gradient(circle at 8% 0%, rgba(148,63,162,.07), transparent 36%),
linear-gradient(135deg, #fff, #fbf6fc);
box-shadow: var(–zz-shadow-md);
}

.zxm-page .zxm-personal-copy,
.zxm-page .zxm-xmas-story__copy {
align-self: center;
padding: clamp(30px, 4.2vw, 56px);
}

.zxm-page .zxm-campaign-label {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(–zz-purple);
font-size: 10px;
font-weight: 850;
letter-spacing: .15em;
}

.zxm-page .zxm-campaign-label > b {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(–zz-gold);
}

.zxm-page .zxm-personal-copy h2 {
margin: 13px 0 15px;
color: var(–zz-ink);
font-size: clamp(38px, 4.4vw, 62px);
line-height: .98;
letter-spacing: -.045em;
}

.zxm-page .zxm-personal-copy h2 em {
display: block;
color: var(–zz-purple);
font-style: normal;
}

.zxm-page .zxm-xmas-story__lead {
max-width: 690px;
margin-bottom: 0;
color: var(–zz-copy);
font-size: 15px;
line-height: 1.65;
}

.zxm-page .zxm-personal-points {
margin: 20px 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 8px;
}

.zxm-page .zxm-personal-point {
min-width: 0;
min-height: 76px;
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(148,63,162,.09);
border-radius: 15px;
background: rgba(148,63,162,.05);
}

.zxm-page .zxm-personal-point > i {
width: 31px;
height: 31px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: var(–zz-purple);
background: #fff;
font-style: normal;
}

.zxm-page .zxm-personal-point > span {
min-width: 0;
display: grid;
}

.zxm-page .zxm-personal-point strong {
font-size: 11px;
}

.zxm-page .zxm-personal-point small {
color: var(–zz-muted);
font-size: 9px;
}

.zxm-page .zxm-personal-cta {
margin-top: 21px;
}

.zxm-page .zxm-personal-note {
max-width: 650px;
margin-top: 11px;
color: #9a8c9d;
font-size: 9px;
}

.zxm-page .zxm-xmas-story__visual {
min-height: 100%;
overflow: hidden;
position: relative;
}

.zxm-page .zxm-xmas-story__visual::after {
content: „“;
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255,255,255,.22), transparent 45%),
linear-gradient(180deg, transparent 65%, rgba(62,16,70,.08));
pointer-events: none;
}

.zxm-page .zxm-xmas-story__photo {
width: 100%;
height: 100%;
min-height: 332px;
object-fit: cover;
}

/* ========================================================================
CONVERSION STEPS / BUILDER HEADER
======================================================================== */

.zxm-page .zxm-personal-builder {
display: grid;
gap: 18px;
scroll-margin-top: 105px;
}

.zxm-page .zxm-progress {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
gap: 9px;
padding: 13px;
border: 1px solid var(–zz-line);
border-radius: 19px;
background: #fff;
box-shadow: var(–zz-shadow-sm);
}

.zxm-page .zxm-progress > i {
color: rgba(148,63,162,.28);
font-style: normal;
}

.zxm-page .zxm-progress button {
appearance: none;
min-width: 0;
min-height: 54px;
padding: 9px 10px;
border: 0;
border-radius: 14px;
background: transparent;
color: var(–zz-muted);
display: flex;
align-items: center;
gap: 9px;
text-align: left;
}

.zxm-page .zxm-progress button > b {
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 50%;
display: grid;
place-items: center;
color: var(–zz-purple);
background: var(–zz-lilac);
}

.zxm-page .zxm-progress button > span {
min-width: 0;
display: grid;
font-size: 12px;
line-height: 1.1;
font-weight: 800;
}

.zxm-page .zxm-progress button small {
color: #a99eac;
font-size: 8px;
letter-spacing: .13em;
}

.zxm-page .zxm-progress button.is-current {
color: var(–zz-purple-800);
background: linear-gradient(135deg, rgba(148,63,162,.11), rgba(215,182,110,.11));
}

.zxm-page .zxm-progress button.is-done b {
color: #fff;
background: var(–zz-purple);
}

.zxm-page .zxm-builder-head {
padding: 5px 4px 0;
display: flex;
justify-content: space-between;
align-items: end;
gap: 30px;
}

.zxm-page .zxm-builder-head h3 {
margin: 4px 0 0;
font-size: clamp(29px, 3vw, 42px);
line-height: 1.05;
letter-spacing: -.035em;
}

.zxm-page .zxm-builder-head__lead {
max-width: 530px;
margin-bottom: 2px;
color: var(–zz-copy);
font-size: 13px;
line-height: 1.6;
}

/* ========================================================================
ENGRAVING TARGET
======================================================================== */

.zxm-page .zxm-engraving-target-shell {
position: relative;
display: grid;
grid-template-columns: 36px minmax(0,1fr) 36px;
align-items: center;
gap: 6px;
padding: 8px;
border: 1px solid var(–zz-line);
border-radius: 20px;
background: #fff;
box-shadow: var(–zz-shadow-sm);
}

.zxm-page .zxm-target-track {
min-width: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 8px;
}

.zxm-page .zxm-target-arrow,
.zxm-page .zxm-product-slider-arrow {
appearance: none;
border: 0;
border-radius: 50%;
display: grid;
place-items: center;
color: var(–zz-purple);
background: rgba(148,63,162,.07);
font-size: 25px;
transition: .2s var(–zz-ease);
}

.zxm-page .zxm-target-arrow {
width: 36px;
height: 36px;
}

.zxm-page .zxm-target-arrow:hover,
.zxm-page .zxm-product-slider-arrow:hover {
background: rgba(148,63,162,.13);
}

.zxm-page .zxm-target-card {
appearance: none;
min-width: 0;
min-height: 82px;
padding: 12px 14px;
border: 1px solid transparent;
border-radius: 15px;
color: var(–zz-copy);
background: #fbfafb;
display: flex;
align-items: center;
gap: 11px;
text-align: left;
transition: .22s var(–zz-ease);
}

.zxm-page .zxm-target-card > i {
width: 39px;
height: 39px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: var(–zz-purple);
background: #fff;
box-shadow: 0 5px 15px rgba(79,32,88,.06);
font-style: normal;
font-size: 17px;
}

.zxm-page .zxm-target-card > span {
min-width: 0;
display: grid;
gap: 1px;
}

.zxm-page .zxm-target-card small {
color: #a196a3;
font-size: 8px;
letter-spacing: .12em;
}

.zxm-page .zxm-target-card strong {
color: var(–zz-ink);
font-size: 12px;
}

.zxm-page .zxm-target-card em {
color: var(–zz-muted);
font-style: normal;
font-size: 9px;
}

.zxm-page .zxm-target-card.is-active {
border-color: rgba(148,63,162,.26);
background: linear-gradient(135deg, rgba(148,63,162,.095), rgba(215,182,110,.085));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

/* ========================================================================
CONFIGURATOR
======================================================================== */

.zxm-page .zxm-builder-grid,
.zxm-page .zxm-builder-grid–v4,
.zxm-page .zxm-builder-grid–v9 {
display: grid !important;
grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
align-items: start;
gap: 18px !important;
}

.zxm-page .zxm-config-main-card,
.zxm-page .zxm-config-preview-card {
min-width: 0;
}

.zxm-page .zxm-builder-card,
.zxm-page .zxm-live-config-panel {
border: 1px solid var(–zz-line);
border-radius: var(–zz-radius-lg);
background: rgba(255,255,255,.95);
box-shadow: var(–zz-shadow-sm);
}

.zxm-page .zxm-builder-card {
padding: clamp(20px, 2.7vw, 30px);
}

.zxm-page .zxm-card-step {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 11px;
color: var(–zz-purple);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
}

.zxm-page .zxm-card-step > span {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(–zz-purple);
letter-spacing: 0;
}

.zxm-page .zxm-builder-card > h4 {
margin: 0 0 17px;
font-size: 23px;
line-height: 1.15;
letter-spacing: -.025em;
}

.zxm-page .zxm-engraving-options {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 9px;
}

.zxm-page .zxm-engraving-option {
appearance: none;
min-width: 0;
min-height: 112px;
padding: 12px;
border: 1px solid var(–zz-line);
border-radius: 15px;
color: var(–zz-copy);
background: #fff;
display: grid;
justify-items: start;
align-content: space-between;
gap: 5px;
text-align: left;
transition: .2s var(–zz-ease);
}

.zxm-page .zxm-engraving-option:hover {
transform: translateY(-2px);
border-color: rgba(148,63,162,.24);
}

.zxm-page .zxm-engraving-option.is-active {
border-color: rgba(148,63,162,.38);
background: linear-gradient(145deg, rgba(148,63,162,.085), rgba(255,255,255,.95));
box-shadow: 0 10px 25px rgba(148,63,162,.08);
}

.zxm-page .zxm-motif-frame {
position: relative;
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
color: var(–zz-purple);
background: var(–zz-lilac-2);
font-size: 18px;
}

.zxm-page .zxm-motif-snow {
position: absolute;
right: -5px;
top: -5px;
color: var(–zz-gold);
font-size: 9px;
}

.zxm-page .zxm-engraving-option strong {
color: var(–zz-ink);
font-size: 11px;
line-height: 1.2;
}

.zxm-page .zxm-engraving-option small {
color: var(–zz-muted);
font-size: 9px;
}

.zxm-page .zxm-no-engraving-option {
appearance: none;
width: 100%;
margin-top: 9px;
padding: 10px 12px;
border: 1px dashed rgba(148,63,162,.20);
border-radius: 14px;
color: var(–zz-copy);
background: #fcfafc;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
}

.zxm-page .zxm-no-engraving-option > i {
width: 28px;
height: 28px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: #8e7c92;
background: #fff;
font-style: normal;
}

.zxm-page .zxm-no-engraving-option > span {
display: grid;
}

.zxm-page .zxm-no-engraving-option strong {
font-size: 11px;
}

.zxm-page .zxm-no-engraving-option small {
color: var(–zz-muted);
font-size: 9px;
}

.zxm-page .zxm-customize-stack {
margin-top: 17px !important;
}

.zxm-page .zxm-custom-row {
display: none;
}

.zxm-page .zxm-custom-row.is-active {
display: block;
}

.zxm-page .zxm-custom-row > label {
display: block;
margin-bottom: 8px;
color: #817286;
font-size: 9px;
font-weight: 850;
letter-spacing: .12em;
}

.zxm-page .zxm-custom-row input,
.zxm-page .zxm-custom-row select,
.zxm-page .zxm-field input,
.zxm-page .zxm-field select {
width: 100%;
min-height: 47px;
padding: 0 13px;
border: 1px solid rgba(82,39,92,.15);
border-radius: 12px;
outline: none;
color: var(–zz-ink);
background: #fff;
box-shadow: inset 0 1px 2px rgba(44,15,51,.025);
transition: border-color .2s ease, box-shadow .2s ease;
}

.zxm-page .zxm-custom-row input:focus,
.zxm-page .zxm-custom-row select:focus,
.zxm-page .zxm-field input:focus,
.zxm-page .zxm-field select:focus {
border-color: rgba(148,63,162,.42);
box-shadow: 0 0 0 4px rgba(148,63,162,.07);
}

.zxm-page .zxm-input-hint {
display: block;
margin-top: 6px;
color: var(–zz-muted);
font-size: 9px;
}

.zxm-page .zxm-symbol-picker {
display: grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: 7px;
}

.zxm-page .zxm-symbol-button {
appearance: none;
min-width: 0;
min-height: 81px;
padding: 7px 4px;
border: 1px solid var(–zz-line);
border-radius: 13px;
color: var(–zz-copy);
background: #fff;
display: grid;
justify-items: center;
gap: 5px;
transition: .2s var(–zz-ease);
}

.zxm-page .zxm-symbol-button:hover {
transform: translateY(-2px);
}

.zxm-page .zxm-symbol-button.is-active {
border-color: rgba(148,63,162,.39);
background: rgba(148,63,162,.07);
box-shadow: 0 7px 19px rgba(148,63,162,.08);
}

.zxm-page .zxm-symbol-art {
width: 45px;
height: 45px;
display: grid;
place-items: center;
}

.zxm-page .zxm-symbol-art img {
width: 100%;
height: 100%;
object-fit: contain;
}

.zxm-page .zxm-symbol-art > i {
display: none;
}

.zxm-page .zxm-symbol-name {
color: var(–zz-copy);
font-size: 9px;
font-weight: 700;
}

.zxm-page .zxm-pendant-lines {
margin-top: 8px;
}

.zxm-page .zxm-pendant-line-grid {
display: grid;
gap: 7px;
}

/* Preview */
.zxm-page .zxm-config-preview-card {
position: sticky;
top: 92px;
z-index: 15;
}

.zxm-page .zxm-live-config-panel {
overflow: hidden;
background:
radial-gradient(circle at 90% 0%, rgba(215,182,110,.11), transparent 31%),
linear-gradient(150deg, #fff, #fbf6fc);
}

.zxm-page .zxm-preview-stage-head {
min-height: 67px;
padding: 14px 17px;
border-bottom: 1px solid var(–zz-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

.zxm-page .zxm-preview-stage-head > div:first-child {
display: grid;
gap: 3px;
}

.zxm-page .zxm-preview-stage-head strong {
font-size: 13px;
}

.zxm-page .zxm-preview-pager {
min-width: 44px;
height: 29px;
padding: 0 9px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(–zz-purple);
background: rgba(148,63,162,.08);
font-size: 9px;
font-weight: 800;
}

.zxm-page .zxm-preview-carousel {
position: relative;
}

.zxm-page .zxm-preview-track {
position: relative;
}

.zxm-page .zxm-target-preview {
display: none;
padding: 14px 14px 9px;
}

.zxm-page .zxm-target-preview.is-active {
display: block;
}

.zxm-page .zxm-photo-preview {
position: relative;
aspect-ratio: 1.18 / 1;
overflow: hidden;
border-radius: 18px;
background: #f4eff5;
}

.zxm-page .zxm-photo-preview > img:first-child {
width: 100%;
height: 100%;
object-fit: cover;
}

.zxm-page .zxm-preview-chip {
position: absolute;
left: 10px;
top: 10px;
z-index: 5;
padding: 6px 9px;
border-radius: 999px;
color: #fff;
background: rgba(35,12,41,.72);
backdrop-filter: blur(8px);
font-size: 8px;
font-weight: 800;
letter-spacing: .08em;
}

.zxm-page .zxm-target-preview > p {
min-height: 34px;
margin: 8px 2px 0;
color: var(–zz-muted);
font-size: 9px;
line-height: 1.45;
}

.zxm-page .zxm-photo-engraving {
position: absolute;
z-index: 8;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: rgba(255,255,255,.88);
font-size: 35px;
line-height: 1;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,.55);
pointer-events: none;
}

.zxm-page .zxm-photo-engraving.is-text {
width: 56%;
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
}

.zxm-page .zxm-bracelet-zodiac-preview,
.zxm-page .zxm-pendant-zodiac-preview,
.zxm-page .zxm-zodiac-artwork-preview,
.zxm-page .zxm-bottle-artwork-layer {
position: absolute;
z-index: 7;
pointer-events: none;
object-fit: contain;
}

/* Summary */
.zxm-page .zxm-builder-summary {
grid-column: 1 / -1;
margin: 0;
padding: 18px;
border: 1px solid rgba(148,63,162,.14);
border-radius: 20px;
background: linear-gradient(135deg, #fff, #faf4fb);
box-shadow: var(–zz-shadow-sm);
}

.zxm-page .zxm-confirm-section-head {
margin-bottom: 10px;
}

.zxm-page .zxm-summary-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}

.zxm-page .zxm-summary-item {
min-width: 0;
padding: 11px 12px;
border: 1px solid var(–zz-line);
border-radius: 13px;
background: rgba(255,255,255,.85);
display: grid;
gap: 2px;
}

.zxm-page .zxm-summary-item > span {
color: #9b8da0;
font-size: 8px;
font-weight: 850;
letter-spacing: .11em;
}

.zxm-page .zxm-summary-item > strong {
overflow: hidden;
color: var(–zz-ink);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}

.zxm-page .zxm-confirm-action-row {
margin-top: 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

.zxm-page .zxm-confirm-guide {
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
}

.zxm-page .zxm-confirm-guide > i {
width: 29px;
height: 29px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: var(–zz-purple);
background: rgba(148,63,162,.08);
font-style: normal;
font-size: 11px;
}

.zxm-page .zxm-confirm-guide > span {
display: grid;
}

.zxm-page .zxm-confirm-guide strong {
font-size: 10px;
}

.zxm-page .zxm-confirm-guide small {
color: var(–zz-muted);
font-size: 9px;
}

.zxm-page .zxm-order-button {
appearance: none;
min-height: 49px;
padding: 0 18px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(–zz-purple), #74247f);
box-shadow: 0 11px 24px rgba(148,63,162,.20);
font-size: 11px;
font-weight: 800;
}

.zxm-page .zxm-confirmed-targets {
margin-top: 9px;
}

.zxm-page .zxm-order-disclaimer {
margin: 7px 0 0;
color: var(–zz-muted);
font-size: 9px;
}

/* ========================================================================
PRODUCT CHOICE + ORDER SUMMARY
======================================================================== */

.zxm-page .zxm-product-choice {
position: relative;
display: grid;
grid-template-columns: minmax(0,1fr) 355px;
align-items: start;
column-gap: 20px;
row-gap: 14px;
padding: clamp(19px, 2.7vw, 30px);
border: 1px solid var(–zz-line);
border-radius: var(–zz-radius-xl);
background: #fff;
box-shadow: var(–zz-shadow-lg);
scroll-margin-top: 100px;
}

.zxm-page .zxm-product-choice__head,
.zxm-page .zxm-product-category-tabs,
.zxm-page .zxm-product-slider-shell,
.zxm-page .zxm-selected-basket,
.zxm-page .zxm-bonuses,
.zxm-page .zxm-chip-bundle,
.zxm-page .zxm-birthday-gift,
.zxm-page .zxm-product-choice__note {
grid-column: 1;
}

.zxm-page .zxm-product-choice__head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 18px;
}

.zxm-page .zxm-product-choice__head h3 {
margin: 5px 0 7px;
font-size: clamp(25px, 2.5vw, 34px);
line-height: 1.05;
letter-spacing: -.03em;
}

.zxm-page .zxm-product-choice__head p {
max-width: 680px;
margin: 0;
color: var(–zz-copy);
font-size: 11px;
line-height: 1.55;
}

.zxm-page .zxm-product-lock {
flex: 0 0 auto;
min-height: 37px;
padding: 0 12px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 6px;
color: var(–zz-purple-800);
background: rgba(148,63,162,.075);
font-size: 9px;
font-weight: 800;
}

.zxm-page .zxm-product-lock > i {
font-style: normal;
}

.zxm-page .zxm-product-category-tabs {
display: flex;
gap: 5px;
padding: 5px;
border-radius: 999px;
background: #f7f2f8;
}

.zxm-page .zxm-product-category-tabs button {
appearance: none;
min-height: 39px;
padding: 0 14px;
border: 0;
border-radius: 999px;
color: #7f7183;
background: transparent;
font-size: 10px;
font-weight: 750;
}

.zxm-page .zxm-product-category-tabs button.is-active {
color: #fff;
background: var(–zz-purple);
box-shadow: 0 7px 18px rgba(148,63,162,.18);
}

.zxm-page .zxm-product-category-tabs b {
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 999px;
display: inline-grid;
place-items: center;
margin-left: 4px;
background: rgba(255,255,255,.18);
font-size: 8px;
}

.zxm-page .zxm-product-choice.is-locked .zxm-product-category-tabs,
.zxm-page .zxm-product-choice.is-locked .zxm-product-slider-shell {
opacity: .48;
pointer-events: none;
filter: saturate(.65);
}

.zxm-page .zxm-product-slider-shell {
min-width: 0;
display: grid;
grid-template-columns: 38px minmax(0,1fr) 38px;
align-items: center;
gap: 7px;
}

.zxm-page .zxm-product-slider-arrow {
width: 38px;
height: 38px;
}

.zxm-page .zxm-engraving-product-track {
min-width: 0;
overflow-x: auto;
display: flex;
gap: 12px;
padding: 4px 2px 10px;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: rgba(148,63,162,.26) transparent;
}

.zxm-page .zxm-engraving-product-card {
flex: 0 0 min(290px, 78%);
min-width: 0;
overflow: hidden;
scroll-snap-align: start;
border: 1px solid var(–zz-line);
border-radius: 19px;
background: #fff;
box-shadow: 0 10px 25px rgba(57,21,65,.06);
}

.zxm-page .zxm-engraving-product-card.is-selected {
border-color: rgba(148,63,162,.42);
box-shadow: 0 14px 34px rgba(148,63,162,.13);
}

.zxm-page .zxm-engraving-product-media {
position: relative;
aspect-ratio: 1.25 / 1;
overflow: hidden;
background: #f8f5f8;
}

.zxm-page .zxm-engraving-product-media img {
width: 100%;
height: 100%;
object-fit: cover;
}

.zxm-page .zxm-product-selected-flag {
position: absolute;
left: 9px;
top: 9px;
padding: 6px 9px;
border-radius: 999px;
color: #fff;
background: var(–zz-purple);
font-size: 8px;
font-weight: 800;
}

.zxm-page .zxm-engraving-product-copy {
padding: 13px;
}

.zxm-page .zxm-engraving-product-copy h4,
.zxm-page .zxm-engraving-product-copy h5 {
margin: 0 0 6px;
font-size: 14px;
line-height: 1.2;
}

.zxm-page .zxm-engraving-product-price {
color: var(–zz-purple);
font-size: 13px;
font-weight: 850;
}

.zxm-page .zxm-product-colors,
.zxm-page .zxm-product-size-wrap {
margin-top: 9px;
}

.zxm-page .zxm-product-size-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
margin-bottom: 6px;
color: var(–zz-copy);
font-size: 9px;
font-weight: 750;
}

.zxm-page .zxm-product-sizes {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.zxm-page .zxm-size-option {
appearance: none;
min-width: 39px;
min-height: 34px;
padding: 0 8px;
border: 1px solid var(–zz-line);
border-radius: 10px;
color: var(–zz-copy);
background: #fff;
font-size: 9px;
}

.zxm-page .zxm-size-option.is-selected {
color: #fff;
border-color: var(–zz-purple);
background: var(–zz-purple);
}

.zxm-page .zxm-product-size-note {
margin-top: 5px;
color: var(–zz-muted);
font-size: 8px;
}

.zxm-page .zxm-product-select,
.zxm-page .zxm-product-cart,
.zxm-page .zxm-product-link {
appearance: none;
min-height: 39px;
padding: 0 13px;
border-radius: 999px;
font-size: 9px;
font-weight: 800;
text-decoration: none;
}

.zxm-page .zxm-product-select,
.zxm-page .zxm-product-cart {
color: #fff;
border: 0;
background: linear-gradient(135deg, var(–zz-purple), #74247f);
}

.zxm-page .zxm-product-link {
display: inline-flex;
align-items: center;
color: var(–zz-purple);
border: 1px solid rgba(148,63,162,.18);
background: #fff;
}

.zxm-page .zxm-selected-basket {
min-height: 57px;
padding: 10px 13px;
border: 1px solid rgba(148,63,162,.13);
border-radius: 15px;
background: linear-gradient(135deg, rgba(148,63,162,.055), rgba(215,182,110,.05));
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
}

.zxm-page .zxm-selected-basket > div {
display: grid;
gap: 1px;
}

.zxm-page .zxm-selected-basket strong {
font-size: 10px;
}

.zxm-page .zxm-selected-basket button {
appearance: none;
min-height: 35px;
padding: 0 12px;
border: 0;
border-radius: 999px;
color: var(–zz-purple);
background: rgba(255,255,255,.9);
font-size: 9px;
font-weight: 800;
}

/* Bonus accordion injected by premium UX JS */
.zxm-page .zxm-bonuses {
overflow: hidden;
border: 1px solid var(–zz-line);
border-radius: 19px;
background: linear-gradient(135deg, #fff, #fbf7fc);
}

.zxm-page .zxm-bonuses > summary {
min-height: 63px;
padding: 13px 17px;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
color: var(–zz-purple-800);
cursor: pointer;
}

.zxm-page .zxm-bonuses > summary::-webkit-details-marker {
display: none;
}

.zxm-page .zxm-bonuses > summary > span {
display: grid;
}

.zxm-page .zxm-bonuses > summary small {
color: var(–zz-gold);
font-size: 8px;
letter-spacing: .13em;
}

.zxm-page .zxm-bonuses > summary strong {
font-size: 10px;
}

.zxm-page .zxm-bonuses > summary::after {
content: „+“;
width: 31px;
height: 31px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: var(–zz-purple);
background: rgba(148,63,162,.08);
font-size: 18px;
}

.zxm-page .zxm-bonuses[open] > summary::after {
content: „−“;
}

.zxm-page .zxm-bonuses__content {
padding: 0 13px 13px;
}

/* Chip bundle */
.zxm-page .zxm-chip-bundle {
overflow: hidden;
display: grid;
grid-template-columns: 150px minmax(0,1fr);
border: 1px solid rgba(215,182,110,.26);
border-radius: 18px;
background: #fff;
}

.zxm-page .zxm-chip-bundle__media {
min-height: 170px;
background:
linear-gradient(180deg, rgba(42,12,48,.04), rgba(42,12,48,.12)),
url(„https://zisano.zxm-at/wp-content/uploads/2020/11/flasche_zisano.zxm-png“)
center / contain no-repeat,
#f7f2f8;
}

.zxm-page .zxm-chip-bundle__content {
padding: 17px;
}

.zxm-page .zxm-chip-bundle__eyebrow {
color: var(–zz-gold);
font-size: 8px;
font-weight: 850;
letter-spacing: .13em;
}

.zxm-page .zxm-chip-bundle h4 {
margin: 4px 0 6px;
font-size: 18px;
}

.zxm-page .zxm-chip-bundle p {
margin-bottom: 10px;
color: var(–zz-copy);
font-size: 10px;
line-height: 1.5;
}

.zxm-page .zxm-chip-bundle__gift {
padding: 9px;
border-radius: 13px;
background: rgba(215,182,110,.09);
display: flex;
align-items: center;
gap: 9px;
}

.zxm-page .zxm-chip-bundle__gift-img {
width: 43px;
height: 53px;
object-fit: contain;
}

.zxm-page .zxm-chip-bundle__gift > div {
display: grid;
}

.zxm-page .zxm-chip-bundle__gift small {
color: #a58343;
font-size: 7px;
letter-spacing: .12em;
}

.zxm-page .zxm-chip-bundle__gift strong {
font-size: 10px;
}

.zxm-page .zxm-chip-bundle__gift span {
color: var(–zz-muted);
font-size: 8px;
}

.zxm-page .zxm-chip-bundle__meta {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 9px;
}

.zxm-page #zz-chip-toggle {
appearance: none;
min-height: 36px;
padding: 0 12px;
border: 0;
border-radius: 999px;
color: #fff;
background: var(–zz-purple);
font-size: 9px;
font-weight: 800;
}

/* Birthday gift */
.zxm-page .zxm-birthday-gift {
margin-top: 11px;
padding: 17px;
border: 1px solid var(–zz-line);
border-radius: 18px;
background: linear-gradient(135deg, rgba(148,63,162,.04), #fff);
}

.zxm-page .zxm-birthday-super-title {
display: none;
}

.zxm-page .zxm-birthday-kicker {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 5px;
}

.zxm-page .zxm-birthday-step,
.zxm-page .zxm-birthday-optional {
color: var(–zz-purple);
font-size: 8px;
font-weight: 850;
letter-spacing: .1em;
}

.zxm-page .zxm-birthday-optional {
padding: 4px 6px;
border-radius: 999px;
color: #8c6b32;
background: rgba(215,182,110,.15);
}

.zxm-page .zxm-birthday-gift h4 {
margin: 0 0 5px;
font-size: 17px;
}

.zxm-page .zxm-birthday-gift__intro p {
margin-bottom: 12px;
color: var(–zz-copy);
font-size: 10px;
}

.zxm-page .zxm-birthday-gift__form > label:not(.zxm-marketing-consent) {
display: block;
margin-bottom: 6px;
color: var(–zz-copy);
font-size: 9px;
font-weight: 750;
}

.zxm-page .zxm-birthdate-control {
position: relative;
}

.zxm-page .zxm-birthdate-control input {
width: 100%;
min-height: 45px;
padding: 0 68px 0 12px;
border: 1px solid var(–zz-line);
border-radius: 12px;
}

.zxm-page .zxm-birthdate-gift-badge {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
padding: 5px 7px;
border-radius: 999px;
color: #81622a;
background: rgba(215,182,110,.16);
font-size: 7px;
font-weight: 850;
}

.zxm-page .zxm-birthdate-help {
display: block;
margin-top: 5px;
color: var(–zz-muted);
font-size: 8px;
}

.zxm-page .zxm-marketing-consent {
margin-top: 11px;
padding: 9px;
border-radius: 12px;
background: #faf8fa;
display: flex;
align-items: start;
gap: 8px;
font-size: 8px;
}

.zxm-page .zxm-marketing-consent input {
margin-top: 2px;
}

.zxm-page .zxm-marketing-consent > span {
display: grid;
}

.zxm-page .zxm-marketing-consent strong {
font-size: 8px;
}

.zxm-page .zxm-marketing-consent small {
color: var(–zz-muted);
font-size: 7px;
line-height: 1.4;
}

/* Order summary */
.zxm-page .zxm-order-summary-card {
grid-column: 2;
grid-row: 1 / span 8;
position: sticky;
top: 94px;
margin: 0;
padding: 19px;
border: 1px solid rgba(148,63,162,.15);
border-radius: 22px;
background:
radial-gradient(circle at 100% 0%, rgba(148,63,162,.09), transparent 30%),
#fff;
box-shadow: var(–zz-shadow-md);
}

.zxm-page .zxm-order-summary-card__head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(–zz-line);
}

.zxm-page .zxm-order-summary-card__head h4 {
margin: 3px 0 0;
font-size: 18px;
letter-spacing: -.02em;
}

.zxm-page .zxm-order-summary-badge {
flex: 0 0 auto;
padding: 5px 8px;
border-radius: 999px;
color: var(–zz-purple);
background: rgba(148,63,162,.08);
font-size: 8px;
font-weight: 800;
}

.zxm-page .zxm-order-summary-lines {
display: grid;
gap: 8px;
padding: 12px 0;
}

.zxm-page .zxm-order-summary-empty {
padding: 18px 12px;
border-radius: 12px;
color: var(–zz-muted);
background: #faf8fa;
text-align: center;
font-size: 9px;
}

.zxm-page .zxm-order-summary-line {
padding: 10px 0;
border-bottom: 1px solid rgba(72,31,82,.08);
font-size: 9px;
}

.zxm-page .zxm-order-summary-totals {
padding-top: 4px;
display: grid;
gap: 7px;
}

.zxm-page .zxm-order-summary-totals > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(–zz-copy);
font-size: 9px;
}

.zxm-page .zxm-order-summary-totals strong {
color: var(–zz-ink);
}

.zxm-page .zxm-order-grand-total {
margin-top: 4px;
padding-top: 11px;
border-top: 1px solid var(–zz-line);
font-size: 13px !important;
}

.zxm-page .zxm-order-grand-total strong {
color: var(–zz-purple);
font-size: 17px;
}

.zxm-page .zxm-order-summary-actions {
margin-top: 14px;
display: grid;
gap: 7px;
}

.zxm-page .zxm-order-summary-cart,
.zxm-page .zxm-order-summary-checkout {
appearance: none;
min-height: 45px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
}

.zxm-page .zxm-order-summary-cart {
color: var(–zz-purple);
border: 1px solid rgba(148,63,162,.20);
background: #fff;
}

.zxm-page .zxm-order-summary-checkout {
color: #fff;
border: 0;
background: linear-gradient(135deg, var(–zz-purple), #72247e);
box-shadow: 0 11px 25px rgba(148,63,162,.20);
}

.zxm-page .zxm-order-summary-note,
.zxm-page .zxm-product-choice__note {
color: var(–zz-muted);
font-size: 8px;
line-height: 1.45;
}

.zxm-page .zxm-order-summary-note {
margin: 9px 0 0;
}

.zxm-page .zxm-product-choice__note {
display: flex;
align-items: center;
gap: 7px;
}

.zxm-page .zxm-product-choice__note > i {
width: 22px;
height: 22px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: var(–zz-purple);
background: rgba(148,63,162,.07);
font-style: normal;
}

/* Loaders */
.zxm-page .zxm-product-loading,
.zxm-page .zxm-product-error {
width: 100%;
min-height: 120px;
padding: 20px;
display: grid;
place-items: center;
border: 1px dashed rgba(148,63,162,.18);
border-radius: 16px;
color: var(–zz-muted);
background: #fbf9fb;
text-align: center;
font-size: 10px;
}

/* ========================================================================
GIFT COLOR MODAL
======================================================================== */

html.zxm-modal-open,
html.zxm-modal-open body {
overflow: hidden !important;
}

.zxm-page .zxm-gift-color-modal[hidden] {
display: none !important;
}

.zxm-page .zxm-gift-color-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
padding: 20px;
}

.zxm-page .zxm-gift-color-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(21,8,25,.62);
backdrop-filter: blur(7px);
}

.zxm-page .zxm-gift-color-modal__dialog {
position: relative;
z-index: 2;
width: min(460px, 100%);
padding: 27px;
border: 1px solid rgba(255,255,255,.42);
border-radius: 25px;
background: #fff;
box-shadow: 0 35px 100px rgba(15,5,18,.35);
}

.zxm-page .zxm-gift-color-modal__close {
position: absolute;
right: 13px;
top: 13px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
color: var(–zz-copy);
background: #f5f1f6;
font-size: 20px;
}

.zxm-page .zxm-gift-color-modal__eyebrow {
color: var(–zz-gold);
font-size: 9px;
font-weight: 850;
letter-spacing: .12em;
}

.zxm-page .zxm-gift-color-modal h4 {
margin: 7px 35px 6px 0;
font-size: 25px;
line-height: 1.08;
}

.zxm-page .zxm-gift-color-modal p {
color: var(–zz-copy);
font-size: 11px;
}

.zxm-page .zxm-gift-color-swatches {
margin-top: 15px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}

.zxm-page .zxm-gift-color-swatches button {
appearance: none;
min-height: 78px;
border: 1px solid var(–zz-line);
border-radius: 14px;
background: #fff;
display: grid;
place-items: center;
gap: 5px;
}

.zxm-page .zxm-gift-color-swatches button.is-selected {
border-color: var(–zz-purple);
box-shadow: 0 0 0 3px rgba(148,63,162,.08);
}

.zxm-page .zxm-gift-color-swatches i {
width: 25px;
height: 25px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.zxm-page .zxm-gift-color-swatches .is-blue { background: #7fa9c6; }
.zxm-page .zxm-gift-color-swatches .is-green { background: #98ab8a; }
.zxm-page .zxm-gift-color-swatches .is-pink { background: #dba7b7; }

.zxm-page .zxm-gift-color-swatches span {
font-size: 9px;
font-weight: 700;
}

.zxm-page .zxm-gift-color-modal__hint {
display: block;
margin-top: 11px;
color: var(–zz-muted);
font-size: 8px;
}

/* ========================================================================
ZODIAC FINDER
======================================================================== */

.zxm-page .zxm-match-view .zxm-section-head {
max-width: 720px;
margin: 0 auto 24px;
text-align: center;
}

.zxm-page .zxm-section-head h2,
.zxm-page .zxm-explorer-header h2 {
margin: 7px 0 10px;
font-size: clamp(37px, 4.4vw, 58px);
line-height: .98;
letter-spacing: -.045em;
}

.zxm-page .zxm-section-head p,
.zxm-page .zxm-explorer-header p {
margin: 0;
color: var(–zz-copy);
font-size: 13px;
}

.zxm-page .zxm-zodiac-system {
position: relative;
}

.zxm-page .zxm-zodiac-radio {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}

.zxm-page .zxm-sign-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: 8px;
margin-bottom: 17px;
}

.zxm-page .zxm-sign-card {
min-width: 0;
min-height: 111px;
padding: 13px 9px;
border: 1px solid var(–zz-line);
border-radius: 16px;
color: var(–zz-copy);
background: rgba(255,255,255,.92);
display: grid;
justify-items: center;
align-content: center;
gap: 5px;
text-align: center;
box-shadow: 0 7px 20px rgba(56,21,64,.04);
cursor: pointer;
transition: .22s var(–zz-ease);
}

.zxm-page .zxm-sign-card:hover {
transform: translateY(-3px);
border-color: rgba(148,63,162,.25);
box-shadow: 0 12px 27px rgba(74,29,84,.08);
}

.zxm-page .zxm-sign-symbol {
color: var(–zz-purple);
font-size: 27px;
line-height: 1;
}

.zxm-page .zxm-sign-copy {
min-width: 0;
display: grid;
gap: 2px;
}

.zxm-page .zxm-sign-copy strong {
color: var(–zz-ink);
font-size: 11px;
}

.zxm-page .zxm-sign-copy small {
color: var(–zz-muted);
font-size: 7px;
white-space: nowrap;
}

.zxm-page .zxm-sign-arrow {
display: none;
}

/* checked state */
.zxm-page #zodiac-widder:checked ~ .zxm-sign-grid .zxm-sign-card–widder,
.zxm-page #zodiac-stier:checked ~ .zxm-sign-grid .zxm-sign-card–stier,
.zxm-page #zodiac-zwillinge:checked ~ .zxm-sign-grid .zxm-sign-card–zwillinge,
.zxm-page #zodiac-krebs:checked ~ .zxm-sign-grid .zxm-sign-card–krebs,
.zxm-page #zodiac-loewe:checked ~ .zxm-sign-grid .zxm-sign-card–loewe,
.zxm-page #zodiac-jungfrau:checked ~ .zxm-sign-grid .zxm-sign-card–jungfrau,
.zxm-page #zodiac-waage:checked ~ .zxm-sign-grid .zxm-sign-card–waage,
.zxm-page #zodiac-skorpion:checked ~ .zxm-sign-grid .zxm-sign-card–skorpion,
.zxm-page #zodiac-schuetze:checked ~ .zxm-sign-grid .zxm-sign-card–schuetze,
.zxm-page #zodiac-steinbock:checked ~ .zxm-sign-grid .zxm-sign-card–steinbock,
.zxm-page #zodiac-wassermann:checked ~ .zxm-sign-grid .zxm-sign-card–wassermann,
.zxm-page #zodiac-fische:checked ~ .zxm-sign-grid .zxm-sign-card–fische {
color: #fff;
border-color: transparent;
background: linear-gradient(145deg, var(–zz-purple), #74247f);
box-shadow: 0 14px 29px rgba(148,63,162,.21);
}

.zxm-page #zodiac-widder:checked ~ .zxm-sign-grid .zxm-sign-card–widder *,
.zxm-page #zodiac-stier:checked ~ .zxm-sign-grid .zxm-sign-card–stier *,
.zxm-page #zodiac-zwillinge:checked ~ .zxm-sign-grid .zxm-sign-card–zwillinge *,
.zxm-page #zodiac-krebs:checked ~ .zxm-sign-grid .zxm-sign-card–krebs *,
.zxm-page #zodiac-loewe:checked ~ .zxm-sign-grid .zxm-sign-card–loewe *,
.zxm-page #zodiac-jungfrau:checked ~ .zxm-sign-grid .zxm-sign-card–jungfrau *,
.zxm-page #zodiac-waage:checked ~ .zxm-sign-grid .zxm-sign-card–waage *,
.zxm-page #zodiac-skorpion:checked ~ .zxm-sign-grid .zxm-sign-card–skorpion *,
.zxm-page #zodiac-schuetze:checked ~ .zxm-sign-grid .zxm-sign-card–schuetze *,
.zxm-page #zodiac-steinbock:checked ~ .zxm-sign-grid .zxm-sign-card–steinbock *,
.zxm-page #zodiac-wassermann:checked ~ .zxm-sign-grid .zxm-sign-card–wassermann *,
.zxm-page #zodiac-fische:checked ~ .zxm-sign-grid .zxm-sign-card–fische * {
color: #fff;
}

/* only active profile is shown */
.zxm-page .zxm-match-results > .zxm-profile-panel {
display: none;
}

.zxm-page #zodiac-widder:checked ~ .zxm-match-results .zxm-profile-panel–widder,
.zxm-page #zodiac-stier:checked ~ .zxm-match-results .zxm-profile-panel–stier,
.zxm-page #zodiac-zwillinge:checked ~ .zxm-match-results .zxm-profile-panel–zwillinge,
.zxm-page #zodiac-krebs:checked ~ .zxm-match-results .zxm-profile-panel–krebs,
.zxm-page #zodiac-loewe:checked ~ .zxm-match-results .zxm-profile-panel–loewe,
.zxm-page #zodiac-jungfrau:checked ~ .zxm-match-results .zxm-profile-panel–jungfrau,
.zxm-page #zodiac-waage:checked ~ .zxm-match-results .zxm-profile-panel–waage,
.zxm-page #zodiac-skorpion:checked ~ .zxm-match-results .zxm-profile-panel–skorpion,
.zxm-page #zodiac-schuetze:checked ~ .zxm-match-results .zxm-profile-panel–schuetze,
.zxm-page #zodiac-steinbock:checked ~ .zxm-match-results .zxm-profile-panel–steinbock,
.zxm-page #zodiac-wassermann:checked ~ .zxm-match-results .zxm-profile-panel–wassermann,
.zxm-page #zodiac-fische:checked ~ .zxm-match-results .zxm-profile-panel–fische {
display: block;
}

.zxm-page .zxm-profile-panel {
padding: clamp(22px, 3.2vw, 36px);
border: 1px solid var(–zz-line);
border-radius: var(–zz-radius-xl);
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(–accent, #943fa2) 12%, transparent), transparent 26%),
#fff;
box-shadow: var(–zz-shadow-md);
}

.zxm-page .zxm-profile-head {
padding-bottom: 17px;
border-bottom: 1px solid var(–zz-line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
align-items: center;
}

.zxm-page .zxm-identity {
display: flex;
align-items: center;
gap: 13px;
}

.zxm-page .zxm-identity-symbol {
width: 65px;
height: 65px;
flex: 0 0 auto;
border-radius: 20px;
display: grid;
place-items: center;
color: #fff;
background: var(–accent, var(–zz-purple));
box-shadow: 0 12px 25px color-mix(in srgb, var(–accent, #943fa2) 22%, transparent);
font-size: 30px;
}

.zxm-page .zxm-identity h3 {
margin: 2px 0 0;
font-size: 31px;
line-height: 1;
}

.zxm-page .zxm-identity p {
margin: 4px 0 0;
color: var(–zz-muted);
font-size: 10px;
}

.zxm-page .zxm-quote {
padding: 14px 17px;
border-left: 2px solid var(–accent, var(–zz-purple));
background: rgba(148,63,162,.035);
}

.zxm-page .zxm-quote blockquote {
margin: 4px 0 0;
color: var(–zz-copy);
font-size: 14px;
font-style: italic;
line-height: 1.45;
}

.zxm-page .zxm-profile-grid {
margin-top: 15px;
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 11px;
}

.zxm-page .zxm-personality {
padding: 20px;
border-radius: 19px;
}

.zxm-page .zxm-personality h4 {
margin: 5px 0 8px;
font-size: 18px;
line-height: 1.2;
}

.zxm-page .zxm-personality p {
margin-bottom: 7px;
color: var(–zz-copy);
font-size: 10px;
line-height: 1.55;
}

.zxm-page .zxm-tag-row {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.zxm-page .zxm-tag-row > span {
padding: 5px 8px;
border-radius: 999px;
color: var(–accent-dark, var(–zz-purple-800));
background: var(–accent-light, var(–zz-lilac));
font-size: 8px;
font-weight: 750;
}

.zxm-page .zxm-detail-stack {
display: grid;
gap: 8px;
}

.zxm-page .zxm-detail-card {
padding: 13px;
border-radius: 16px;
}

.zxm-page .zxm-detail-main {
margin-top: 5px;
display: flex;
align-items: center;
gap: 10px;
}

.zxm-page .zxm-detail-icon {
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 12px;
display: grid;
place-items: center;
color: var(–accent, var(–zz-purple));
background: var(–accent-light, var(–zz-lilac));
font-size: 17px;
}

.zxm-page .zxm-detail-main strong {
font-size: 10px;
}

.zxm-page .zxm-detail-main p {
margin: 2px 0 0;
color: var(–zz-muted);
font-size: 8px;
line-height: 1.4;
}

.zxm-page .zxm-palette-card {
margin-top: 11px;
padding: 18px;
border-radius: 19px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 18px;
}

.zxm-page .zxm-palette-copy h4 {
margin: 4px 0 6px;
font-size: 16px;
}

.zxm-page .zxm-palette-copy p {
margin: 0;
color: var(–zz-copy);
font-size: 9px;
}

.zxm-page .zxm-palette {
display: flex;
gap: 8px;
}

.zxm-page .zxm-swatch {
width: 50px;
display: grid;
justify-items: center;
gap: 4px;
}

.zxm-page .zxm-swatch > i {
width: 38px;
height: 38px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}

.zxm-page .zxm-swatch small {
color: var(–zz-muted);
font-size: 7px;
}

.zxm-page .zxm-product-recommendations {
margin-top: 14px;
padding-top: 17px;
border-top: 1px solid var(–zz-line);
}

.zxm-page .zxm-product-recommendations__head {
max-width: 660px;
}

.zxm-page .zxm-product-recommendations__head h4 {
margin: 3px 0 4px;
font-size: 18px;
}

.zxm-page .zxm-product-recommendations__head p {
margin: 0;
color: var(–zz-copy);
font-size: 9px;
}

.zxm-page .zxm-product-grid {
margin-top: 11px;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
}

.zxm-page .zxm-shop-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(–zz-line);
border-radius: 18px;
background: #fff;
box-shadow: var(–zz-shadow-sm);
}

.zxm-page .zxm-shop-card__media {
display: block;
aspect-ratio: 1.18 / 1;
overflow: hidden;
background: #f8f5f8;
}

.zxm-page .zxm-shop-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}

.zxm-page .zxm-shop-card__content {
position: relative;
padding: 13px;
}

.zxm-page .zxm-shop-card__badge {
display: inline-flex;
margin-bottom: 7px;
padding: 4px 7px;
border-radius: 999px;
color: var(–zz-purple);
background: rgba(148,63,162,.08);
font-size: 7px;
font-weight: 850;
}

.zxm-page .zxm-shop-card__content h5 {
margin: 0 0 5px;
font-size: 13px;
}

.zxm-page .zxm-shop-card__price {
display: flex;
align-items: baseline;
gap: 5px;
color: var(–zz-purple);
font-size: 12px;
font-weight: 850;
}

.zxm-page .zxm-shop-card__price del {
color: var(–zz-muted);
font-size: 9px;
font-weight: 500;
}

.zxm-page .zxm-shop-card__stock {
margin-top: 3px;
color: #6f8964;
font-size: 8px;
}

.zxm-page .zxm-shop-card__stock.is-out {
color: #a35f68;
}

.zxm-page .zxm-shop-card__button {
min-height: 38px;
margin-top: 9px;
padding: 0 12px;
border-radius: 999px;
display: inline-flex;
align-items: center;
color: #fff;
background: var(–zz-purple);
text-decoration: none;
font-size: 9px;
font-weight: 800;
}

.zxm-page .zxm-card-zodiac {
position: absolute;
right: 12px;
top: 10px;
width: 34px;
height: 34px;
opacity: .13;
}

.zxm-page .zxm-card-zodiac__symbol {
font-size: 29px;
}

.zxm-page .zxm-card-zodiac__star,
.zxm-page .zxm-card-zodiac__orbit {
display: none;
}

.zxm-page .zxm-match-cta {
margin-top: 17px;
padding: 19px 21px;
border-radius: 19px;
color: #fff;
background:
radial-gradient(circle at 90% 15%, rgba(215,182,110,.18), transparent 25%),
linear-gradient(135deg, var(–zz-purple-900), var(–zz-purple));
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
box-shadow: 0 17px 38px rgba(72,24,81,.18);
}

.zxm-page .zxm-match-cta > span {
opacity: .72;
font-size: 8px;
letter-spacing: .13em;
}

.zxm-page .zxm-match-cta > strong {
font-size: 13px;
}

.zxm-page .zxm-match-cta button {
min-height: 41px;
padding: 0 14px;
border: 0;
border-radius: 999px;
color: var(–zz-purple-800);
background: #fff;
font-size: 9px;
font-weight: 800;
}

/* ========================================================================
ASTRO EXPLORER
======================================================================== */

.zxm-page .zxm-explorer-shell {
display: grid;
gap: 18px;
}

.zxm-page .zxm-explorer-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 22px;
}

.zxm-page .zxm-explorer-header > div:first-child {
max-width: 780px;
}

.zxm-page .zxm-explorer-ornament {
width: 124px;
height: 72px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
color: var(–zz-purple);
background:
radial-gradient(circle at 50% 50%, rgba(148,63,162,.11), transparent 70%),
#faf7fb;
border: 1px solid var(–zz-line);
}

.zxm-page .zxm-explorer-ornament span,
.zxm-page .zxm-explorer-ornament i,
.zxm-page .zxm-explorer-ornament b {
font-style: normal;
font-weight: 600;
}

.zxm-page .zxm-xmas-explorer-banner {
min-height: 265px;
overflow: hidden;
display: grid;
grid-template-columns: .86fr 1.14fr;
border-radius: var(–zz-radius-xl);
background: var(–zz-plum);
box-shadow: var(–zz-shadow-md);
}

.zxm-page .zxm-xmas-explorer-banner__media {
min-height: 265px;
}

.zxm-page .zxm-xmas-explorer-banner__photo {
width: 100%;
height: 100%;
object-fit: cover;
}

.zxm-page .zxm-xmas-explorer-banner__content {
padding: clamp(27px, 4vw, 48px);
align-self: center;
color: #fff;
}

.zxm-page .zxm-xmas-explorer-banner__content > span {
color: var(–zz-gold-light);
font-size: 9px;
font-weight: 850;
letter-spacing: .13em;
}

.zxm-page .zxm-xmas-explorer-banner__content h3 {
margin: 8px 0 9px;
font-size: clamp(30px, 3.3vw, 45px);
line-height: 1;
letter-spacing: -.035em;
}

.zxm-page .zxm-xmas-explorer-banner__content p {
max-width: 580px;
margin-bottom: 15px;
color: rgba(255,255,255,.72);
font-size: 11px;
}

.zxm-page .zxm-xmas-explorer-banner__actions {
display: flex;
align-items: center;
gap: 12px;
}

.zxm-page .zxm-xmas-explorer-banner__actions button,
.zxm-page .zxm-explorer-cta {
appearance: none;
min-height: 43px;
padding: 0 15px;
border: 0;
border-radius: 999px;
color: var(–zz-purple-800);
background: #fff;
font-size: 9px;
font-weight: 800;
}

.zxm-page .zxm-xmas-explorer-banner__actions small {
color: var(–zz-gold-light);
font-size: 8px;
letter-spacing: .11em;
}

.zxm-page .zxm-explorer-nav {
position: sticky;
top: 83px;
z-index: 20;
padding: 6px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
border: 1px solid var(–zz-line);
border-radius: 19px;
background: rgba(255,255,255,.90);
backdrop-filter: blur(16px);
box-shadow: var(–zz-shadow-sm);
}

.zxm-page .zxm-explorer-nav button {
appearance: none;
min-height: 58px;
padding: 8px 10px;
border: 0;
border-radius: 14px;
color: var(–zz-copy);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}

.zxm-page .zxm-explorer-nav button > i {
width: 32px;
height: 32px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: var(–zz-purple);
background: rgba(148,63,162,.07);
font-style: normal;
}

.zxm-page .zxm-explorer-nav button > span {
display: grid;
text-align: left;
font-size: 10px;
font-weight: 800;
}

.zxm-page .zxm-explorer-nav button small {
color: #a295a5;
font-size: 7px;
letter-spacing: .1em;
}

.zxm-page .zxm-explorer-nav button.is-active {
color: #fff;
background: linear-gradient(135deg, var(–zz-purple), #75267f);
}

.zxm-page .zxm-explorer-nav button.is-active > i {
color: #fff;
background: rgba(255,255,255,.14);
}

.zxm-page .zxm-explorer-nav button.is-active small {
color: rgba(255,255,255,.60);
}

.zxm-page .zxm-explorer-panel:not(.is-active) {
display: none;
}

.zxm-page .zxm-tool-grid {
display: grid;
grid-template-columns: .84fr 1.16fr;
gap: 14px;
}

.zxm-page .zxm-tool-intro,
.zxm-page .zxm-calculator {
min-width: 0;
padding: clamp(22px, 3vw, 34px);
border: 1px solid var(–zz-line);
border-radius: 23px;
background: #fff;
box-shadow: var(–zz-shadow-sm);
}

.zxm-page .zxm-tool-intro {
background:
radial-gradient(circle at 0% 0%, rgba(148,63,162,.08), transparent 36%),
#fff;
}

.zxm-page .zxm-tool-intro h3 {
margin: 7px 0 9px;
font-size: clamp(27px, 3vw, 39px);
line-height: 1.02;
letter-spacing: -.035em;
}

.zxm-page .zxm-tool-intro p {
color: var(–zz-copy);
font-size: 11px;
line-height: 1.58;
}

.zxm-page .zxm-tool-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.zxm-page .zxm-tool-badges > span {
padding: 5px 7px;
border-radius: 999px;
color: var(–zz-purple);
background: rgba(148,63,162,.07);
font-size: 7px;
font-weight: 850;
letter-spacing: .08em;
}

.zxm-page .zxm-calc-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
margin-bottom: 14px;
}

.zxm-page .zxm-calc-title strong {
font-size: 15px;
}

.zxm-page .zxm-calc-title > span {
color: var(–zz-purple);
font-size: 8px;
font-weight: 850;
letter-spacing: .11em;
}

.zxm-page .zxm-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
}

.zxm-page .zxm-field–full {
grid-column: 1 / -1;
}

.zxm-page .zxm-field > label {
display: block;
margin-bottom: 5px;
color: var(–zz-copy);
font-size: 8px;
font-weight: 750;
}

.zxm-page .zxm-calc-button {
appearance: none;
width: 100%;
min-height: 45px;
margin-top: 10px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(–zz-purple), #74247f);
box-shadow: 0 10px 23px rgba(148,63,162,.18);
font-size: 10px;
font-weight: 800;
}

.zxm-page .zxm-calc-hint {
margin: 7px 0 0;
color: var(–zz-muted);
font-size: 8px;
line-height: 1.45;
}

.zxm-page .zxm-result {
display: none;
margin-top: 14px;
padding: 14px;
border-radius: 17px;
background: linear-gradient(135deg, rgba(148,63,162,.07), rgba(215,182,110,.06));
border: 1px solid rgba(148,63,162,.10);
}

.zxm-page .zxm-result.is-visible {
display: block;
}

.zxm-page .zxm-result-head {
display: flex;
align-items: center;
gap: 10px;
}

.zxm-page .zxm-result-symbol,
.zxm-page .zxm-animal-stage {
width: 48px;
height: 48px;
flex: 0 0 auto;
border-radius: 15px;
display: grid;
place-items: center;
color: #fff;
background: var(–zz-purple);
font-size: 23px;
}

.zxm-page .zxm-result-head h3 {
margin: 0;
font-size: 15px;
}

.zxm-page .zxm-result-head small {
color: var(–zz-muted);
font-size: 8px;
}

.zxm-page .zxm-result > p {
margin: 9px 0 0;
color: var(–zz-copy);
font-size: 9px;
}

.zxm-page .zxm-moon-visual,
.zxm-page .zxm-animal-stage {
margin: 0 auto 14px;
}

.zxm-page .zxm-moon-visual {
width: 90px;
height: 90px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 32%, #fff, #e7dceb 54%, #b985c0 55%, #66316e 100%);
box-shadow:
inset -14px -9px 28px rgba(38,12,44,.25),
0 17px 35px rgba(80,30,90,.14);
}

.zxm-page .zxm-moon-stats {
margin-top: 11px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}

.zxm-page .zxm-moon-stat {
padding: 8px;
border-radius: 11px;
background: rgba(255,255,255,.75);
display: grid;
}

.zxm-page .zxm-moon-stat small {
color: var(–zz-muted);
font-size: 7px;
}

.zxm-page .zxm-moon-stat strong {
font-size: 10px;
}

.zxm-page .zxm-daily-card {
margin-top: 8px;
padding-top: 9px;
border-top: 1px solid rgba(148,63,162,.10);
}

.zxm-page .zxm-daily-card > span {
color: var(–zz-purple);
font-size: 7px;
font-weight: 850;
letter-spacing: .10em;
}

.zxm-page .zxm-daily-card > strong {
display: block;
margin-top: 2px;
font-size: 11px;
}

.zxm-page .zxm-daily-card > p {
margin: 3px 0 0;
color: var(–zz-copy);
font-size: 9px;
}

/* ========================================================================
FLOATING CONVERSION DOCK (premium UX JS)
======================================================================== */

.zxm-page .zxm-conversion-dock,
.zxm-conversion-dock {
position: fixed;
left: 50%;
bottom: 17px;
z-index: 9990;
width: min(740px, calc(100% – 28px));
transform: translateX(-50%) translateY(130%);
opacity: 0;
pointer-events: none;
padding: 7px 7px 7px 17px;
border: 1px solid rgba(148,63,162,.15);
border-radius: 999px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 18px 54px rgba(57,22,65,.20);
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
transition: .34s var(–zz-ease);
}

.zxm-conversion-dock.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}

.zxm-conversion-dock__copy {
min-width: 0;
display: grid;
}

.zxm-conversion-dock__copy small {
color: var(–zz-purple);
font-size: 8px;
font-weight: 850;
letter-spacing: .12em;
}

.zxm-conversion-dock__copy strong {
overflow: hidden;
color: var(–zz-ink);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}

.zxm-conversion-dock > button {
appearance: none;
min-height: 45px;
padding: 0 18px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(–zz-purple), #74247f);
font-size: 10px;
font-weight: 800;
}

/* ========================================================================
DISCLAIMER
======================================================================== */

.zxm-page .zxm-disclaimer {
padding-block: 18px 70px;
color: #9a8f9c;
font-size: 8px;
line-height: 1.55;
}

/* ========================================================================
ANIMATIONS
======================================================================== */

@keyframes zzTakeoverTwinkle {
0%,100% { transform: scale(.8); opacity: .25; }
50% { transform: scale(1.35); opacity: .9; }
}

@keyframes zzTakeoverScroll {
0% { transform: translateY(0); opacity: 0; }
30% { opacity: 1; }
100% { transform: translateY(12px); opacity: 0; }
}

@keyframes zzTakeoverFloat {
0%,100% { transform: translate3d(0,0,0); }
50% { transform: translate3d(0,-7px,0); }
}

.zxm-page .zxm-astro-wrap {
animation: zzTakeoverFloat 8s ease-in-out infinite;
}

/* ========================================================================
RESPONSIVE — TABLET
======================================================================== */

@media (max-width: 1080px) {
.zxm-page .zxm-hero {
min-height: auto;
background:
linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.89) 53%, rgba(255,255,255,.96) 100%),
url(„https://zisano.zxm-at/wp-content/uploads/2026/08/main_banner_xmas.zxm-webp“)
center / cover no-repeat;
}

.zxm-page .zxm-hero__grid {
min-height: auto;
grid-template-columns: 1fr;
padding-block: 82px 115px;
}

.zxm-page .zxm-hero__grid > div:first-child {
max-width: 760px;
}

.zxm-page .zxm-astro-wrap {
width: min(500px, 86vw);
}

.zxm-page .zxm-product-choice {
grid-template-columns: 1fr;
}

.zxm-page .zxm-order-summary-card {
grid-row: auto;
position: relative;
top: auto;
}

.zxm-page .zxm-sign-grid {
grid-template-columns: repeat(4, minmax(0,1fr));
}
}

/* ========================================================================
RESPONSIVE — SMALL TABLET
======================================================================== */

@media (max-width: 830px) {
.zxm-page .zxm-shell {
width: min(100% – 24px, 1180px);
}

.zxm-page .zxm-benefits {
width: calc(100% – 24px);
grid-template-columns: 1fr;
margin-top: -32px;
}

.zxm-page .zxm-benefits > div {
min-height: 67px;
}

.zxm-page .zxm-xmas-story,
.zxm-page .zxm-personal-hero {
grid-template-columns: 1fr;
}

.zxm-page .zxm-xmas-story__visual {
order: -1;
min-height: 250px;
}

.zxm-page .zxm-xmas-story__photo {
min-height: 250px;
max-height: 340px;
}

.zxm-page .zxm-personal-points {
grid-template-columns: 1fr;
}

.zxm-page .zxm-builder-grid,
.zxm-page .zxm-builder-grid–v4,
.zxm-page .zxm-builder-grid–v9 {
grid-template-columns: 1fr !important;
}

.zxm-page .zxm-config-preview-card {
position: relative;
top: auto;
}

.zxm-page .zxm-engraving-options {
grid-template-columns: repeat(2, minmax(0,1fr));
}

.zxm-page .zxm-symbol-picker {
grid-template-columns: repeat(4, minmax(0,1fr));
}

.zxm-page .zxm-summary-list {
grid-template-columns: 1fr;
}

.zxm-page .zxm-sign-grid {
grid-template-columns: repeat(3, minmax(0,1fr));
}

.zxm-page .zxm-profile-head,
.zxm-page .zxm-profile-grid,
.zxm-page .zxm-palette-card,
.zxm-page .zxm-tool-grid,
.zxm-page .zxm-xmas-explorer-banner {
grid-template-columns: 1fr;
}

.zxm-page .zxm-xmas-explorer-banner__media {
min-height: 230px;
}

.zxm-page .zxm-explorer-header {
grid-template-columns: 1fr;
}

.zxm-page .zxm-explorer-ornament {
display: none;
}

.zxm-page .zxm-match-cta {
grid-template-columns: 1fr;
}

.zxm-page .zxm-product-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}

/* ========================================================================
RESPONSIVE — MOBILE
======================================================================== */

@media (max-width: 620px) {
.zxm-page .zxm-hero {
min-height: 82svh;
}

.zxm-page .zxm-hero__grid {
padding-block: 57px 100px;
gap: 20px;
}

.zxm-page .zxm-hero-title {
margin-top: 16px;
font-size: clamp(45px, 14vw, 66px);
}

.zxm-page .zxm-hero .zxm-hero__lead {
font-size: 15px;
}

.zxm-page .zxm-hero__actions {
display: grid;
grid-template-columns: 1fr;
}

.zxm-page .zxm-button-primary,
.zxm-page .zxm-button-secondary,
.zxm-page .zxm-personal-cta {
width: 100%;
}

.zxm-page .zxm-hero__gift {
width: 100%;
}

.zxm-page .zxm-astro-wrap {
width: min(390px, 91vw);
}

.zxm-page .zxm-hub-nav-wrap {
top: 5px;
width: calc(100% – 14px);
margin-bottom: 24px;
}

.zxm-page .zxm-hub-tab {
min-height: 47px;
padding: 0 7px;
}

.zxm-page .zxm-hub-tab > i {
display: none;
}

.zxm-page .zxm-hub-tab > span {
font-size: 10px;
}

.zxm-page .zxm-personal-section,
.zxm-page .zxm-match-view,
.zxm-page .zxm-explorer-section {
padding-block: 18px 66px;
}

.zxm-page .zxm-personal-copy,
.zxm-page .zxm-xmas-story__copy {
padding: 23px 18px 24px;
}

.zxm-page .zxm-personal-copy h2 {
font-size: 38px;
}

.zxm-page .zxm-progress {
grid-template-columns: repeat(4, 1fr);
gap: 4px;
padding: 7px;
}

.zxm-page .zxm-progress > i {
display: none;
}

.zxm-page .zxm-progress button {
min-height: 55px;
padding: 6px 3px;
display: grid;
justify-items: center;
text-align: center;
}

.zxm-page .zxm-progress button > b {
width: 29px;
height: 29px;
}

.zxm-page .zxm-progress button > span {
font-size: 9px;
}

.zxm-page .zxm-progress button small {
display: none;
}

.zxm-page .zxm-builder-head {
display: grid;
gap: 7px;
}

.zxm-page .zxm-builder-head h3 {
font-size: 30px;
}

.zxm-page .zxm-engraving-target-shell {
grid-template-columns: 1fr;
}

.zxm-page .zxm-target-arrow {
display: none;
}

.zxm-page .zxm-target-track {
grid-template-columns: 1fr;
}

.zxm-page .zxm-target-card {
min-height: 66px;
}

.zxm-page .zxm-builder-card {
padding: 17px;
}

.zxm-page .zxm-engraving-options {
grid-template-columns: repeat(2, minmax(0,1fr));
}

.zxm-page .zxm-engraving-option {
min-height: 104px;
}

.zxm-page .zxm-symbol-picker {
grid-template-columns: repeat(3, minmax(0,1fr));
}

.zxm-page .zxm-confirm-action-row {
display: grid;
}

.zxm-page .zxm-order-button {
width: 100%;
}

.zxm-page .zxm-product-choice {
padding: 14px;
border-radius: 25px;
}

.zxm-page .zxm-product-choice__head {
display: grid;
}

.zxm-page .zxm-product-lock {
width: fit-content;
}

.zxm-page .zxm-product-category-tabs {
overflow-x: auto;
border-radius: 14px;
}

.zxm-page .zxm-product-category-tabs button {
flex: 0 0 auto;
}

.zxm-page .zxm-product-slider-shell {
grid-template-columns: 1fr;
}

.zxm-page .zxm-product-slider-arrow {
display: none;
}

.zxm-page .zxm-engraving-product-card {
flex-basis: 88%;
}

.zxm-page .zxm-selected-basket {
align-items: start;
display: grid;
}

.zxm-page .zxm-chip-bundle {
grid-template-columns: 1fr;
}

.zxm-page .zxm-chip-bundle__media {
min-height: 150px;
}

.zxm-page .zxm-sign-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}

.zxm-page .zxm-sign-card {
min-height: 95px;
}

.zxm-page .zxm-profile-panel {
padding: 16px;
border-radius: 24px;
}

.zxm-page .zxm-profile-head {
gap: 13px;
}

.zxm-page .zxm-quote {
padding: 12px;
}

.zxm-page .zxm-palette {
flex-wrap: wrap;
}

.zxm-page .zxm-product-grid {
grid-template-columns: 1fr;
}

.zxm-page .zxm-explorer-nav {
top: 66px;
}

.zxm-page .zxm-explorer-nav button {
min-height: 53px;
padding: 5px;
}

.zxm-page .zxm-explorer-nav button > i {
display: none;
}

.zxm-page .zxm-explorer-nav button > span {
text-align: center;
font-size: 8px;
}

.zxm-page .zxm-explorer-nav button small {
display: none;
}

.zxm-page .zxm-tool-intro,
.zxm-page .zxm-calculator {
padding: 18px;
}

.zxm-page .zxm-form-grid {
grid-template-columns: 1fr;
}

.zxm-page .zxm-field–full {
grid-column: 1;
}

.zxm-page .zxm-moon-stats {
grid-template-columns: 1fr;
}

.zxm-page .zxm-gift-color-swatches {
grid-template-columns: 1fr;
}

.zxm-conversion-dock {
bottom: 8px;
width: calc(100% – 14px);
padding-left: 12px;
border-radius: 20px;
}

.zxm-conversion-dock__copy strong {
max-width: 150px;
}

.zxm-conversion-dock > button {
min-height: 43px;
padding: 0 12px;
font-size: 9px;
}
}

/* ========================================================================
ACCESSIBILITY
======================================================================== */

.zxm-page button:focus-visible,
.zxm-page a:focus-visible,
.zxm-page input:focus-visible,
.zxm-page select:focus-visible,
.zxm-page label:focus-visible {
outline: 3px solid rgba(148,63,162,.28);
outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
.zxm-page *,
.zxm-page *::before,
.zxm-page *::after,
.zxm-conversion-dock {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}

/* ===== Rewrite-only components ===== */
.zxm-page .zxm-button-secondary{
appearance:none;min-height:56px;padding:0 24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
color:var(–zz-purple-800);border:1px solid rgba(148,63,162,.20);background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
font-weight:800;transition:transform .25s var(–zz-ease),box-shadow .25s var(–zz-ease);
}
.zxm-page .zxm-button-secondary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(74,29,84,.08)}
.zxm-page .zxm-benefits__item{min-width:0}
.zxm-page .zxm-progress__step{appearance:none}
.zxm-page .zxm-explorer-cta{justify-self:end;align-self:end}
.zxm-conversion-dock{
position:fixed;left:50%;bottom:17px;z-index:9990;width:min(740px,calc(100% – 28px));transform:translateX(-50%) translateY(130%);opacity:0;
pointer-events:none;padding:7px 7px 7px 17px;border:1px solid rgba(148,63,162,.15);border-radius:999px;background:rgba(255,255,255,.92);
backdrop-filter:blur(20px) saturate(160%);box-shadow:0 18px 54px rgba(57,22,65,.20);display:flex;align-items:center;justify-content:space-between;gap:15px;
transition:.34s cubic-bezier(.2,.8,.2,1);font-family:“Manrope“,“Avenir Next“,“Segoe UI“,Arial,sans-serif;
}
.zxm-conversion-dock.is-visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.zxm-conversion-dock__copy{min-width:0;display:grid}.zxm-conversion-dock__copy small{color:#943fa2;font-size:8px;font-weight:850;letter-spacing:.12em}
.zxm-conversion-dock__copy strong{overflow:hidden;color:#251c28;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.zxm-conversion-dock>button{appearance:none;min-height:45px;padding:0 18px;border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,#943fa2,#74247f);font-size:10px;font-weight:800}
@media(max-width:620px){.zxm-conversion-dock{bottom:8px;width:calc(100% – 14px);padding-left:12px;border-radius:20px}.zxm-conversion-dock__copy strong{max-width:150px}.zxm-conversion-dock>button{min-height:43px;padding:0 12px;font-size:9px}}

/* Functional preview states: standalone replacement for the former landing CSS. */
.zxm-page .zxm-preview-track{display:flex;width:100%;transition:transform .42s cubic-bezier(.2,.8,.2,1);will-change:transform}
.zxm-page .zxm-target-preview{display:block!important;flex:0 0 100%;min-width:100%;padding:14px 14px 9px}
.zxm-page .zxm-target-preview.is-active{display:block!important}
.zxm-page .zxm-engraving-zone{position:absolute;left:50%;top:50%;width:30%;height:20%;transform:translate(-50%,-50%);pointer-events:none;border-radius:10px}
.zxm-page .zxm-engraving-zone–anhanger{width:30%;height:34%;top:52%}
.zxm-page .zxm-engraving-zone–flasche{width:29%;height:56%;top:52%}
.zxm-page .zxm-pendant-zodiac-preview{left:50%;top:51%;width:24%;height:30%;transform:translate(-50%,-50%);filter:brightness(1.12) contrast(.92);object-fit:contain}
.zxm-page .zxm-zodiac-artwork-preview{left:50%;top:51%;width:27%;height:55%;transform:translate(-50%,-50%);object-fit:contain}
.zxm-page .zxm-bracelet-zodiac-preview{left:50%;top:50%;width:18%;height:18%;transform:translate(-50%,-50%);object-fit:contain}
.zxm-page .zxm-bottle-artwork-layer{display:none;left:50%;top:51%;width:28%;height:58%;transform:translate(-50%,-50%);background-repeat:no-repeat;background-position:center;background-size:contain}
.zxm-page .zxm-bottle-artwork-layer.is-visible{display:block}
.zxm-page[data-engraving-target=“verschluss“] .zxm-photo-engraving{left:50%;top:51%;font-size:30px;color:rgba(245,245,245,.86);mix-blend-mode:screen}
.zxm-page[data-engraving-target=“anhanger“] .zxm-photo-engraving{left:50%;top:52%;max-width:27%;white-space:pre-line;font-size:13px;line-height:1.08;color:rgba(241,233,220,.88)}
.zxm-page[data-engraving-target=“flasche“] .zxm-photo-engraving{left:50%;top:51%;max-height:58%;white-space:pre-line;font-size:18px;line-height:1.02;letter-spacing:.04em;color:rgba(245,245,245,.92)}
.zxm-page.zxm-has-pendant-zodiac .zxm-photo-engraving,.zxm-page.zxm-has-bottle-zodiac .zxm-photo-engraving,.zxm-page.zxm-has-bracelet-zodiac .zxm-photo-engraving{opacity:0!important}
.zxm-page.zxm-no-engraving-active .zxm-photo-engraving,.zxm-page.zxm-no-engraving-active .zxm-pendant-zodiac-preview,.zxm-page.zxm-no-engraving-active .zxm-zodiac-artwork-preview,.zxm-page.zxm-no-engraving-active .zxm-bottle-artwork-layer{opacity:0!important}
.zxm-page.zxm-no-engraving-active .zxm-engraving-options{opacity:.55}
.zxm-page .zxm-no-engraving-option.is-active{border-style:solid;border-color:rgba(148,63,162,.35);background:rgba(148,63,162,.08);color:var(–zz-purple-800)}
.zxm-page .zxm-builder-summary.is-confirmed{border-color:rgba(74,135,85,.24);box-shadow:0 12px 30px rgba(62,122,72,.08)}
.zxm-page .zxm-summary-item.is-confirmed{border-color:rgba(74,135,85,.18);background:rgba(80,145,91,.045)}
.zxm-page .zxm-order-button.is-confirmed{background:linear-gradient(135deg,#668e66,#4d754f);box-shadow:0 11px 24px rgba(77,117,79,.16)}
.zxm-page .zxm-chip-bundle.is-context-disabled{opacity:.52;filter:saturate(.65)}
.zxm-page .zxm-chip-bundle.is-ready{opacity:1;filter:none}
.zxm-page .zxm-chip-bundle__gift.is-active{box-shadow:inset 0 0 0 1px rgba(215,182,110,.23)}
.zxm-page .zxm-product-colors{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.zxm-page .zxm-product-colors span{padding:4px 7px;border-radius:999px;background:#f7f3f8;color:var(–zz-muted);font-size:7px}
.zxm-page .zxm-size-option{display:grid;gap:0;place-items:center;line-height:1.05}.zxm-page .zxm-size-option span{font-weight:800}.zxm-page .zxm-size-option em{font-size:7px;font-style:normal;opacity:.72}
.zxm-page .zxm-size-option.is-active{color:#fff;border-color:var(–zz-purple);background:var(–zz-purple)}
.zxm-page .zxm-order-summary-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.zxm-page .zxm-order-summary-line>div{display:grid;gap:2px}.zxm-page .zxm-order-summary-line>div:last-child{text-align:right}.zxm-page .zxm-order-summary-line strong{font-size:9px}.zxm-page .zxm-order-summary-line small{color:var(–zz-muted);font-size:7px}.zxm-page .zxm-order-summary-line–gift>div:last-child span{color:#668e66;font-weight:850}
.zxm-page .zxm-order-summary-cart:disabled,.zxm-page .zxm-order-summary-checkout:disabled,.zxm-page .zxm-product-cart:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.zxm-page .zxm-symbol-art img.is-missing{display:none}.zxm-page .zxm-symbol-art img.is-missing+i{display:grid!important}
.zxm-page .zxm-engraving-option[hidden]{display:none!important}
@media(min-width:1181px){.zxm-page[data-engraving-target=“flasche“] .zxm-live-config-panel{min-height:var(–zz-bottle-match-height,auto)}}

</style>

<!– ZISANO Christmas Zodiac — FULL FRONT-END REWRITE v1.0 | standalone CSS + rewritten JS selectors –>
<div class=“zxm-page“>
<section class=“zxm-hero“>
<div aria-hidden=“true“ class=“zxm-cosmic-stars“></div>
<div class=“zxm-shell zxm-hero__grid“>
<div>
<div class=“zxm-eyebrow“>✦ ZISANO CHRISTMAS ZODIAC · PERSONALISIERT</div>
<h1 class=“zxm-hero-title“>
<span class=“zxm-hero-title__line zxm-hero-title__line–dark“>Dein Zeichen.</span>
<span class=“zxm-hero-title__line zxm-hero-title__line–accent“>Dein Geschenk.</span>
<span class=“zxm-hero-title__line zxm-hero-title__line–dark“>Dein ZISANO.</span>
</h1>
<p class=“zxm-hero__lead“>Gestalte ein persönliches Weihnachtsgeschenk mit Zodiac-Motiv, Monogramm, Datum oder Botschaft – mit Live-Vorschau und passender Produktauswahl.</p>
<div class=“zxm-hero__actions“><button class=“zxm-button-primary“ data-zz-jump-builder=““ type=“button“>Geschenk personalisieren <span>→</span></button><button class=“zxm-button-secondary“ data-open-zodiac-match=““ type=“button“>Mein Zodiac Match finden</button><div class=“zxm-hero__gift“><i>✦</i><div><strong>Gratis Zodiac Extra</strong><small>Optional zu deiner ZISANO-Bestellung</small></div></div></div>
</div>
<div aria-hidden=“true“ class=“zxm-astro-wrap“>
<div class=“zxm-astro-scene“>
<canvas class=“zxm-astro-canvas“></canvas>
<div class=“zxm-cosmos-haze zxm-cosmos-haze–one“></div>
<div class=“zxm-cosmos-haze zxm-cosmos-haze–two“></div>
<svg class=“zxm-constellation-map“ focusable=“false“ viewbox=“0 0 600 600″>
<g class=“zxm-constellation zxm-constellation–a“>
<path d=“M78 218 L148 172 L211 214 L274 146 L347 190″></path>
<circle cx=“78″ cy=“218″ r=“3″></circle><circle cx=“148″ cy=“172″ r=“2.4″></circle><circle cx=“211″ cy=“214″ r=“3.2″></circle><circle cx=“274″ cy=“146″ r=“2.2″></circle><circle cx=“347″ cy=“190″ r=“2.8″></circle>
</g>
<g class=“zxm-constellation zxm-constellation–b“>
<path d=“M328 408 L390 354 L452 388 L516 314″></path>
<circle cx=“328″ cy=“408″ r=“2.6″></circle><circle cx=“390″ cy=“354″ r=“3″></circle><circle cx=“452″ cy=“388″ r=“2.2″></circle><circle cx=“516″ cy=“314″ r=“3.2″></circle>
</g>
</svg>
<div class=“zxm-comet“><span></span></div>
<div class=“zxm-astro-clock“>
<div class=“zxm-clock-glow“></div>
<div class=“zxm-ring zxm-outer“></div>
<div class=“zxm-ring zxm-middle“></div>
<div class=“zxm-ring zxm-inner“></div>
<div class=“zxm-clock-ticks“></div>
<div class=“zxm-clock-spokes“></div>
<div class=“zxm-clock-hand“></div>
<div class=“zxm-clock-hand zxm-second“></div>
<div class=“zxm-celestial-orbit zxm-celestial-orbit–moon“><span class=“zxm-celestial-body zxm-celestial-body–moon“></span></div>
<div class=“zxm-celestial-orbit zxm-celestial-orbit–planet“><span class=“zxm-celestial-body zxm-celestial-body–planet“></span></div>
<div class=“zxm-zodiac-feature“>
<div class=“zxm-zodiac-symbol-stack“>
<span class=“zxm-zodiac-hero-symbol“ data-zodiac-active=“true“><i class=“zxm-zodiac-hero-symbol__tile“><b>♈</b></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<a aria-label=“Mehr entdecken“ class=“zxm-xmas-scroll“ href=“#zz-xmas-nav“>
<span>Mehr entdecken</span>
<i aria-hidden=“true“><b></b><b></b></i>
</a>
</section><div aria-label=“Vorteile der Christmas Edition“ class=“zxm-benefits“><div class=“zxm-benefits__item“><i>✦</i><span><strong>Persönlich gestalten</strong><small>Zodiac, Monogramm, Datum & mehr</small></span></div><div class=“zxm-benefits__item“><i>◇</i><span><strong>Live-Vorschau</strong><small>Dein Motiv direkt am Produkt sehen</small></span></div><div class=“zxm-benefits__item“><i>✓</i><span><strong>Einfach kombinieren</strong><small>Armband, Anhänger & Flasche</small></span></div></div>
<div aria-label=“Zodiac Bereiche“ class=“zxm-hub-nav-wrap“ id=“zz-xmas-nav“>
<div class=“zxm-hub-nav zxm-hub-nav–three“ role=“tablist“>
<button aria-selected=“true“ class=“zxm-hub-tab zxm-hub-tab–personal is-active“ data-zz-tool=“personalisiert“ role=“tab“ type=“button“><i>✧</i><span>Personalisieren</span><b aria-hidden=“true“ class=“zxm-limited-dot“></b></button>
<button aria-selected=“false“ class=“zxm-hub-tab“ data-zz-tool=“sternzeichen“ role=“tab“ type=“button“><i>✦</i><span>Zodiac Match</span></button>
<button aria-selected=“false“ class=“zxm-hub-tab zxm-hub-tab–explorer“ data-zz-tool=“explorer“ role=“tab“ type=“button“><i>☾</i><span>Astro Explorer</span></button>
</div>
</div><section class=“zxm-tool-panel zxm-personal-section is-active“ data-zz-panel=“personalisiert“ id=“personalized-zisano-band“>
<div class=“zxm-shell“>
<div class=“zxm-personal-shell“>
<div class=“zxm-personal-hero zxm-xmas-story“>
<div class=“zxm-personal-copy zxm-xmas-story__copy“>
<span class=“zxm-campaign-label zxm-xmas-story__label“><b></b> CHRISTMAS ZODIAC EDITION · PERSONALISIERT</span>
<h2>Dein Zeichen.<em>Dein persönliches Geschenk.</em></h2>
<p class=“zxm-xmas-story__lead“>Wähle Produkt, Motiv und Gravur – die Live-Vorschau begleitet dich vom ersten Klick bis zur Bestellung.</p>
<div class=“zxm-personal-points zxm-xmas-story__points“>
<div class=“zxm-personal-point“><i>✦</i><span><strong>Armband-Verschluss</strong><small>fein & dezent graviert</small></span></div>
<div class=“zxm-personal-point“><i>◇</i><span><strong>ZISANO Anhänger</strong><small>persönliche Gravur auf der Rückseite</small></span></div>
<div class=“zxm-personal-point“><i>♌</i><span><strong>Flasche</strong><small>großes Zodiac Motiv oder persönliche Gravur</small></span></div>
</div>
<button class=“zxm-personal-cta zxm-xmas-story__cta“ data-zz-jump-builder=““ type=“button“>Geschenk personalisieren <span>→</span></button>
<div class=“zxm-personal-note“>Die Live-Vorschau ist eine Designsimulation. Position und Größe werden vor der Fertigung technisch an das gewählte Produkt angepasst.</div>
</div>
<div aria-hidden=“true“ class=“zxm-xmas-story__visual“>
<img alt=““ class=“zxm-xmas-story__photo“ decoding=“async“ loading=“eager“ src=“https://zisano.at/wp-content/uploads/2026/08/main_banner_xmas.webp“/>
</div>
</div>
<div class=“zxm-personal-builder“ id=“zz-personal-builder“>
<div aria-label=“Personalisierung in vier Schritten“ class=“zxm-progress“><button class=“zxm-progress__step is-current“ data-conversion-step=“1″ type=“button“><b>1</b><span><small>START</small>Produkt</span></button><i>→</i><button class=“zxm-progress__step“ data-conversion-step=“2″ type=“button“><b>2</b><span><small>GESTALTEN</small>Motiv</span></button><i>→</i><button class=“zxm-progress__step“ data-conversion-step=“3″ type=“button“><b>3</b><span><small>AUSWÄHLEN</small>Artikel</span></button><i>→</i><button class=“zxm-progress__step“ data-conversion-step=“4″ type=“button“><b>4</b><span><small>FERTIG</small>Bestellen</span></button></div><div class=“zxm-builder-head“>
<div><span class=“zxm-kicker-mini“>CHRISTMAS PERSONALISIERUNG</span><h3>Was möchtest du gravieren?</h3></div>
<p class=“zxm-builder-head__lead“>Wechsle wie in einem Slider zwischen Armband, Anhänger und Flasche. Deine Auswahl bleibt gespeichert – auch wenn du mehrere personalisierte Produkte kombinierst.</p>
</div>
<div class=“zxm-engraving-target-shell“>
<button aria-label=“Vorheriger Gravurträger“ class=“zxm-target-arrow zxm-target-arrow–prev“ data-target-prev=““ type=“button“>‹</button>
<div class=“zxm-target-track“ data-target-track=““>
<button class=“zxm-target-card is-active“ data-engraving-target=“verschluss“ type=“button“>
<i>⌁</i><span><small>ARMBAND</small><strong>Verschluss gravieren</strong><em>Elegance & Lifestyle</em></span>
</button>
<button class=“zxm-target-card“ data-engraving-target=“anhanger“ type=“button“>
<i>◇</i><span><small>ZISANO CHIP-HALTER</small><strong>Anhänger gravieren</strong><em>Rückseite · Schmuck</em></span>
</button>
<button class=“zxm-target-card“ data-engraving-target=“flasche“ type=“button“>
<i>♌</i><span><small>ZISANO FLASCHE</small><strong>Flasche gravieren</strong><em>Großes Motiv · mehrere Farben</em></span>
</button>
</div>
<button aria-label=“Nächster Gravurträger“ class=“zxm-target-arrow zxm-target-arrow–next“ data-target-next=““ type=“button“>›</button>
</div>
<div class=“zxm-builder-grid zxm-builder-grid–v4 zxm-builder-grid–v9″>
<section class=“zxm-config-main-card“>
<div class=“zxm-builder-card“>
<div class=“zxm-card-step“><span>01</span><strong>Motiv gestalten</strong></div>
<h4>Deine Gravur gestalten</h4>
<div class=“zxm-engraving-options zxm-engraving-options–luxury“ data-engraving-options=““>
<button class=“zxm-engraving-option is-active“ data-engraving-type=“zodiac“ type=“button“>
<span class=“zxm-motif-frame“><i>♌</i><span class=“zxm-motif-snow“>❄</span></span><strong>Sternzeichen</strong><small>12 Zodiac Motive</small>
</button>
<button class=“zxm-engraving-option“ data-engraving-type=“chinese“ type=“button“>
<span class=“zxm-motif-frame“><i>龍</i><span class=“zxm-motif-snow“>✦</span></span><strong>Chinesisches Zeichen</strong><small>12 Tierzeichen</small>
</button>
<button class=“zxm-engraving-option“ data-engraving-type=“moon“ type=“button“>
<span class=“zxm-motif-frame“><i>◐</i><span class=“zxm-motif-snow“>❄</span></span><strong>Geburtsmond</strong><small>Deine Mondphase</small>
</button>
<button class=“zxm-engraving-option“ data-engraving-type=“initials“ type=“button“>
<span class=“zxm-motif-frame“><i>VB</i><span class=“zxm-motif-snow“>✦</span></span><strong>Monogramm</strong><small data-monogram-option-note=““>Je nach Produkt</small>
</button>
<button class=“zxm-engraving-option“ data-engraving-type=“date“ type=“button“>
<span class=“zxm-motif-frame“><i>25</i><span class=“zxm-motif-snow“>❄</span></span><strong>Persönliches Datum</strong><small>Dein Moment</small>
</button>
<button class=“zxm-engraving-option“ data-engraving-type=“word“ type=“button“>
<span class=“zxm-motif-frame“><i>∞</i><span class=“zxm-motif-snow“>✦</span></span><strong>Wort / Koordinate</strong><small>Deine Botschaft</small>
</button>
</div>
<button aria-pressed=“false“ class=“zxm-no-engraving-option“ data-no-engraving=““ type=“button“>
<i aria-hidden=“true“>×</i>
<span><strong>Ohne Gravur bestellen</strong><small>Diesen Produkttyp ohne Personalisierung auswählen</small></span>
</button>
<div class=“zxm-customize-stack“ style=“margin-top:18px“>
<div class=“zxm-custom-row is-active“ data-custom-row=“zodiac“>
<label>DEIN STERNZEICHEN</label>
<div aria-label=“Sternzeichen-Gravurmotive“ class=“zxm-symbol-picker zxm-symbol-picker–artwork“>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/capricorn_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/capricorn_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/capricorn.png“ data-label=“Steinbock“ data-sign-key=“steinbock“ data-symbol=“♑“ type=“button“><span class=“zxm-symbol-art“><img alt=“Steinbock Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/capricorn_simple.png“/><i aria-hidden=“true“>♑</i></span><span class=“zxm-symbol-name“>Steinbock</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/aquarius_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/aquarius_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/aquarius.png“ data-label=“Wassermann“ data-sign-key=“wassermann“ data-symbol=“♒“ type=“button“><span class=“zxm-symbol-art“><img alt=“Wassermann Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/aquarius_simple.png“/><i aria-hidden=“true“>♒</i></span><span class=“zxm-symbol-name“>Wassermann</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/pisces_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/pisces_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/pisces.png“ data-label=“Fische“ data-sign-key=“fische“ data-symbol=“♓“ type=“button“><span class=“zxm-symbol-art“><img alt=“Fische Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/pisces_simple.png“/><i aria-hidden=“true“>♓</i></span><span class=“zxm-symbol-name“>Fische</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/aries_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/aries_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/aries.png“ data-label=“Widder“ data-sign-key=“widder“ data-symbol=“♈“ type=“button“><span class=“zxm-symbol-art“><img alt=“Widder Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/aries_simple.png“/><i aria-hidden=“true“>♈</i></span><span class=“zxm-symbol-name“>Widder</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/taurus_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/taurus_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/taurus.png“ data-label=“Stier“ data-sign-key=“stier“ data-symbol=“♉“ type=“button“><span class=“zxm-symbol-art“><img alt=“Stier Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/taurus_simple.png“/><i aria-hidden=“true“>♉</i></span><span class=“zxm-symbol-name“>Stier</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/gemini_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/gemini_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/gemini.png“ data-label=“Zwillinge“ data-sign-key=“zwillinge“ data-symbol=“♊“ type=“button“><span class=“zxm-symbol-art“><img alt=“Zwillinge Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/gemini_simple.png“/><i aria-hidden=“true“>♊</i></span><span class=“zxm-symbol-name“>Zwillinge</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/cancer_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/cancer_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/cancer.png“ data-label=“Krebs“ data-sign-key=“krebs“ data-symbol=“♋“ type=“button“><span class=“zxm-symbol-art“><img alt=“Krebs Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/cancer_simple.png“/><i aria-hidden=“true“>♋</i></span><span class=“zxm-symbol-name“>Krebs</span></button>
<button class=“zxm-symbol-button is-active“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/leo_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/leo_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/leo.png“ data-label=“Löwe“ data-sign-key=“loewe“ data-symbol=“♌“ type=“button“><span class=“zxm-symbol-art“><img alt=“Löwe Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/leo_simple.png“/><i aria-hidden=“true“>♌</i></span><span class=“zxm-symbol-name“>Löwe</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/virgo_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/virgo_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/virgo.png“ data-label=“Jungfrau“ data-sign-key=“jungfrau“ data-symbol=“♍“ type=“button“><span class=“zxm-symbol-art“><img alt=“Jungfrau Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/virgo_simple.png“/><i aria-hidden=“true“>♍</i></span><span class=“zxm-symbol-name“>Jungfrau</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/libra_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/libra_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/libra.png“ data-label=“Waage“ data-sign-key=“waage“ data-symbol=“♎“ type=“button“><span class=“zxm-symbol-art“><img alt=“Waage Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/libra_simple.png“/><i aria-hidden=“true“>♎</i></span><span class=“zxm-symbol-name“>Waage</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/scorpio_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/scorpio_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/scorpio.png“ data-label=“Skorpion“ data-sign-key=“skorpion“ data-symbol=“♏“ type=“button“><span class=“zxm-symbol-art“><img alt=“Skorpion Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/scorpio_simple.png“/><i aria-hidden=“true“>♏</i></span><span class=“zxm-symbol-name“>Skorpion</span></button>
<button class=“zxm-symbol-button“ data-artwork-bottle=“https://zisano.at/wp-content/uploads/2026/08/sagitarius_bottle2.png“ data-artwork-bracelet=“https://zisano.at/wp-content/uploads/2026/08/sagitarius_simple.png“ data-artwork-pendant=“https://zisano.at/wp-content/uploads/2026/08/sagitarius.png“ data-label=“Schütze“ data-sign-key=“schuetze“ data-symbol=“♐“ type=“button“><span class=“zxm-symbol-art“><img alt=“Schütze Gravurmotiv“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/sagitarius_simple.png“/><i aria-hidden=“true“>♐</i></span><span class=“zxm-symbol-name“>Schütze</span></button>
</div>
</div>
<div class=“zxm-custom-row“ data-custom-row=“chinese“><label>CHINESISCHES TIERZEICHEN</label><select data-personal-input=““ data-prefix=“Chinesisches Zeichen“><option value=“鼠“>Ratte · 鼠</option><option value=“牛“>Ochse · 牛</option><option value=“虎“>Tiger · 虎</option><option value=“兔“>Hase · 兔</option><option selected=““ value=“龍“>Drache · 龍</option><option value=“蛇“>Schlange · 蛇</option><option value=“馬“>Pferd · 馬</option><option value=“羊“>Ziege · 羊</option><option value=“猴“>Affe · 猴</option><option value=“雞“>Hahn · 雞</option><option value=“狗“>Hund · 狗</option><option value=“豬“>Schwein · 豬</option></select></div>
<div class=“zxm-custom-row“ data-custom-row=“moon“><label>MONDPHASE DEINER WAHL</label><select data-personal-input=““ data-prefix=“Mondphase“><option value=“●“>Neumond</option><option value=“◔“>Zunehmende Sichel</option><option selected=““ value=“◐“>Halbmond</option><option value=“◕“>Zunehmender Mond</option><option value=“○“>Vollmond</option><option value=“◑“>Abnehmender Halbmond</option></select></div>
<div class=“zxm-custom-row“ data-custom-row=“initials“>
<label data-monogram-label=““>MONOGRAMM · MAX. 9 ZEICHEN</label>
<input data-monogram-input=““ data-personal-input=““ data-prefix=“Monogramm“ maxlength=“9″ placeholder=“z. B. VILMOS“ type=“text“ value=“VB“/>
<div class=“zxm-pendant-lines“ data-pendant-lines=““ hidden=““>
<div class=“zxm-pendant-line-grid“>
<input data-pendant-line=“1″ maxlength=“20″ placeholder=“Zeile 1 · max. 20 Zeichen“ type=“text“ value=““/>
<input data-pendant-line=“2″ maxlength=“20″ placeholder=“Zeile 2 · max. 20 Zeichen“ type=“text“ value=““/>
<input data-pendant-line=“3″ maxlength=“20″ placeholder=“Zeile 3 · max. 20 Zeichen“ type=“text“ value=““/>
</div>
</div>
<small class=“zxm-input-hint“ data-monogram-hint=““>Bis zu 9 Zeichen auf dem Armband-Verschluss.</small>
</div>
<div class=“zxm-custom-row“ data-custom-row=“date“>
<label data-date-label=““>DEIN PERSÖNLICHES DATUM</label>
<input data-date-input=““ data-personal-input=““ data-prefix=“Datum“ maxlength=“10″ placeholder=“TT.MM.JJJJ“ type=“text“ value=“25.12.2026″/>
<small class=“zxm-input-hint“ data-date-hint=““></small>
</div>
<div class=“zxm-custom-row“ data-custom-row=“word“><label>WORT, KOORDINATE ODER KURZE BOTSCHAFT</label><input data-personal-input=““ data-prefix=“Persönliche Gravur“ maxlength=“16″ placeholder=“z. B. MUT · 48.2082°N“ type=“text“ value=“FÜR IMMER“/></div>
</div>
</div>
</section>
<aside class=“zxm-config-preview-card“>
<div class=“zxm-live-config-panel“>
<div class=“zxm-preview-stage-head“>
<div><span class=“zxm-kicker-mini“>LIVE PREVIEW</span><strong id=“zz-preview-target-title“>Armband · Verschluss</strong></div>
<div class=“zxm-preview-pager zxm-preview-pager–textonly“><span id=“zz-preview-counter“>1 / 3</span></div>
</div>
<div class=“zxm-preview-carousel“ id=“zz-preview-carousel“>
<div class=“zxm-preview-track“ data-preview-track=““>
<article class=“zxm-target-preview is-active“ data-preview-target=“verschluss“>
<div aria-label=“Live-Vorschau der Lasergravur auf dem ZISANO Verschluss“ class=“zxm-photo-preview zxm-photo-preview–verschluss“>
<img alt=“ZISANO Metall-Verschluss für die Gravurvorschau“ decoding=“async“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/patent.jpg“/>
<span class=“zxm-preview-chip“>ARMBAND · LIVE</span>
<img alt=““ class=“zxm-bracelet-zodiac-preview“ decoding=“async“ hidden=““ id=“zz-bracelet-zodiac-preview“/>
<div aria-hidden=“true“ class=“zxm-engraving-zone“></div>
</div>
<p>Feine Gravur auf dem Verschluss – zurückhaltend, präzise und passend zur Elegance- oder Lifestyle-Serie.</p>
</article>
<article class=“zxm-target-preview“ data-preview-target=“anhanger“>
<div aria-label=“Live-Vorschau der Gravur auf der Rückseite des ZISANO Anhängers“ class=“zxm-photo-preview zxm-photo-preview–anhanger“>
<img alt=“ZISANO Anhänger Gold Rückseite für Gravurvorschau“ decoding=“async“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/anhanger_gold_back.png“/>
<span class=“zxm-preview-chip“>ANHÄNGER · RÜCKSEITE</span>
<img alt=““ class=“zxm-pendant-zodiac-preview“ decoding=“async“ hidden=““ id=“zz-pendant-zodiac-preview“/>
<div aria-hidden=“true“ class=“zxm-engraving-zone zxm-engraving-zone–anhanger“></div>
</div>
<p>Die Gravur liegt auf der Rückseite des ZISANO Anhängers / Chip-Halters und wird in der Vorschau bewusst etwas heller dargestellt.</p>
</article>
<article class=“zxm-target-preview“ data-preview-target=“flasche“>
<div aria-label=“Live-Vorschau der Gravur auf der ZISANO Flasche“ class=“zxm-photo-preview zxm-photo-preview–flasche“>
<img alt=“ZISANO Flasche für Gravurvorschau“ decoding=“async“ loading=“lazy“ src=“https://zisano.at/wp-content/uploads/2026/08/flasche_gravur.png“/>
<span class=“zxm-preview-chip“>FLASCHE · LARGE ZODIAC</span>
<img alt=““ class=“zxm-zodiac-artwork-preview“ decoding=“async“ hidden=““ id=“zz-zodiac-artwork-preview“/>
<span aria-hidden=“true“ class=“zxm-bottle-artwork-layer“ id=“zz-bottle-artwork-layer“></span>
<div aria-hidden=“true“ class=“zxm-engraving-zone zxm-engraving-zone–flasche“></div>
</div>
<p>Für die Flasche kann das Zodiac-Motiv deutlich größer erscheinen. Die späteren stilisierten PNGs werden automatisch an dieser Stelle dargestellt.</p>
</article>
</div>
<div class=“zxm-photo-engraving zxm-photo-engraving–v4″ data-engraving=“♌“ id=“zz-engraving-preview“>♌</div>
</div></div>
</aside>
<section class=“zxm-builder-summary zxm-builder-summary–strip“>
<div class=“zxm-confirm-section-head“>
<div class=“zxm-card-step“><span>02</span><strong>Auswahl bestätigen</strong></div>
</div>
<div class=“zxm-summary-list“>
<div class=“zxm-summary-item“><span>PRODUKTTYP</span><strong id=“zz-summary-target“>Armband · Verschluss</strong></div>
<div class=“zxm-summary-item“><span>GRAVURART</span><strong id=“zz-summary-type“>Sternzeichen</strong></div>
<div class=“zxm-summary-item“><span>DEIN MOTIV</span><strong id=“zz-summary-value“>♌ · Löwe</strong></div>
</div>
<div class=“zxm-confirm-action-row“>
<div class=“zxm-confirm-guide“><i aria-hidden=“true“>!</i><span><strong>Bitte bestätige deine Auswahl.</strong><small>Erst danach wird die Produktauswahl freigeschaltet.</small></span></div>
<button class=“zxm-order-button“ id=“zz-confirm-engraving“ type=“button“>Diese Gravur bestätigen</button>
</div>
<div aria-live=“polite“ class=“zxm-confirmed-targets“ id=“zz-confirmed-targets“></div>
<p class=“zxm-order-disclaimer“>Du kannst anschließend einen weiteren Gravurträger auswählen und eine zweite Konfiguration hinzufügen.</p>
</section>
</div>
<section aria-labelledby=“zz-product-choice-title“ class=“zxm-product-choice is-locked“ id=“zz-engraving-products“>
<div class=“zxm-product-choice__head“>
<div>
<span class=“zxm-kicker-mini“>03 · PRODUKT(E) AUSWÄHLEN</span>
<h3 id=“zz-product-choice-title“>Wähle ein oder mehrere ZISANO Produkte.</h3>
<p>Die Produktauswahl passt sich automatisch an den aktuellen Gravurträger an. Bereits ausgewählte Produkte bleiben erhalten, sodass du Armband, Anhänger und Flasche in einer Geschenk-Konfiguration kombinieren kannst.</p>
</div>
<div class=“zxm-product-lock“ id=“zz-product-lock“><i>✦</i><span>Zuerst deine Auswahl bestätigen</span></div>
</div>
<div aria-label=“Gravierbare Produktgruppen“ class=“zxm-product-category-tabs zxm-product-category-tabs–v4″ role=“tablist“>
<button class=“is-active“ data-product-target-filter=“verschluss“ type=“button“>Armbänder</button>
<button data-product-target-filter=“anhanger“ type=“button“>Anhänger</button>
<button data-product-target-filter=“flasche“ type=“button“>Flasche</button>
<button data-product-target-filter=“selected“ type=“button“>Ausgewählt <b id=“zz-selected-count“>0</b></button>
</div>
<div class=“zxm-product-slider-shell“>
<button aria-label=“Vorherige Produkte“ class=“zxm-product-slider-arrow zxm-product-slider-arrow–prev“ data-product-prev=““ type=“button“>‹</button>
<div class=“zxm-engraving-product-track“ id=“zz-engraving-product-track“>
<div class=“zxm-product-loading“><i></i><span>Gravierbare ZISANO Produkte werden geladen …</span></div>
</div>
<button aria-label=“Nächste Produkte“ class=“zxm-product-slider-arrow zxm-product-slider-arrow–next“ data-product-next=““ type=“button“>›</button>
</div>
<div class=“zxm-selected-basket“ id=“zz-selected-basket“>
<div><span class=“zxm-kicker-mini“>DEINE AUSWAHL</span><strong id=“zz-selected-summary“>Noch kein Produkt ausgewählt</strong></div>
<button id=“zz-open-selected“ type=“button“>Zum Chip-Bundle ↓</button>
</div>
<!– CHIP + ANHÄNGER BUNDLE –>
<details class=“zxm-bonuses“><summary><span><small>OPTIONAL</small> Bonus & Geschenkoptionen</span><strong>Chip-Bundle + Zodiac-Untersetzer</strong></summary><div class=“zxm-bonuses__content“><section aria-labelledby=“zz-chip-bundle-title“ class=“zxm-chip-bundle“ id=“zz-chip-bundle“>
<div aria-hidden=“true“ class=“zxm-chip-bundle__media“></div>
<div class=“zxm-chip-bundle__content“>
<span class=“zxm-chip-bundle__eyebrow“>ZISANO CHIP BUNDLE</span>
<h4 id=“zz-chip-bundle-title“>Mach deinen Anhänger komplett.</h4>
<p>Der Anhänger ist dein eleganter Chip-Halter. Wenn du <strong>Anhänger + ZISANO Chip</strong> gemeinsam wählst, bekommst du eine <strong>ZISANO Aqua Vivas Botelo im Wert von 39,90 € GRATIS</strong> dazu.</p>
<div class=“zxm-chip-bundle__gift“ id=“zz-chip-gift-status“>
<img alt=“ZISANO Aqua Vivas Botelo“ class=“zxm-chip-bundle__gift-img“ src=“https://zisano.at/wp-content/uploads/2020/11/flasche_zisano.png“/>
<div>
<small>BUNDLE-GESCHENK</small>
<strong>ZISANO Aqua Vivas Botelo · GRATIS</strong>
<span><b>Wert 39,90 €</b> · aktiviert sich automatisch bei Anhänger + Chip.</span>
</div>
</div>
<div class=“zxm-chip-bundle__meta“>
<span id=“zz-chip-price“>ZISANO Chip wird geladen …</span>
<button aria-pressed=“false“ id=“zz-chip-toggle“ type=“button“><span class=“zxm-chip-toggle-check“>✓</span><span class=“zxm-chip-toggle-text“>Chip auswählen</span></button>
</div>
</div>
</section><section aria-labelledby=“zz-birthday-title“ class=“zxm-birthday-gift“ id=“zz-birthday-gift“>
<div class=“zxm-birthday-super-title“><span>HOL DIR ZISANO GESCHENK</span><i aria-hidden=“true“>✦</i></div>
<div class=“zxm-birthday-gift__intro“>
<div class=“zxm-birthday-kicker“>
<span class=“zxm-birthday-step“>04 · GRATIS ZODIAC GESCHENK</span>
<span class=“zxm-birthday-optional“>OPTIONAL</span>
</div>
<h4 id=“zz-birthday-title“>Dein Sternzeichen für zuhause.</h4>
<p>Trag dein Geburtsdatum ein und wir legen deiner Bestellung <strong>kostenlos einen persönlichen Sternzeichen-Untersetzer</strong> aus nachhaltigem Naturkautschuk bei.</p>
</div>
<div class=“zxm-birthday-gift__form“>
<label for=“zz-birthdate“>Geburtsdatum <span class=“zxm-inline-optional“>optional</span></label>
<div class=“zxm-birthdate-control“>
<input autocomplete=“bday“ id=“zz-birthdate“ name=“zisano_birthdate“ type=“date“/>
<span class=“zxm-birthdate-gift-badge“>GRATIS</span>
</div>
<small class=“zxm-birthdate-help“><strong>Kein Pflichtfeld.</strong> Nur wenn du den Gratis-Untersetzer möchtest, brauchen wir dein Geburtsdatum zur Zuordnung deines Sternzeichens.</small>
<label class=“zxm-marketing-consent“ for=“zz-birthday-marketing“>
<input id=“zz-birthday-marketing“ name=“zisano_birthday_marketing“ type=“checkbox“ value=“1″/>
<span><strong>Optional: Geburtstags-News & persönliche Angebote</strong><small>Ich stimme zu, dass mein Geburtsdatum künftig für personalisierte Marketing-Kommunikation, z. B. Geburtstagsgrüße und passende Angebote, verwendet werden darf. Die Einwilligung ist freiwillig und jederzeit widerrufbar.</small></span>
</label>
<div aria-live=“polite“ class=“zxm-birthday-status“ id=“zz-birthday-status“></div>
</div>
</section></div></details>
<div aria-hidden=“true“ class=“zxm-gift-color-modal“ hidden=““ id=“zz-gift-color-modal“>
<div class=“zxm-gift-color-modal__backdrop“ data-gift-color-close=““></div>
<div aria-labelledby=“zz-gift-color-title“ aria-modal=“true“ class=“zxm-gift-color-modal__dialog“ role=“dialog“>
<button aria-label=“Schließen“ class=“zxm-gift-color-modal__close“ data-gift-color-close=““ type=“button“>×</button>
<span class=“zxm-gift-color-modal__eyebrow“>GRATIS BUNDLE-GESCHENK</span>
<h4 id=“zz-gift-color-title“>Welche Botelo-Farbe möchtest du?</h4>
<p>Deine <strong>ZISANO Aqua Vivas Botelo im Wert von 39,90 €</strong> ist bei Anhänger + Chip gratis dabei.</p>
<div aria-label=“Botelo Farbe wählen“ class=“zxm-gift-color-swatches“ id=“zz-gift-color-swatches“>
<button aria-label=“Blau“ data-gift-color=“Blau“ type=“button“><i class=“is-blue“></i><span>Blau</span></button>
<button aria-label=“Grün“ data-gift-color=“Grün“ type=“button“><i class=“is-green“></i><span>Grün</span></button>
<button aria-label=“Rosa“ data-gift-color=“Rosa“ type=“button“><i class=“is-pink“></i><span>Rosa</span></button>
</div>
<small class=“zxm-gift-color-modal__hint“>Die Farben werden zusätzlich vom Botelo-Produkt geladen; Blau, Grün und Rosa dienen als sicherer Fallback.</small>
</div>
</div>

<section aria-labelledby=“zz-order-summary-title“ class=“zxm-order-summary-card“ id=“zz-order-summary-card“>
<div class=“zxm-order-summary-card__head“>
<div>
<span class=“zxm-kicker-mini“>DEINE BESTELLUNG</span>
<h4 id=“zz-order-summary-title“>Alles auf einen Blick.</h4>
</div>
<span class=“zxm-order-summary-badge“ id=“zz-order-summary-count“>0 Produkte</span>
</div>
<div class=“zxm-order-summary-lines“ id=“zz-order-summary-lines“>
<div class=“zxm-order-summary-empty“>Wähle oben mindestens ein Produkt aus.</div>
</div>
<div class=“zxm-order-summary-totals“>
<div><span>Produkte</span><strong id=“zz-order-products-total“>€ 0,00</strong></div>
<div><span>Gravur</span><strong id=“zz-order-engraving-total“>€ 0,00</strong></div>
<div class=“zxm-order-chip-row“ hidden=““><span>ZISANO Chip</span><strong id=“zz-order-chip-total“>€ 0,00</strong></div>
<div class=“zxm-order-gift-row“ hidden=““><span>ZISANO Aqua Vivas Botelo <small>Wert 39,90 €</small></span><strong>GRATIS</strong></div>
<div class=“zxm-order-coaster-row“ hidden=““><span>Persönlicher Zodiac-Untersetzer</span><strong>GRATIS</strong></div>
<div class=“zxm-order-grand-total“><span>Gesamt</span><strong id=“zz-order-grand-total“>€ 0,00</strong></div>
</div>
<div class=“zxm-order-summary-actions“>
<button class=“zxm-order-summary-cart“ id=“zz-add-selection-cart“ type=“button“>Alles in den Warenkorb</button>
<button class=“zxm-order-summary-checkout“ id=“zz-add-selection-checkout“ type=“button“>Direkt zur Kasse <span>→</span></button>
</div>
<p class=“zxm-order-summary-note“ id=“zz-order-summary-note“>
Armbandgrößen wählst du direkt in der Produktkarte. Größe und Gravur werden gemeinsam übernommen – „Direkt zur Kasse“ führt dich ohne Umweg direkt zum Checkout.
</p>
</section>
<div class=“zxm-product-choice__note“><i>i</i><span>Deine Produktauswahl und Gravur-Konfiguration bleiben während des Bestellvorgangs gespeichert.</span></div>
</section>
</div>
</div>
</div>
</section><section class=“zxm-match-view zxm-tool-panel“ data-zz-panel=“sternzeichen“ id=“finder“>
<div class=“zxm-shell“>
<div class=“zxm-section-head“>
<span class=“zxm-kicker“>DEIN ZEICHEN · DEINE DYNAMIK</span>
<h2>Welche Energie begleitet dich?</h2>
<p>Wähle deinen Geburtszeitraum und entdecke dein persönliches Profil.</p>
</div>
<div class=“zxm-zodiac-system“>
<input checked=““ class=“zxm-zodiac-radio“ id=“zodiac-widder“ name=“zodiac“ type=“radio“>
<input class=“zxm-zodiac-radio“ id=“zodiac-stier“ name=“zodiac“ type=“radio“>
<input class=“zxm-zodiac-radio“ id=“zodiac-zwillinge“ name=“zodiac“ type=“radio“>
<input class=“zxm-zodiac-radio“ id=“zodiac-krebs“ name=“zodiac“ type=“radio“>
<input class=“zxm-zodiac-radio“ id=“zodiac-loewe“ name=“zodiac“ type=“radio“>
<input class=“zxm-zodiac-radio“ id=“zodiac-jungfrau“ name=“zodiac“ type=“radio“>
<input class=“zxm-zodiac-radio“ id=“zodiac-waage“ name=“zodiac“ type=“radio“/>
<input class=“zxm-zodiac-radio“ id=“zodiac-skorpion“ name=“zodiac“ type=“radio“/>
<input class=“zxm-zodiac-radio“ id=“zodiac-schuetze“ name=“zodiac“ type=“radio“/>
<input class=“zxm-zodiac-radio“ id=“zodiac-steinbock“ name=“zodiac“ type=“radio“/>
<input class=“zxm-zodiac-radio“ id=“zodiac-wassermann“ name=“zodiac“ type=“radio“/>
<input class=“zxm-zodiac-radio“ id=“zodiac-fische“ name=“zodiac“ type=“radio“/>
<div class=“zxm-sign-grid“>
<label class=“zxm-sign-card zxm-sign-card–widder“ for=“zodiac-widder“>
<span class=“zxm-sign-symbol“>♈</span>
<span class=“zxm-sign-copy“>
<strong>Widder</strong>
<small>21. März – 20. April</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–stier“ for=“zodiac-stier“>
<span class=“zxm-sign-symbol“>♉</span>
<span class=“zxm-sign-copy“>
<strong>Stier</strong>
<small>21. April – 20. Mai</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–zwillinge“ for=“zodiac-zwillinge“>
<span class=“zxm-sign-symbol“>♊</span>
<span class=“zxm-sign-copy“>
<strong>Zwillinge</strong>
<small>21. Mai – 21. Juni</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–krebs“ for=“zodiac-krebs“>
<span class=“zxm-sign-symbol“>♋</span>
<span class=“zxm-sign-copy“>
<strong>Krebs</strong>
<small>22. Juni – 22. Juli</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–loewe“ for=“zodiac-loewe“>
<span class=“zxm-sign-symbol“>♌</span>
<span class=“zxm-sign-copy“>
<strong>Löwe</strong>
<small>23. Juli – 23. August</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–jungfrau“ for=“zodiac-jungfrau“>
<span class=“zxm-sign-symbol“>♍</span>
<span class=“zxm-sign-copy“>
<strong>Jungfrau</strong>
<small>24. August – 23. September</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–waage“ for=“zodiac-waage“>
<span class=“zxm-sign-symbol“>♎</span>
<span class=“zxm-sign-copy“>
<strong>Waage</strong>
<small>24. September – 23. Oktober</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–skorpion“ for=“zodiac-skorpion“>
<span class=“zxm-sign-symbol“>♏</span>
<span class=“zxm-sign-copy“>
<strong>Skorpion</strong>
<small>24. Oktober – 22. November</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–schuetze“ for=“zodiac-schuetze“>
<span class=“zxm-sign-symbol“>♐</span>
<span class=“zxm-sign-copy“>
<strong>Schütze</strong>
<small>23. November – 21. Dezember</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–steinbock“ for=“zodiac-steinbock“>
<span class=“zxm-sign-symbol“>♑</span>
<span class=“zxm-sign-copy“>
<strong>Steinbock</strong>
<small>22. Dezember – 20. Januar</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–wassermann“ for=“zodiac-wassermann“>
<span class=“zxm-sign-symbol“>♒</span>
<span class=“zxm-sign-copy“>
<strong>Wassermann</strong>
<small>21. Januar – 19. Februar</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
<label class=“zxm-sign-card zxm-sign-card–fische“ for=“zodiac-fische“>
<span class=“zxm-sign-symbol“>♓</span>
<span class=“zxm-sign-copy“>
<strong>Fische</strong>
<small>20. Februar – 20. März</small>
</span>
<span aria-hidden=“true“ class=“zxm-sign-arrow“><i>›</i></span>
</label>
</div>
<div class=“zxm-match-results“>
<article class=“zxm-profile-panel zxm-profile-panel–widder“ style=“–accent:#aa4bca;–accent-dark:#5d206d;–accent-light:#eed0f8″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♈</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Widder</h3>
<p>21. März – 20. April</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Kraft beginnt dort, wo andere noch überlegen.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Mut, Bewegung und die Energie des Neubeginns</h4>
<p>Als Widder besitzt du eine natürliche Vorwärtsenergie. Du handelst direkt, vertraust auf deinen ersten Impuls und bringst Bewegung in Situationen, die anderen festgefahren erscheinen.</p>
<p>Hinter deiner entschlossenen Art steckt ein starkes Bedürfnis nach echtem Fortschritt. Deine Entwicklung entsteht, wenn du deiner Kraft eine klare Richtung gibst und auch ruhige Phasen bewusst zulässt.</p>
<div class=“zxm-tag-row“><span>Mutig</span><span>Entschlossen</span><span>Dynamisch</span><span>Inspirierend</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>△</div>
<div><strong>Feuer</strong><p>Tatkraft, Leidenschaft und unmittelbare Energie.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Karneol</strong><p>Wird symbolisch mit Mut, Motivation und Lebensfreude verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>♂</div>
<div><strong>Mars</strong><p>Steht symbolisch für Initiative und Durchsetzungskraft.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Kraftvolle Farben für deine dynamische Ausstrahlung</h4>
<p>Warme und intensive Töne spiegeln deinen Tatendrang und deine natürliche Präsenz wider.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#8c2347″></i><small>Bordeaux</small></div><div class=“zxm-swatch“><i style=“background:#d85b32″></i><small>Terrakotta</small></div><div class=“zxm-swatch“><i style=“background:#c88932″></i><small>Gold</small></div><div class=“zxm-swatch“><i style=“background:#4a173e“></i><small>Deep Plum</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“widder“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein ausdrucksstarkes Design für Menschen, die Bewegung, Selbstvertrauen und eine klare persönliche Präsenz verkörpern.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“widder“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–stier“ style=“–accent:#8f9f78;–accent-dark:#536143;–accent-light:#e7eedb“>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♉</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Stier</h3>
<p>21. April – 20. Mai</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Wahre Stärke zeigt sich in Ruhe, Beständigkeit und Vertrauen.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Tiefe Ruhe, Sinnlichkeit und verlässliche Stärke</h4>
<p>Als Stier besitzt du eine geerdete und ruhige Ausstrahlung. Du schätzt Qualität, Verlässlichkeit und Dinge, die ihren Wert langfristig bewahren.</p>
<p>Sobald du Vertrauen aufgebaut hast, entwickelst du eine außergewöhnliche Ausdauer und Loyalität. Deine Balance entsteht, wenn du Sicherheit bewahrst und trotzdem offen für sanfte Veränderungen bleibst.</p>
<div class=“zxm-tag-row“><span>Beständig</span><span>Loyal</span><span>Genussvoll</span><span>Geduldig</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>▽</div>
<div><strong>Erde</strong><p>Stabilität, Erdung und tragende innere Kraft.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Rosenquarz</strong><p>Wird symbolisch mit Harmonie, Selbstliebe und emotionaler Ruhe verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>♀</div>
<div><strong>Venus</strong><p>Steht symbolisch für Schönheit, Genuss und Harmonie.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Natürliche Farben für deine ruhige Präsenz</h4>
<p>Erdige Grün-, Rosé- und Cremetöne passen zu deiner beständigen und sinnlichen Energie.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#748263″></i><small>Salbeigrün</small></div><div class=“zxm-swatch“><i style=“background:#c9999d“></i><small>Altrosa</small></div><div class=“zxm-swatch“><i style=“background:#b69b74″></i><small>Sand</small></div><div class=“zxm-swatch“><i style=“background:#594d43″></i><small>Espresso</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“stier“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein harmonisches Design für Menschen, die Ruhe, Beständigkeit und zeitlose Ästhetik schätzen.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“stier“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–zwillinge“ style=“–accent:#78a9c0;–accent-dark:#416a7e;–accent-light:#dceef5″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♊</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Zwillinge</h3>
<p>21. Mai – 21. Juni</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Neugier öffnet Türen, die andere noch nicht sehen.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Leichtigkeit, Ideenreichtum und lebendige Kommunikation</h4>
<p>Du besitzt einen wachen, beweglichen Geist und liebst neue Perspektiven. Deine kommunikative Art verbindet Menschen und bringt Leichtigkeit in Gruppen.</p>
<p>Deine Vielseitigkeit ist eine Stärke. Deine Balance entsteht, wenn du deine vielen Ideen bündelst und dir bewusst Zeit für Tiefe und Konzentration nimmst.</p>
<div class=“zxm-tag-row“><span>Neugierig</span><span>Kommunikativ</span><span>Flexibel</span><span>Ideenreich</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>△</div>
<div><strong>Luft</strong><p>Gedanken, Kommunikation und geistige Beweglichkeit.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Citrin</strong><p>Wird symbolisch mit Klarheit, Optimismus und kreativer Energie verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>☿</div>
<div><strong>Merkur</strong><p>Steht symbolisch für Kommunikation, Lernen und geistiges Tempo.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Frische Farben für deine vielseitige Energie</h4>
<p>Helle Gelb-, Blau- und Silbertöne spiegeln deinen offenen und beweglichen Geist.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#d5ad3a“></i><small>Sonnengelb</small></div><div class=“zxm-swatch“><i style=“background:#71a7bd“></i><small>Sky Blue</small></div><div class=“zxm-swatch“><i style=“background:#d9d9db“></i><small>Silber</small></div><div class=“zxm-swatch“><i style=“background:#70669c“></i><small>Lavendel</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“zwillinge“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein flexibles Design für Menschen, die Abwechslung lieben und ihren Stil gern neu interpretieren.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“zwillinge“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–krebs“ style=“–accent:#a58ab6;–accent-dark:#6c5379;–accent-light:#eee4f2″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♋</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Krebs</h3>
<p>22. Juni – 22. Juli</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Sensibilität ist keine Schwäche, sondern deine feinste Stärke.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Intuition, Verbundenheit und emotionale Tiefe</h4>
<p>Du besitzt ein feines Gespür für Menschen und Stimmungen. Nähe, Vertrauen und Geborgenheit spielen für dich eine besondere Rolle.</p>
<p>Deine innere Welt ist reich und vielschichtig. Deine Balance entsteht, wenn du für andere da bist, ohne deine eigenen emotionalen Grenzen aus den Augen zu verlieren.</p>
<div class=“zxm-tag-row“><span>Einfühlsam</span><span>Fürsorglich</span><span>Intuitiv</span><span>Loyal</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>▽</div>
<div><strong>Wasser</strong><p>Gefühl, Intuition und tiefe emotionale Verbindung.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Mondstein</strong><p>Wird symbolisch mit Intuition, emotionaler Balance und innerer Ruhe verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>☾</div>
<div><strong>Mond</strong><p>Steht symbolisch für Gefühle, Geborgenheit und innere Wahrnehmung.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Sanfte Farben für deine intuitive Ausstrahlung</h4>
<p>Perlmutt, Flieder und weiche Blautöne spiegeln deine sensible und beschützende Seite.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#d9d4d8″></i><small>Perlmutt</small></div><div class=“zxm-swatch“><i style=“background:#bba9c8″></i><small>Flieder</small></div><div class=“zxm-swatch“><i style=“background:#8ca8b7″></i><small>Mondblau</small></div><div class=“zxm-swatch“><i style=“background:#77627c“></i><small>Mauve</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“krebs“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein sanftes Design für Menschen, die Intuition, emotionale Tiefe und ruhige Eleganz miteinander verbinden.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“krebs“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–loewe“ style=“–accent:#c39237;–accent-dark:#75501d;–accent-light:#f2dfac“>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♌</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Löwe</h3>
<p>23. Juli – 23. August</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Du bist nicht hier, um dich kleiner zu machen, als du bist.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Strahlkraft, Kreativität und ein großes Herz</h4>
<p>Du besitzt eine natürliche Präsenz und strahlst Wärme, Selbstvertrauen und Lebensfreude aus. Deine Energie motiviert andere und schafft besondere Momente.</p>
<p>Hinter deiner starken Ausstrahlung steckt ein großzügiges Herz. Deine Balance entsteht, wenn du deine Strahlkraft mit echter Offenheit verbindest und auch anderen Raum zum Leuchten gibst.</p>
<div class=“zxm-tag-row“><span>Charismatisch</span><span>Großzügig</span><span>Kreativ</span><span>Selbstbewusst</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>△</div>
<div><strong>Feuer</strong><p>Lebensfreude, Ausdruckskraft und kreative Energie.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Tigerauge</strong><p>Wird symbolisch mit Fokus, Selbstvertrauen und innerer Stärke verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>☉</div>
<div><strong>Sonne</strong><p>Steht symbolisch für Identität, Vitalität und Strahlkraft.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Königliche Farben für deine natürliche Präsenz</h4>
<p>Gold, Bernstein und warme Farben unterstreichen deine charismatische Ausstrahlung.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#c89b37″></i><small>Gold</small></div><div class=“zxm-swatch“><i style=“background:#b76b28″></i><small>Bernstein</small></div><div class=“zxm-swatch“><i style=“background:#783546″></i><small>Royal Red</small></div><div class=“zxm-swatch“><i style=“background:#472344″></i><small>Royal Plum</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“loewe“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein elegantes Statement für Persönlichkeiten mit Präsenz, Qualität und souveränem Stil.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“loewe“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–jungfrau“ style=“–accent:#899982;–accent-dark:#566351;–accent-light:#e4ebe0″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♍</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Jungfrau</h3>
<p>24. August – 23. September</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Klarheit verwandelt das Komplexe in etwas Wertvolles.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Klarheit, Feingefühl und intelligente Struktur</h4>
<p>Du erkennst Details und Zusammenhänge schnell und bringst Struktur in komplexe Situationen. Deine Aufmerksamkeit und Verlässlichkeit geben anderen Orientierung.</p>
<p>Dein hoher Anspruch ist eine Stärke. Deine Entwicklung liegt darin, Präzision mit Selbstmitgefühl und Vertrauen in den Prozess zu verbinden.</p>
<div class=“zxm-tag-row“><span>Präzise</span><span>Aufmerksam</span><span>Verlässlich</span><span>Analytisch</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>▽</div>
<div><strong>Erde</strong><p>Ordnung, Verlässlichkeit und konzentrierte Stabilität.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Amazonit</strong><p>Wird symbolisch mit Ausgeglichenheit, Klarheit und Harmonie verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>☿</div>
<div><strong>Merkur</strong><p>Steht symbolisch für Analyse, Kommunikation und Präzision.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Klare Farben für deine feine Wahrnehmung</h4>
<p>Sanfte Grün-, Sand- und Grautöne passen zu deiner ruhigen und präzisen Art.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#899982″></i><small>Eukalyptus</small></div><div class=“zxm-swatch“><i style=“background:#c7b9a4″></i><small>Sand</small></div><div class=“zxm-swatch“><i style=“background:#a7aaa5″></i><small>Stone</small></div><div class=“zxm-swatch“><i style=“background:#665e59″></i><small>Taupe</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“jungfrau“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein minimalistisches Design für Menschen, die Präzision, Natürlichkeit und zeitlose Ästhetik bevorzugen.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“jungfrau“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–waage“ style=“–accent:#b786a8;–accent-dark:#744f6b;–accent-light:#f0e0eb“>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♎</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Waage</h3>
<p>24. September – 23. Oktober</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Schönheit liegt in der Verbindung von Gegensätzen.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Harmonie, Ästhetik und verbindende Leichtigkeit</h4>
<p>Du besitzt ein feines Gespür für Schönheit, Atmosphäre und zwischenmenschliche Dynamiken. Du erkennst unterschiedliche Perspektiven und möchtest Balance schaffen.</p>
<p>Deine diplomatische Art ist eine besondere Stärke. Deine Balance entsteht, wenn du Harmonie nicht durch Anpassung, sondern durch ehrliche und klare Verbindung erschaffst.</p>
<div class=“zxm-tag-row“><span>Harmonisch</span><span>Stilbewusst</span><span>Diplomatisch</span><span>Charmant</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>△</div>
<div><strong>Luft</strong><p>Beziehung, Leichtigkeit und harmonischer Austausch.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Rosenquarz</strong><p>Wird symbolisch mit Liebe, Harmonie und emotionaler Ausgeglichenheit verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>♀</div>
<div><strong>Venus</strong><p>Steht symbolisch für Schönheit, Beziehung und Ästhetik.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Elegante Farben für deine harmonische Ausstrahlung</h4>
<p>Rosé, Flieder, Creme und Silber passen zu deiner stilvollen und verbindenden Persönlichkeit.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#cc9fae“></i><small>Dusty Rose</small></div><div class=“zxm-swatch“><i style=“background:#aa93b5″></i><small>Lavendel</small></div><div class=“zxm-swatch“><i style=“background:#ddd2c7″></i><small>Creme</small></div><div class=“zxm-swatch“><i style=“background:#aeb0b4″></i><small>Silber</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“waage“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein fein abgestimmtes Design für Menschen, die Harmonie, Ästhetik und kultivierte Eleganz verbinden.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“waage“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–skorpion“ style=“–accent:#842849;–accent-dark:#481326;–accent-light:#edc8d5″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♏</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Skorpion</h3>
<p>24. Oktober – 22. November</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Tiefe erkennt Wahrheiten, die an der Oberfläche verborgen bleiben.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Intensität, Transformation und magnetische Tiefe</h4>
<p>Du besitzt eine intensive und oft geheimnisvolle Ausstrahlung. Du gibst dich selten mit oberflächlichen Antworten zufrieden und möchtest verstehen, was Menschen im Innersten bewegt.</p>
<p>Deine Loyalität und Willenskraft sind außergewöhnlich. Deine Balance entsteht, wenn du Kontrolle loslassen und Nähe als einen Teil deiner Stärke betrachten kannst.</p>
<div class=“zxm-tag-row“><span>Tiefgründig</span><span>Willensstark</span><span>Loyal</span><span>Intuitiv</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>▽</div>
<div><strong>Wasser</strong><p>Tiefe Gefühle, Intuition und transformative Kraft.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Obsidian</strong><p>Wird symbolisch mit Schutz, Klarheit und innerer Transformation verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>♇</div>
<div><strong>Pluto</strong><p>Steht symbolisch für Wandel, Tiefe und verborgene Kraft.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Intensive Farben für deine magnetische Energie</h4>
<p>Dunkles Bordeaux, Schwarz und Aubergine spiegeln deine kraftvolle und geheimnisvolle Seite.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#58192f“></i><small>Bordeaux</small></div><div class=“zxm-swatch“><i style=“background:#1d171c“></i><small>Obsidian</small></div><div class=“zxm-swatch“><i style=“background:#4e264f“></i><small>Aubergine</small></div><div class=“zxm-swatch“><i style=“background:#8d2435″></i><small>Deep Red</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“skorpion“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein intensives Design für Persönlichkeiten, die Tiefe, Stärke und geheimnisvolle Eleganz verkörpern.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“skorpion“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–schuetze“ style=“–accent:#438f9c;–accent-dark:#245c65;–accent-light:#d6eef0″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♐</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Schütze</h3>
<p>23. November – 21. Dezember</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Dein Weg entsteht dort, wo deine Neugier größer ist als deine Angst.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Freiheit, Optimismus und grenzenlose Entdeckerenergie</h4>
<p>Du besitzt eine offene und zukunftsorientierte Ausstrahlung. Du möchtest Horizonte erweitern, Erfahrungen sammeln und verstehen, was jenseits des Bekannten liegt.</p>
<p>Dein Freiheitsbedürfnis ist ein zentraler Teil deiner Persönlichkeit. Deine Balance entsteht, wenn du Freiheit mit einer bewusst gewählten Richtung verbindest.</p>
<div class=“zxm-tag-row“><span>Optimistisch</span><span>Abenteuerlustig</span><span>Offen</span><span>Inspirierend</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>△</div>
<div><strong>Feuer</strong><p>Begeisterung, Wachstum und lebendige Entdeckerenergie.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Türkis</strong><p>Wird symbolisch mit Schutz, Kommunikation und innerer Freiheit verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>♃</div>
<div><strong>Jupiter</strong><p>Steht symbolisch für Wachstum, Optimismus und Erweiterung.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Lebendige Farben für deine freie Persönlichkeit</h4>
<p>Türkis, Orange, Violett und Blau spiegeln deine offene und neugierige Energie.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#318f98″></i><small>Türkis</small></div><div class=“zxm-swatch“><i style=“background:#d27735″></i><small>Orange</small></div><div class=“zxm-swatch“><i style=“background:#705494″></i><small>Violett</small></div><div class=“zxm-swatch“><i style=“background:#477b9c“></i><small>Horizon Blue</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“schuetze“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein lebendiges Design für Menschen, die Bewegung und Abenteuerlust sichtbar in ihren Alltag tragen.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“schuetze“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–steinbock“ style=“–accent:#686b6f;–accent-dark:#343639;–accent-light:#e1e2e4″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♑</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Steinbock</h3>
<p>22. Dezember – 20. Januar</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Ausdauer baut Wege, auf denen andere später sicher gehen.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Disziplin, Substanz und leise Souveränität</h4>
<p>Du besitzt eine ruhige und kontrollierte Stärke. Du setzt dir Ziele, denkst langfristig und bist bereit, Verantwortung zu übernehmen.</p>
<p>Du möchtest Ergebnisse schaffen, die Bestand haben. Deine Balance entsteht, wenn du Struktur und Verantwortung mit Freude, Erholung und emotionaler Offenheit verbindest.</p>
<div class=“zxm-tag-row“><span>Diszipliniert</span><span>Zielstrebig</span><span>Verlässlich</span><span>Souverän</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>▽</div>
<div><strong>Erde</strong><p>Ausdauer, Struktur und langfristige Stabilität.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Onyx</strong><p>Wird symbolisch mit Stabilität, Konzentration und innerer Stärke verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>♄</div>
<div><strong>Saturn</strong><p>Steht symbolisch für Verantwortung, Struktur und Reife.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Souveräne Farben für deine beständige Kraft</h4>
<p>Anthrazit, Graphit, Dunkelgrün und Bronze passen zu deinem kontrollierten und hochwertigen Stil.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#4b4d50″></i><small>Graphit</small></div><div class=“zxm-swatch“><i style=“background:#252629″></i><small>Anthrazit</small></div><div class=“zxm-swatch“><i style=“background:#4d5c4f“></i><small>Forest</small></div><div class=“zxm-swatch“><i style=“background:#8e6c45″></i><small>Bronze</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“steinbock“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein geradliniges Design für Menschen, die Understatement, Verlässlichkeit und langlebige Qualität schätzen.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“steinbock“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–wassermann“ style=“–accent:#477faf;–accent-dark:#285274;–accent-light:#dbeafa“>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♒</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Wassermann</h3>
<p>21. Januar – 19. Februar</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Andersartigkeit ist oft der Beginn einer neuen Zukunft.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Originalität, Freiheit und visionäres Denken</h4>
<p>Du besitzt einen unabhängigen und zukunftsorientierten Geist. Du hinterfragst Gewohntes und fühlst dich von ungewöhnlichen Ideen und innovativen Lösungen angezogen.</p>
<p>Deine Individualität ist eine große Stärke. Deine Balance entsteht, wenn du Freiheit und echte emotionale Verbindung miteinander verbindest.</p>
<div class=“zxm-tag-row“><span>Innovativ</span><span>Unabhängig</span><span>Originell</span><span>Visionär</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>△</div>
<div><strong>Luft</strong><p>Ideenreichtum, Freiheit und visionäre Energie.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Amethyst</strong><p>Wird symbolisch mit Inspiration, Klarheit und geistiger Weite verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>⛢</div>
<div><strong>Uranus</strong><p>Steht symbolisch für Innovation, Freiheit und Veränderung.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Elektrische Farben für deine visionäre Energie</h4>
<p>Electric Blue, Violett, Silber und Aqua passen zu deiner modernen und unkonventionellen Persönlichkeit.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#347ca5″></i><small>Electric Blue</small></div><div class=“zxm-swatch“><i style=“background:#6651a3″></i><small>Cosmic Violet</small></div><div class=“zxm-swatch“><i style=“background:#b7bcc1″></i><small>Silber</small></div><div class=“zxm-swatch“><i style=“background:#45969d“></i><small>Aqua</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“wassermann“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Ein außergewöhnliches Design für Menschen, die Innovation lieben und ihre Individualität bewusst zeigen.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“wassermann“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
<article class=“zxm-profile-panel zxm-profile-panel–fische“ style=“–accent:#6d769f;–accent-dark:#454b72;–accent-light:#e4e5f2″>
<div class=“zxm-profile-head“>
<div class=“zxm-identity“>
<div class=“zxm-identity-symbol“>♓</div>
<div>
<span class=“zxm-kicker-mini“>DEIN STERNZEICHEN</span>
<h3>Fische</h3>
<p>20. Februar – 20. März</p>
</div>
</div>
<div class=“zxm-quote“>
<span class=“zxm-kicker-mini“>DEINE ZODIAC-BOTSCHAFT</span>
<blockquote>Deine Fantasie sieht Verbindungen, wo andere nur Grenzen erkennen.</blockquote>
</div>
</div>
<div class=“zxm-profile-grid“>
<section class=“zxm-surface zxm-personality“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHKEIT</span>
<h4>Fantasie, Mitgefühl und intuitive Tiefe</h4>
<p>Du besitzt eine besonders feine Wahrnehmung. Du spürst Stimmungen, Zwischentöne und emotionale Veränderungen häufig sehr schnell.</p>
<p>Deine Offenheit macht dich kreativ und einfühlsam. Deine Balance entsteht, wenn du deine Sensibilität schützt und deinen Träumen eine konkrete Form gibst.</p>
<div class=“zxm-tag-row“><span>Intuitiv</span><span>Kreativ</span><span>Mitfühlend</span><span>Fantasievoll</span></div>
</section>
<aside class=“zxm-detail-stack“>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN ELEMENT</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>▽</div>
<div><strong>Wasser</strong><p>Intuition, Fantasie und emotionale Verbundenheit.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN KRISTALL</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>◆</div>
<div><strong>Aquamarin</strong><p>Wird symbolisch mit Ruhe, Intuition und emotionaler Klarheit verbunden.</p></div>
</div>
</div>
<div class=“zxm-surface zxm-detail-card“>
<span class=“zxm-kicker-mini“>DEIN PLANET</span>
<div class=“zxm-detail-main“>
<div class=“zxm-detail-icon“>♆</div>
<div><strong>Neptun</strong><p>Steht symbolisch für Fantasie, Spiritualität und feine Wahrnehmung.</p></div>
</div>
</div>
</aside>
</div>
<section class=“zxm-surface zxm-palette-card“>
<div class=“zxm-palette-copy“>
<span class=“zxm-kicker-mini“>DEINE PERSÖNLICHE FARBWELT</span>
<h4>Fließende Farben für deine intuitive Welt</h4>
<p>Ocean Blue, Violett, Mint und Perlmutt spiegeln deine kreative und sensible Seite.</p>
</div>
<div class=“zxm-palette“><div class=“zxm-swatch“><i style=“background:#5f829d“></i><small>Ocean Blue</small></div><div class=“zxm-swatch“><i style=“background:#76659b“></i><small>Mystic Violet</small></div><div class=“zxm-swatch“><i style=“background:#8fbab4″></i><small>Sea Mint</small></div><div class=“zxm-swatch“><i style=“background:#c0b9ca“></i><small>Pearl Lilac</small></div></div>
</section>
<section class=“zxm-product-recommendations“ data-zodiac-products=“fische“><div class=“zxm-product-recommendations__head“><span class=“zxm-kicker-mini“>DEINE ZISANO MATCHES</span><h4>Passende Designs für deine Energie</h4><p>Eine verträumte Verbindung aus Blau und Violett für sensible, kreative und intuitive Persönlichkeiten.</p></div><div aria-live=“polite“ class=“zxm-product-grid“ data-product-grid=“fische“><div class=“zxm-product-loading“>Produkte werden geladen …</div></div></section>
</article>
</div><div class=“zxm-match-cta“><span>DEIN ZEICHEN GEFUNDEN?</span><strong>Mach daraus dein persönliches Weihnachtsgeschenk.</strong><button data-zz-jump-builder=““ type=“button“>Dieses Zeichen personalisieren <i>→</i></button></div>
</input></input></input></input></input></input></div>
</div>
</section><section class=“zxm-tool-panel zxm-explorer-section“ data-zz-panel=“explorer“ id=“astro-explorer“>
<div class=“zxm-shell“>
<div class=“zxm-explorer-shell“>
<div class=“zxm-explorer-header“>
<div>
<span class=“zxm-kicker“>DEINE KOSMISCHE LANDKARTE</span>
<h2>Entdecke mehr als nur dein Sternzeichen.</h2>
<p>Aszendent, Mondrhythmus und chinesisches Tierkreiszeichen in einer eleganten Zodiac Welt – ohne drei getrennte Bereiche.</p>
</div>
<div aria-hidden=“true“ class=“zxm-explorer-ornament“><span>✦</span><i>☾</i><b>龍</b></div>
<button class=“zxm-explorer-cta“ data-zz-jump-builder=““ type=“button“>Geschenk personalisieren →</button></div>
<div class=“zxm-campaign-banner zxm-xmas-bottom-banner zxm-xmas-explorer-banner“>
<div aria-hidden=“true“ class=“zxm-xmas-bottom-banner zxm-xmas-explorer-banner__media“>
<img alt=““ class=“zxm-xmas-bottom-banner zxm-xmas-explorer-banner__photo“ decoding=“async“ loading=“lazy“ src=“/wp-content/uploads/2026/08/main_banner_xmas2.webp“/>
</div>
<div class=“zxm-xmas-bottom-banner zxm-xmas-explorer-banner__content“>
<span>✦ CHRISTMAS ZODIAC EDITION ✦</span>
<h3>Schenke Persönlichkeit.<br/>Schenke etwas, das bleibt.</h3>
<p>Dein Zeichen, dein Motiv, dein ZISANO Design. Gestalte ein persönliches Geschenk mit individueller Gravur – exklusiv zur Weihnachtszeit.</p>
<div class=“zxm-xmas-bottom-banner zxm-xmas-explorer-banner__actions“>
<button data-zz-jump-builder=““ type=“button“>Jetzt personalisieren <i>→</i></button>
<small>LIMITIERTE CHRISTMAS EDITION</small>
</div>
</div>
</div>
<div aria-label=“Astro Explorer Bereiche“ class=“zxm-explorer-nav“ role=“tablist“>
<button aria-selected=“true“ class=“is-active“ data-zz-subtool=“aszendent“ role=“tab“ type=“button“><i>↑</i><span><small>GEBURTSMOMENT</small>Aszendent</span></button>
<button aria-selected=“false“ data-zz-subtool=“mond“ role=“tab“ type=“button“><i>☾</i><span><small>LUNAR CYCLE</small>Mondkalender</span></button>
<button aria-selected=“false“ data-zz-subtool=“chinesisch“ role=“tab“ type=“button“><i>龍</i><span><small>12 TIERZEICHEN</small>Chinesisches Horoskop</span></button>
</div>
<div class=“zxm-explorer-stage“>
<div class=“zxm-explorer-panel is-active“ data-zz-subpanel=“aszendent“ id=“aszendent-finder“>
<div class=“zxm-tool-grid zxm-tool-grid–explorer“>
<div class=“zxm-tool-intro“><span class=“zxm-kicker“>DEIN AUFTRETEN · DEINE WIRKUNG</span><h3>Entdecke deinen Aszendenten.</h3><p>Der Aszendent beschreibt in der Astrologie den Horizontpunkt zum Moment deiner Geburt. Dafür werden Datum, genaue Uhrzeit und Geburtsort benötigt.</p><div class=“zxm-tool-badges“><span>LOKALE BERECHNUNG</span><span>KEIN LOGIN</span><span>SOFORTIGES ERGEBNIS</span></div></div>
<div class=“zxm-calculator zxm-calculator–asc“><div class=“zxm-calc-title“><strong>Aszendent Finder</strong><span>GEBURTSDATEN</span></div>
<div class=“zxm-form-grid“>
<div class=“zxm-field“><label for=“zz-asc-date“>Geburtsdatum</label><input id=“zz-asc-date“ type=“date“/></div>
<div class=“zxm-field“><label for=“zz-asc-time“>Genaue Uhrzeit</label><input id=“zz-asc-time“ type=“time“ value=“12:00″/></div>
<div class=“zxm-field“><label for=“zz-asc-country“>Land</label><select id=“zz-asc-country“>
<option value=“AT“>Österreich</option><option value=“DE“>Deutschland</option><option value=“HU“>Ungarn</option><option value=“CH“>Schweiz</option><option value=“IT“>Italien</option><option value=“HR“>Kroatien</option><option value=“SI“>Slowenien</option><option value=“SK“>Slowakei</option><option value=“CZ“>Tschechien</option><option value=“PL“>Polen</option><option value=“RO“>Rumänien</option><option value=“RS“>Serbien</option><option value=“BA“>Bosnien & Herzegowina</option><option value=“FR“>Frankreich</option><option value=“ES“>Spanien</option><option value=“GB“>Großbritannien</option><option value=“MX“>Mexiko</option><option value=“US“>USA</option>
</select></div>
<div class=“zxm-field“><label for=“zz-asc-city“>Geburtsort</label><select id=“zz-asc-city“>
<option data-country=“AT“ value=“48.2082,16.3738,1″>Wien</option><option data-country=“AT“ value=“47.0707,15.4395,1″>Graz</option><option data-country=“AT“ value=“48.3069,14.2858,1″>Linz</option><option data-country=“AT“ value=“47.8095,13.0550,1″>Salzburg</option><option data-country=“AT“ value=“47.2692,11.4041,1″>Innsbruck</option><option data-country=“AT“ value=“46.6247,14.3053,1″>Klagenfurt</option>
<option data-country=“DE“ value=“52.5200,13.4050,1″>Berlin</option><option data-country=“DE“ value=“48.1351,11.5820,1″>München</option><option data-country=“DE“ value=“53.5511,9.9937,1″>Hamburg</option><option data-country=“DE“ value=“50.1109,8.6821,1″>Frankfurt</option><option data-country=“DE“ value=“50.9375,6.9603,1″>Köln</option><option data-country=“DE“ value=“48.7758,9.1829,1″>Stuttgart</option>
<option data-country=“HU“ value=“47.4979,19.0402,1″>Budapest</option><option data-country=“HU“ value=“47.5316,21.6273,1″>Debrecen</option><option data-country=“HU“ value=“46.2530,20.1414,1″>Szeged</option><option data-country=“HU“ value=“47.6875,17.6504,1″>Győr</option>
<option data-country=“CH“ value=“47.3769,8.5417,1″>Zürich</option><option data-country=“CH“ value=“46.9480,7.4474,1″>Bern</option><option data-country=“CH“ value=“46.2044,6.1432,1″>Genf</option><option data-country=“CH“ value=“47.5596,7.5886,1″>Basel</option>
<option data-country=“IT“ value=“41.9028,12.4964,1″>Rom</option><option data-country=“IT“ value=“45.4642,9.1900,1″>Mailand</option><option data-country=“IT“ value=“45.4408,12.3155,1″>Venedig</option><option data-country=“IT“ value=“46.4983,11.3548,1″>Bozen</option>
<option data-country=“HR“ value=“45.8150,15.9819,1″>Zagreb</option><option data-country=“HR“ value=“43.5081,16.4402,1″>Split</option><option data-country=“HR“ value=“44.1194,15.2314,1″>Zadar</option><option data-country=“HR“ value=“43.7350,15.8952,1″>Šibenik</option>
<option data-country=“SI“ value=“46.0569,14.5058,1″>Ljubljana</option><option data-country=“SI“ value=“46.5547,15.6459,1″>Maribor</option>
<option data-country=“SK“ value=“48.1486,17.1077,1″>Bratislava</option><option data-country=“SK“ value=“48.7164,21.2611,1″>Košice</option>
<option data-country=“CZ“ value=“50.0755,14.4378,1″>Prag</option><option data-country=“CZ“ value=“49.1951,16.6068,1″>Brno</option>
<option data-country=“PL“ value=“52.2297,21.0122,1″>Warschau</option><option data-country=“PL“ value=“50.0647,19.9450,1″>Krakau</option><option data-country=“PL“ value=“51.1079,17.0385,1″>Breslau</option>
<option data-country=“RO“ value=“44.4268,26.1025,2″>Bukarest</option><option data-country=“RO“ value=“46.7712,23.6236,2″>Cluj-Napoca</option><option data-country=“RS“ value=“44.7866,20.4489,1″>Belgrad</option><option data-country=“RS“ value=“45.2671,19.8335,1″>Novi Sad</option>
<option data-country=“BA“ value=“43.8563,18.4131,1″>Sarajevo</option><option data-country=“FR“ value=“48.8566,2.3522,1″>Paris</option><option data-country=“FR“ value=“45.7640,4.8357,1″>Lyon</option><option data-country=“ES“ value=“40.4168,-3.7038,1″>Madrid</option><option data-country=“ES“ value=“41.3874,2.1686,1″>Barcelona</option>
<option data-country=“GB“ value=“51.5072,-0.1276,0″>London</option><option data-country=“GB“ value=“53.4808,-2.2426,0″>Manchester</option>
<option data-country=“MX“ value=“19.4326,-99.1332,-6″>Ciudad de México</option><option data-country=“MX“ value=“21.1619,-86.8515,-5″>Cancún</option><option data-country=“MX“ value=“20.9674,-89.5926,-6″>Mérida</option><option data-country=“MX“ value=“20.6597,-103.3496,-6″>Guadalajara</option>
<option data-country=“US“ value=“40.7128,-74.0060,-5″>New York</option><option data-country=“US“ value=“34.0522,-118.2437,-8″>Los Angeles</option><option data-country=“US“ value=“25.7617,-80.1918,-5″>Miami</option><option data-country=“US“ value=“41.8781,-87.6298,-6″>Chicago</option>
</select></div>
<div class=“zxm-field zxm-field–full“><label for=“zz-asc-offset“>UTC-Abweichung zum Geburtszeitpunkt</label><select id=“zz-asc-offset“><option value=“-12″>UTC −12</option><option value=“-11″>UTC −11</option><option value=“-10″>UTC −10</option><option value=“-9″>UTC −9</option><option value=“-8″>UTC −8</option><option value=“-7″>UTC −7</option><option value=“-6″>UTC −6</option><option value=“-5″>UTC −5</option><option value=“-4″>UTC −4</option><option value=“-3″>UTC −3</option><option value=“-2″>UTC −2</option><option value=“-1″>UTC −1</option><option value=“0″>UTC ±0</option><option selected=““ value=“1″>UTC +1</option><option value=“2″>UTC +2</option><option value=“3″>UTC +3</option><option value=“4″>UTC +4</option><option value=“5″>UTC +5</option><option value=“5.5″>UTC +5:30</option><option value=“6″>UTC +6</option><option value=“7″>UTC +7</option><option value=“8″>UTC +8</option><option value=“9″>UTC +9</option><option value=“10″>UTC +10</option><option value=“11″>UTC +11</option><option value=“12″>UTC +12</option><option value=“13″>UTC +13</option><option value=“14″>UTC +14</option></select></div>
</div><button class=“zxm-calc-button“ id=“zz-asc-button“ type=“button“>Aszendent berechnen</button><p class=“zxm-calc-hint“>Die Zeitzone wird anhand der gewählten Stadt vorbelegt. Bitte Sommerzeit bzw. historische Abweichungen für dein Geburtsdatum prüfen.</p>
<div class=“zxm-result“ id=“zz-asc-result“><div class=“zxm-result-head“><div class=“zxm-result-symbol“ data-result-symbol=““>↑</div><div><h3 data-result-title=““>Dein Aszendent</h3><small data-result-subtitle=““></small></div></div><p data-result-text=““></p></div>
</div>
</div>
</div>
<div class=“zxm-explorer-panel“ data-zz-subpanel=“mond“ id=“mondkalender“>
<div class=“zxm-tool-grid zxm-tool-grid–explorer“>
<div class=“zxm-tool-intro“><span class=“zxm-kicker“>MONDPHASE · TAGESENERGIE</span><h3>Dein persönlicher Mondmoment.</h3><p>Wähle einen Tag und entdecke Mondphase, Beleuchtung und einen täglich wechselnden, inspirierenden Impuls im ZISANO Zodiac Stil.</p><div class=“zxm-tool-badges“><span>TÄGLICH AKTUELL</span><span>MONDPHASE</span><span>MONATSRHYTHMUS</span></div></div>
<div class=“zxm-calculator zxm-calculator–moon“><div class=“zxm-calc-title“><strong>Mondkalender</strong><span>LUNAR CYCLE</span></div><div class=“zxm-moon-visual“ id=“zz-moon-visual“></div>
<div class=“zxm-form-grid“><div class=“zxm-field zxm-field–full“><label for=“zz-moon-date“>Datum auswählen</label><input id=“zz-moon-date“ type=“date“/></div></div><button class=“zxm-calc-button“ id=“zz-moon-button“ type=“button“>Mondphase anzeigen</button>
<div class=“zxm-result is-visible“ id=“zz-moon-result“><div class=“zxm-result-head“><div class=“zxm-result-symbol“>☾</div><div><h3 data-result-title=““>Heutiger Mond</h3><small data-result-subtitle=““></small></div></div><div class=“zxm-moon-stats“><div class=“zxm-moon-stat“><small>BELEUCHTUNG</small><strong data-moon-light=““>–</strong></div><div class=“zxm-moon-stat“><small>MONDALTER</small><strong data-moon-age=““>–</strong></div><div class=“zxm-moon-stat“><small>ZYKLUS</small><strong data-moon-cycle=““>–</strong></div></div><div class=“zxm-daily-card“><span>DEIN MOND-IMPULS</span><strong data-moon-headline=““></strong><p data-result-text=““></p></div></div>
</div>
</div>
</div>
<div class=“zxm-explorer-panel“ data-zz-subpanel=“chinesisch“ id=“chinesisches-horoskop“>
<div class=“zxm-tool-grid zxm-tool-grid–explorer“>
<div class=“zxm-tool-intro“><span class=“zxm-kicker“>12 TIERE · 5 ELEMENTE</span><h3>Welches chinesische Zeichen begleitet dich?</h3><p>Das chinesische Tierkreisjahr beginnt nicht am 1. Januar, sondern zum chinesischen Neujahr. Der Finder berücksichtigt diese Jahresgrenze für Geburtsdaten von 1924 bis 2043.</p><div class=“zxm-tool-badges“><span>TIERZEICHEN</span><span>ELEMENT</span><span>YIN · YANG</span></div></div>
<div class=“zxm-calculator zxm-calculator–chinese“><div class=“zxm-calc-title“><strong>Chinese Zodiac Finder</strong><span>LUNAR YEAR</span></div><div class=“zxm-animal-stage“ id=“zz-animal-stage“>龍</div>
<div class=“zxm-form-grid“><div class=“zxm-field zxm-field–full“><label for=“zz-chinese-date“>Geburtsdatum</label><input id=“zz-chinese-date“ max=“2043-12-31″ min=“1924-01-01″ type=“date“/></div></div><button class=“zxm-calc-button“ id=“zz-chinese-button“ type=“button“>Zeichen entdecken</button>
<div class=“zxm-result“ id=“zz-chinese-result“><div class=“zxm-result-head“><div class=“zxm-result-symbol“ data-result-symbol=““>龍</div><div><h3 data-result-title=““>Dein Tierzeichen</h3><small data-result-subtitle=““></small></div></div><p data-result-text=““></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<div class=“zxm-disclaimer zxm-shell“>
Die astrologischen Zuordnungen dienen ausschließlich der Inspiration und Unterhaltung und stellen keine wissenschaftliche oder medizinische Beratung dar.
</div>
</div>

/* ZISANO Zodiac Christmas — extracted JavaScript
Original script block order preserved. */

/* ===== script-1 ===== */
(function () {
„use strict“;

/*
* =========================================================
* 1. TERMÉKKATALÓGUS
* =========================================================
* Új karkötő későbbi hozzáadása:
*
* rose: { id: 123456 },
* gold: { id: 123457 }
*
* A kulcs szabadon választható, az ID legyen a WooCommerce
* variációs SZÜLŐTERMÉK Product ID-ja.
*/
const ZISANO_PRODUCTS = {
„ruga“: {
„id“: 241887
},
„viola“: {
„id“: 241834
},
„helbluo“: {
„id“: 241825
},
„verda“: {
„id“: 241873
},
„nero“: {
„id“: 242347
}
};

/*
* =========================================================
* 2. CSILLAGJEGYENKÉNTI AJÁNLÁSOK
* =========================================================
* Több termék hozzáadása egy jegyhez:
*
* widder: {
* products: [„ruga“, „gold“, „orange“],
* score: 96
* }
*
* Az első elem lesz a fő ajánlás, a továbbiak pedig
* „WEITERE PASSENDE FARBE” jelöléssel jelennek meg.
*/
const ZISANO_ZODIAC_MATCHES = {
„widder“: {
„products“: [
„ruga“
],
„score“: 96
},
„stier“: {
„products“: [
„verda“
],
„score“: 95
},
„zwillinge“: {
„products“: [
„helbluo“
],
„score“: 98
},
„krebs“: {
„products“: [
„viola“
],
„score“: 97
},
„loewe“: {
„products“: [
„ruga“
],
„score“: 99
},
„jungfrau“: {
„products“: [
„verda“
],
„score“: 96
},
„waage“: {
„products“: [
„viola“
],
„score“: 99
},
„skorpion“: {
„products“: [
„nero“
],
„score“: 98
},
„schuetze“: {
„products“: [
„ruga“
],
„score“: 98
},
„steinbock“: {
„products“: [
„nero“
],
„score“: 97
},
„wassermann“: {
„products“: [
„helbluo“
],
„score“: 99
},
„fische“: {
„products“: [
„viola“
],
„score“: 98
}
};

const ZODIAC_SYMBOLS = {
widder: „♈“,
stier: „♉“,
zwillinge: „♊“,
krebs: „♋“,
loewe: „♌“,
jungfrau: „♍“,
waage: „♎“,
skorpion: „♏“,
schuetze: „♐“,
steinbock: „♑“,
wassermann: „♒“,
fische: „♓“
};

const productCache = new Map();
const loadedSigns = new Set();

function getStoreApiUrl(productId) {
return new URL(
„/wp-json/wc/store/v1/products/“ + encodeURIComponent(productId),
window.location.origin
).toString();
}

async function fetchProduct(productId) {
if (productCache.has(productId)) {
return productCache.get(productId);
}

productCache.set(productId, request);

try {
return await request;
} catch (error) {
productCache.delete(productId);
throw error;
}
}

function getPriceNumber(rawValue, minorUnit) {
const numericValue = Number(rawValue || 0);
return numericValue / Math.pow(10, Number(minorUnit || 2));
}

function formatMoney(rawValue, prices) {
const currency = prices.currency_code || „EUR“;
const minorUnit = Number(prices.currency_minor_unit || 2);
const value = getPriceNumber(rawValue, minorUnit);

try {
return new Intl.NumberFormat(„de-DE“, {
style: „currency“,
currency: currency
}).format(value);
} catch (error) {
return value.toFixed(minorUnit) + “ “ + currency;
}
}

function createPrice(product) {
const wrapper = document.createElement(„div“);
wrapper.className = „zxm-shop-card__price“;

const prices = product.prices || {};
const current = String(prices.price || „“);
const regular = String(prices.regular_price || „“);
const isSale = current && regular && current !== regular;

if (isSale) {
const oldPrice = document.createElement(„del“);
oldPrice.textContent = formatMoney(regular, prices);
wrapper.appendChild(oldPrice);
}

const price = document.createElement(„span“);
const prefix = product.has_options ? „ab “ : „“;
price.textContent = prefix + formatMoney(current || regular, prices);
wrapper.appendChild(price);

return wrapper;
}

function createProductCard(product, position, matchScore, sign) {
const card = document.createElement(„article“);
card.className = „zxm-shop-card“;

const mediaLink = document.createElement(„a“);
mediaLink.className = „zxm-shop-card__media“;
mediaLink.href = product.permalink || „#“;
mediaLink.setAttribute(„aria-label“, product.name || „Produkt entdecken“);

const image = document.createElement(„img“);
const firstImage = Array.isArray(product.images) ? product.images[0] : null;
image.src = firstImage && firstImage.src ? firstImage.src : „“;
image.alt = firstImage && firstImage.alt ? firstImage.alt : (product.name || „ZISANO Armband“);
image.loading = position === 0 ? „eager“ : „lazy“;
image.decoding = „async“;
mediaLink.appendChild(image);

const content = document.createElement(„div“);
content.className = „zxm-shop-card__content“;

const zodiacDecor = document.createElement(„div“);
zodiacDecor.className = „zxm-card-zodiac“;
zodiacDecor.setAttribute(„aria-hidden“, „true“);

const zodiacSymbol = document.createElement(„span“);
zodiacSymbol.className = „zxm-card-zodiac__symbol“;
zodiacSymbol.textContent = ZODIAC_SYMBOLS[sign] || „✦“;

const zodiacStar = document.createElement(„span“);
zodiacStar.className = „zxm-card-zodiac__star“;
zodiacStar.textContent = „✦“;

const zodiacStarSmall = document.createElement(„span“);
zodiacStarSmall.className = „zxm-card-zodiac__star zxm-card-zodiac__star–small“;
zodiacStarSmall.textContent = „✦“;

const zodiacOrbit = document.createElement(„span“);
zodiacOrbit.className = „zxm-card-zodiac__orbit“;

zodiacDecor.appendChild(zodiacSymbol);
zodiacDecor.appendChild(zodiacStar);
zodiacDecor.appendChild(zodiacStarSmall);
zodiacDecor.appendChild(zodiacOrbit);
content.appendChild(zodiacDecor);

const badge = document.createElement(„span“);
badge.className = „zxm-shop-card__badge“;
badge.textContent = position === 0
? „BESTER MATCH · “ + matchScore + „%“
: „WEITERE PASSENDE FARBE“;

const title = document.createElement(„h5“);
title.textContent = product.name || „ZISANO Armband“;

const stock = document.createElement(„div“);
stock.className = „zxm-shop-card__stock“;
if (product.is_in_stock === false) {
stock.classList.add(„is-out“);
stock.textContent = „Derzeit nicht verfügbar“;
} else {
stock.textContent = product.has_options
? „Größe auf der Produktseite auswählen“
: „Auf Lager“;
}

const button = document.createElement(„a“);
button.className = „zxm-shop-card__button“;
button.href = product.permalink || „#“;
button.innerHTML = „<span>Produkt entdecken</span><i aria-hidden=\“true\“></i>“;

content.appendChild(badge);
content.appendChild(title);
content.appendChild(createPrice(product));
content.appendChild(stock);
content.appendChild(button);

card.appendChild(mediaLink);
card.appendChild(content);
return card;
}

function showGridMessage(grid, message, isError) {
grid.replaceChildren();
const box = document.createElement(„div“);
box.className = isError ? „zz-product-error“ : „zxm-product-loading“;
box.textContent = message;
grid.appendChild(box);
}

async function loadProductsForSign(sign) {
if (!sign || loadedSigns.has(sign)) return;

const config = ZISANO_ZODIAC_MATCHES[sign];
const grid = document.querySelector(‚[data-product-grid=“‚ + sign + ‚“]‘);

if (!config || !grid) return;

const productKeys = Array.isArray(config.products) ? config.products : [];
const ids = productKeys
.map(function (key) {
return ZISANO_PRODUCTS[key] && ZISANO_PRODUCTS[key].id;
})
.filter(Boolean);

if (!ids.length) {
showGridMessage(grid, „Für dieses Sternzeichen werden bald passende Produkte ergänzt.“, false);
loadedSigns.add(sign);
return;
}

showGridMessage(grid, „Produkte werden geladen …“, false);

const results = await Promise.allSettled(ids.map(fetchProduct));
const products = results
.filter(function (result) { return result.status === „fulfilled“; })
.map(function (result) { return result.value; });

if (!products.length) {
showGridMessage(
grid,
„Die Produktempfehlungen konnten gerade nicht geladen werden. Bitte versuche es später erneut.“,
true
);
return;
}

grid.replaceChildren();
grid.dataset.count = String(products.length);

products.forEach(function (product, index) {
grid.appendChild(createProductCard(product, index, config.score || 95, sign));
});

loadedSigns.add(sign);
}

function getSignFromRadio(radio) {
return radio && radio.id ? radio.id.replace(„zodiac-„, „“) : „“;
}

function loadCurrentSelection() {
const current = document.querySelector(‚.zxm-page .zxm-zodiac-radio:checked‘);
loadProductsForSign(getSignFromRadio(current));
}

function initZisanoProducts() {
const radios = document.querySelectorAll(‚.zxm-page .zxm-zodiac-radio‘);

radios.forEach(function (radio) {
radio.addEventListener(„change“, function () {
if (radio.checked) {
loadProductsForSign(getSignFromRadio(radio));
}
});
});

loadCurrentSelection();
}

if (document.readyState === „loading“) {
document.addEventListener(„DOMContentLoaded“, initZisanoProducts, { once:true });
} else {
initZisanoProducts();
}
})();

/* ===== script-2 ===== */
(function () {
„use strict“;

function unlockZisanoPageScroll() {
if (!document.querySelector(„.zxm-page“)) return;

var html = document.documentElement;
var body = document.body;
var previousTop = 0;

if (body) {
var topValue = parseInt(body.style.top || „0“, 10);
if (!Number.isNaN(topValue)) previousTop = topValue;
}

[html, body].forEach(function (element) {
if (!element) return;

element.style.setProperty(„height“, „auto“, „important“);
element.style.setProperty(„min-height“, „100%“, „important“);
element.style.setProperty(„max-height“, „none“, „important“);
element.style.setProperty(„overflow-y“, „auto“, „important“);
element.style.setProperty(„touch-action“, „auto“, „important“);
element.style.setProperty(„overscroll-behavior“, „auto“, „important“);
});

if (body && window.getComputedStyle(body).position === „fixed“) {
body.style.setProperty(„position“, „static“, „important“);
body.style.removeProperty(„top“);

if (previousTop < 0) {
window.scrollTo(0, Math.abs(previousTop));
}
}
}

if (document.readyState === „loading“) {
document.addEventListener(„DOMContentLoaded“, unlockZisanoPageScroll, { once: true });
} else {
unlockZisanoPageScroll();
}

window.addEventListener(„load“, unlockZisanoPageScroll, { once: true });

/* Some cache/loader plugins apply their scroll lock slightly later. */
window.setTimeout(unlockZisanoPageScroll, 250);
window.setTimeout(unlockZisanoPageScroll, 1200);
})();

/* ===== script-3 ===== */
(function () {
„use strict“;

function initZodiacCosmos() {
var wrap = document.querySelector(„.zxm-page .zxm-astro-wrap“);
if (!wrap || wrap.dataset.cosmosReady === „true“) return;

var scene = wrap.querySelector(„.zxm-astro-scene“);
var canvas = wrap.querySelector(„.zxm-astro-canvas“);
var zodiacFeature = wrap.querySelector(„.zxm-zodiac-feature“);
if (!scene || !canvas) return;

wrap.dataset.cosmosReady = „true“;

var reducedMotion = window.matchMedia && window.matchMedia(„(prefers-reduced-motion: reduce)“).matches;
var finePointer = window.matchMedia && window.matchMedia(„(pointer: fine)“).matches;
var ctx = canvas.getContext(„2d“, { alpha: true });
var stars = [];
var width = 0;
var height = 0;
var dpr = 1;
var running = !reducedMotion;
var visible = true;
var frame = 0;
var pointerFrame = 0;
var targetX = 0;
var targetY = 0;

function resizeCanvas() {
var rect = canvas.getBoundingClientRect();
width = Math.max(1, rect.width);
height = Math.max(1, rect.height);
dpr = Math.min(window.devicePixelRatio || 1, 1.15);
canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
createStars();
}

function draw(time) {
if (!running || !visible) {
frame = 0;
return;
}

ctx.clearRect(0, 0, width, height);

stars.forEach(function (star, index) {
var pulse = .55 + Math.sin(time * star.speed + star.phase) * .45;
var driftX = Math.cos(time * .00007 + star.phase) * star.drift;
var driftY = Math.sin(time * .00006 + star.phase) * star.drift;
var alpha = Math.max(.05, star.alpha * pulse);

ctx.beginPath();
ctx.fillStyle = „rgba(143,54,153,“ + alpha.toFixed(3) + „)“;
ctx.arc(star.x + driftX, star.y + driftY, star.size, 0, Math.PI * 2);
ctx.fill();

if (index % 13 === 0) {
ctx.beginPath();
ctx.strokeStyle = „rgba(199,116,193,“ + (alpha * .34).toFixed(3) + „)“;
ctx.lineWidth = .65;
ctx.moveTo(star.x – 4 + driftX, star.y + driftY);
ctx.lineTo(star.x + 4 + driftX, star.y + driftY);
ctx.moveTo(star.x + driftX, star.y – 4 + driftY);
ctx.lineTo(star.x + driftX, star.y + 4 + driftY);
ctx.stroke();
}
});

frame = window.requestAnimationFrame(draw);
}

function applyPointer() {
pointerFrame = 0;
var rect = wrap.getBoundingClientRect();
var nx = Math.max(-1, Math.min(1, (targetX – rect.left) / rect.width * 2 – 1));
var ny = Math.max(-1, Math.min(1, (targetY – rect.top) / rect.height * 2 – 1));

scene.style.setProperty(„–ry“, (nx * 5.4).toFixed(2) + „deg“);
scene.style.setProperty(„–rx“, (ny * -4.2).toFixed(2) + „deg“);
scene.style.setProperty(„–mx“, (nx * 7).toFixed(2) + „px“);
scene.style.setProperty(„–my“, (ny * 6).toFixed(2) + „px“);
wrap.style.setProperty(„–mx“, (nx * 12).toFixed(2) + „px“);
wrap.style.setProperty(„–my“, (ny * 10).toFixed(2) + „px“);

if (zodiacFeature) {
zodiacFeature.style.setProperty(„–icon-x“, (nx * 20).toFixed(2) + „px“);
zodiacFeature.style.setProperty(„–icon-y“, (ny * 15).toFixed(2) + „px“);
zodiacFeature.style.setProperty(„–icon-ry“, (nx * 7.5).toFixed(2) + „deg“);
zodiacFeature.style.setProperty(„–icon-rx“, (ny * -6).toFixed(2) + „deg“);
}
}

function resetPointer() {
scene.style.setProperty(„–ry“, „0deg“);
scene.style.setProperty(„–rx“, „0deg“);
scene.style.setProperty(„–mx“, „0px“);
scene.style.setProperty(„–my“, „0px“);
wrap.style.setProperty(„–mx“, „0px“);
wrap.style.setProperty(„–my“, „0px“);

if (zodiacFeature) {
zodiacFeature.style.setProperty(„–icon-x“, „0px“);
zodiacFeature.style.setProperty(„–icon-y“, „0px“);
zodiacFeature.style.setProperty(„–icon-ry“, „0deg“);
zodiacFeature.style.setProperty(„–icon-rx“, „0deg“);
}
}

/* v29: static hero interaction.
Keep the ambient cosmic animation, but do not rotate/translate
the orb toward the mouse cursor. This removes pointer-driven work
and keeps the hero visually stable. */
resetPointer();

if („ResizeObserver“ in window) {
new ResizeObserver(resizeCanvas).observe(canvas);
} else {
window.addEventListener(„resize“, resizeCanvas, { passive: true });
}

if („IntersectionObserver“ in window) {
new IntersectionObserver(function (entries) {
visible = entries[0] ? entries[0].isIntersecting : true;
if (visible && running && !frame) frame = window.requestAnimationFrame(draw);
}, { rootMargin: „120px 0px“ }).observe(wrap);
}

document.addEventListener(„visibilitychange“, function () {
visible = !document.hidden;
if (visible && running && !frame) frame = window.requestAnimationFrame(draw);
});

resizeCanvas();
if (running) frame = window.requestAnimationFrame(draw);
}

if (document.readyState === „loading“) {
document.addEventListener(„DOMContentLoaded“, initZodiacCosmos, { once: true });
} else {
initZodiacCosmos();
}
})();

/* ===== script-4 ===== */
(function () {
„use strict“;

function initZodiacSymbolV4() {
var root = document.querySelector(„.zxm-page .zxm-zodiac-hero-symbol[data-zodiac-active=’true‘]“);
if (!root || root.dataset.v4Ready === „true“) return;

var glyph = root.querySelector(„.zxm-zodiac-hero-symbol__tile b“);
if (!glyph) return;

root.dataset.v4Ready = „true“;

var symbols = [„♈“, „♉“, „♊“, „♋“, „♌“, „♍“, „♎“, „♏“, „♐“, „♑“, „♒“, „♓“];
var cycle = 8000;
var started = performance.now();
var lastIndex = -1;
var shineTimer = 0;
var reducedMotion = window.matchMedia && window.matchMedia(„(prefers-reduced-motion: reduce)“).matches;
var visible = true;
var raf = 0;

function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}

function smoothstep(value) {
value = clamp(value, 0, 1);
return value * value * (3 – 2 * value);
}

function render(now) {
if (!visible) {
raf = 0;
return;
}

if (reducedMotion) {
root.style.setProperty(„–symbol-opacity“, „1“);
root.style.setProperty(„–symbol-scale“, „1“);
root.style.setProperty(„–symbol-y“, „0px“);
root.style.setProperty(„–symbol-rotate“, „0deg“);
return;
}

var elapsed = Math.max(0, now – started);
var absoluteCycle = Math.floor(elapsed / cycle);
var index = absoluteCycle % symbols.length;
var progress = (elapsed % cycle) / cycle;

if (index !== lastIndex) {
glyph.textContent = symbols[index];
lastIndex = index;
root.classList.remove(„is-shining“);
window.clearTimeout(shineTimer);
shineTimer = window.setTimeout(function () {
root.classList.add(„is-shining“);
}, 1500);
}

var opacity;
var scale;
var y;
var rotate;

if (progress < .18) {
var enter = smoothstep(progress / .18);
opacity = enter;
scale = .58 + enter * .43;
y = 12 – enter * 12;
rotate = -3.2 + enter * 3.35;
} else if (progress < .82) {
var hold = (progress – .18) / .64;
var floatWave = Math.sin(hold * Math.PI * 2);
opacity = 1;
scale = 1.01 + floatWave * .006;
y = -1.5 + floatWave * 1.5;
rotate = .15 + floatWave * .12;
} else {
var exit = smoothstep((progress – .82) / .18);
opacity = 1 – exit;
scale = 1.01 + exit * .17;
y = -2 – exit * 12;
rotate = .15 + exit * 2.2;
}

root.style.setProperty(„–symbol-opacity“, opacity.toFixed(4));
root.style.setProperty(„–symbol-scale“, scale.toFixed(4));
root.style.setProperty(„–symbol-y“, y.toFixed(2) + „px“);
root.style.setProperty(„–symbol-rotate“, rotate.toFixed(2) + „deg“);

raf = window.requestAnimationFrame(render);
}

if („IntersectionObserver“ in window) {
new IntersectionObserver(function (entries) {
visible = entries[0] ? entries[0].isIntersecting : true;
if (visible && !raf) raf = window.requestAnimationFrame(render);
}, { rootMargin:“140px 0px“ }).observe(root);
}

document.addEventListener(„visibilitychange“, function () {
visible = !document.hidden;
if (visible && !raf) raf = window.requestAnimationFrame(render);
});

raf = window.requestAnimationFrame(render);
}

if (document.readyState === „loading“) {
document.addEventListener(„DOMContentLoaded“, initZodiacSymbolV4, { once:true });
} else {
initZodiacSymbolV4();
}
})();

/* ===== script-5 ===== */
(function(){
„use strict“;
var page=document.querySelector(‚.zxm-page‘); if(!page||page.dataset.hubReady===’true‘)return; page.dataset.hubReady=’true‘;
var tabs=[].slice.call(page.querySelectorAll(‚[data-zz-tool]‘));
var panels=[].slice.call(page.querySelectorAll(‚[data-zz-panel]‘));
var finder=page.querySelector(‚#finder‘);
if(finder){finder.classList.add(‚zxm-tool-panel‘);finder.classList.remove(‚is-active‘);finder.setAttribute(‚data-zz-panel‘,’sternzeichen‘);}
function activate(name){
tabs.forEach(function(t){var on=t.dataset.zzTool===name;t.classList.toggle(‚is-active‘,on);t.setAttribute(‚aria-selected‘,on?’true‘:’false‘);});
panels=[].slice.call(page.querySelectorAll(‚[data-zz-panel]‘));
panels.forEach(function(p){p.classList.toggle(‚is-active‘,p.dataset.zzPanel===name);});
var target=page.querySelector(‚[data-zz-panel=“‚+name+'“]‘); if(target)window.setTimeout(function(){target.scrollIntoView({behavior:’smooth‘,block:’start‘});},30);
}
tabs.forEach(function(t){t.addEventListener(‚click‘,function(){activate(t.dataset.zzTool);});});

/* Personalized Band live configurator */
var personalType=’zodiac‘, preview=page.querySelector(‚#zz-engraving-preview‘), caption=page.querySelector(‚#zz-preview-caption‘);
var summaryType=page.querySelector(‚#zz-summary-type‘),summaryValue=page.querySelector(‚#zz-summary-value‘);
var typeLabels={zodiac:’Sternzeichen‘,chinese:’Chinesisches Zeichen‘,moon:’Geburtsmond‘,initials:’Monogramm‘,date:’Persönliches Datum‘,word:’Wort oder Koordinate‘};
function setPreview(value,label,isText){
if(!preview)return; value=(value||’✦‘).trim().slice(0,16); preview.textContent=value;preview.setAttribute(‚data-engraving‘,value);preview.classList.toggle(‚is-text‘,!!isText);
if(caption)caption.textContent=(typeLabels[personalType]||’Gravur‘)+‘ · ‚+(label||value);
if(summaryType)summaryType.textContent=typeLabels[personalType]||’Gravur‘;
if(summaryValue)summaryValue.textContent=(label&&label!==value)?value+‘ · ‚+label:value;
}
[].slice.call(page.querySelectorAll(‚[data-engraving-type]‘)).forEach(function(btn){btn.addEventListener(‚click‘,function(){
personalType=btn.dataset.engravingType;
page.querySelectorAll(‚[data-engraving-type]‘).forEach(function(b){b.classList.toggle(‚is-active‘,b===btn);});
page.querySelectorAll(‚[data-custom-row]‘).forEach(function(row){row.classList.toggle(‚is-active‘,row.dataset.customRow===personalType);});
var row=page.querySelector(‚[data-custom-row=“‚+personalType+'“]‘),active=row&&row.querySelector(‚.zxm-symbol-button.is-active‘),input=row&&row.querySelector(‚[data-personal-input]‘);
if(active)setPreview(active.dataset.symbol,active.dataset.label,false);
else if(input){var text=input.options?input.options[input.selectedIndex].text:input.value;setPreview(input.value,text,input.tagName===’INPUT‘);}
});});
[].slice.call(page.querySelectorAll(‚.zxm-symbol-button‘)).forEach(function(btn){btn.addEventListener(‚click‘,function(){
page.querySelectorAll(‚.zxm-symbol-button‘).forEach(function(b){b.classList.toggle(‚is-active‘,b===btn);});setPreview(btn.dataset.symbol,btn.dataset.label,false);
});});
[].slice.call(page.querySelectorAll(‚[data-personal-input]‘)).forEach(function(input){function update(){var text=input.options?input.options[input.selectedIndex].text:input.value;setPreview(input.value,text,input.tagName===’INPUT‘);}input.addEventListener(‚input‘,update);input.addEventListener(‚change‘,update);});
[].slice.call(page.querySelectorAll(‚[data-zz-jump-builder]‘)).forEach(function(jump){jump.addEventListener(‚click‘,function(){var b=page.querySelector(‚#zz-personal-builder‘);if(b)b.scrollIntoView({behavior:’smooth‘,block:’start‘});});});

/* ===== zz-v5-nav-order ===== */
(function(){var nav=document.querySelector(‚.zxm-page .zxm-hub-nav‘);var p=nav&&nav.querySelector(‚.zxm-hub-tab–personal‘);if(nav&&p&&nav.firstElementChild!==p)nav.insertBefore(p,nav.firstElementChild);})();

/* ===== zz-xmas-scroll-js ===== */
(function(){
var link=document.querySelector(‚.zxm-page .zxm-xmas-scroll‘);
if(!link)return;
link.addEventListener(‚click‘,function(e){
var target=document.querySelector(‚#zz-xmas-nav‘);
if(!target)return;
e.preventDefault();
target.scrollIntoView({behavior:’smooth‘,block:’start‘});
});
})();

/* ===== zz-v4-multi-gravur-js ===== */
(function(){
„use strict“;

var page=document.querySelector(„.zxm-page“);
if(!page)return;

var TARGETS=[„verschluss“,“anhanger“,“flasche“];
var targetLabels={
verschluss:“Armband · Verschluss“,
anhanger:“ZISANO Anhänger · Rückseite“,
flasche:“ZISANO Flasche“
};
var targetPositions={
verschluss:“Mittig auf dem Verschluss“,
anhanger:“Mittig auf der Anhänger-Rückseite“,
flasche:“Großflächig auf der Flasche“
};

/* Zodiac engraving artwork. Ordered by the calendar year in the UI: Jan → Dec. */
var zodiacArtwork={
steinbock:{pendant:“https://zisano.at/wp-content/uploads/2026/08/capricorn.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/capricorn_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/capricorn_bottle2.png“},
wassermann:{pendant:“https://zisano.at/wp-content/uploads/2026/08/aquarius.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/aquarius_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/aquarius_bottle2.png“},
fische:{pendant:“https://zisano.at/wp-content/uploads/2026/08/pisces.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/pisces_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/pisces_bottle2.png“},
widder:{pendant:“https://zisano.at/wp-content/uploads/2026/08/aries.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/aries_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/aries_bottle2.png“},
stier:{pendant:“https://zisano.at/wp-content/uploads/2026/08/taurus.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/taurus_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/taurus_bottle2.png“},
zwillinge:{pendant:“https://zisano.at/wp-content/uploads/2026/08/gemini.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/gemini_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/gemini_bottle2.png“},
krebs:{pendant:“https://zisano.at/wp-content/uploads/2026/08/cancer.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/cancer_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/cancer_bottle2.png“},
loewe:{pendant:“https://zisano.at/wp-content/uploads/2026/08/leo.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/leo_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/leo_bottle2.png“},
jungfrau:{pendant:“https://zisano.at/wp-content/uploads/2026/08/virgo.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/virgo_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/virgo_bottle2.png“},
waage:{pendant:“https://zisano.at/wp-content/uploads/2026/08/libra.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/libra_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/libra_bottle2.png“},
skorpion:{pendant:“https://zisano.at/wp-content/uploads/2026/08/scorpio.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/scorpio_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/scorpio_bottle2.png“},
schuetze:{pendant:“https://zisano.at/wp-content/uploads/2026/08/sagitarius.png“,bracelet:“https://zisano.at/wp-content/uploads/2026/08/sagitarius_simple.png“,bottle:“https://zisano.at/wp-content/uploads/2026/08/sagitarius_bottle2.png“}
};

function artworkUrlFor(button,target){
if(!button)return „“;
var key=button.dataset.signKey||“loewe“;
var mapped=zodiacArtwork[key]||{};
if(target===“verschluss“)return button.dataset.artworkBracelet||mapped.bracelet||button.dataset.artwork||mapped.pendant||““;
if(target===“flasche“)return button.dataset.artworkBottle||mapped.bottle||button.dataset.artworkPendant||mapped.pendant||““;
return button.dataset.artworkPendant||button.dataset.artwork||mapped.pendant||mapped.bracelet||““;
}

var state={
target:“verschluss“,
configs:{},
confirmed:{},
noEngraving:{},
products:[],
selected:{},
productSizes:{},
productView:“verschluss“,
chipProduct:null,
chipSelected:false,
giftProduct:null,
giftColor:““,
giftColors:[„Blau“,“Grün“,“Rosa“]
};

try{
var storedSizes=JSON.parse(sessionStorage.getItem(„zisanoZodiacProductSizes“)||“{}“);
if(storedSizes&&typeof storedSizes===“object“)state.productSizes=storedSizes;
}catch(err){}

var preview=page.querySelector(„#zz-engraving-preview“);
var carousel=page.querySelector(„#zz-preview-carousel“);
var previewTrack=page.querySelector(„[data-preview-track]“);
var previewTitle=page.querySelector(„#zz-preview-target-title“);
var previewCounter=page.querySelector(„#zz-preview-counter“);
var summaryTarget=page.querySelector(„#zz-summary-target“);
var summaryType=page.querySelector(„#zz-summary-type“);
var summaryValue=page.querySelector(„#zz-summary-value“);
var confirmBtn=page.querySelector(„#zz-confirm-engraving“);
var noEngravingBtn=page.querySelector(„[data-no-engraving]“);
var confirmedTargets=page.querySelector(„#zz-confirmed-targets“);
var productsSection=page.querySelector(„#zz-engraving-products“);
var productLock=page.querySelector(„#zz-product-lock“);
var track=page.querySelector(„#zz-engraving-product-track“);
var selectedCount=page.querySelector(„#zz-selected-count“);
var selectedSummary=page.querySelector(„#zz-selected-summary“);
var chipToggle=page.querySelector(„#zz-chip-toggle“);
var chipPriceLabel=page.querySelector(„#zz-chip-price“);
var orderLines=page.querySelector(„#zz-order-summary-lines“);
var orderCount=page.querySelector(„#zz-order-summary-count“);
var orderProductsTotal=page.querySelector(„#zz-order-products-total“);
var orderEngravingTotal=page.querySelector(„#zz-order-engraving-total“);
var orderChipTotal=page.querySelector(„#zz-order-chip-total“);
var orderGrandTotal=page.querySelector(„#zz-order-grand-total“);
var orderChipRow=page.querySelector(„.zxm-order-chip-row“);
var orderGiftRow=page.querySelector(„.zxm-order-gift-row“);
var orderCoasterRow=page.querySelector(„.zxm-order-coaster-row“);
var giftStatus=page.querySelector(„#zz-chip-gift-status“);
var birthdateInput=page.querySelector(„#zz-birthdate“);
var birthdayMarketing=page.querySelector(„#zz-birthday-marketing“);
var birthdayStatus=page.querySelector(„#zz-birthday-status“);
var giftColorModal=page.querySelector(„#zz-gift-color-modal“);
var giftColorSwatches=page.querySelector(„#zz-gift-color-swatches“);
var addSelectionCart=page.querySelector(„#zz-add-selection-cart“);
var addSelectionCheckout=page.querySelector(„#zz-add-selection-checkout“);
var orderSummaryNote=page.querySelector(„#zz-order-summary-note“);
var artworkPreview=page.querySelector(„#zz-zodiac-artwork-preview“);
var pendantArtworkPreview=page.querySelector(„#zz-pendant-zodiac-preview“);
var braceletArtworkPreview=page.querySelector(„#zz-bracelet-zodiac-preview“);

page.querySelectorAll(„.zxm-symbol-art img“).forEach(function(img){
img.addEventListener(„load“,function(){
img.classList.remove(„is-missing“);
var fallback=img.parentElement&&img.parentElement.querySelector(„i“);
if(fallback)fallback.style.display=“none“;
});
img.addEventListener(„error“,function(){
img.classList.add(„is-missing“);
var fallback=img.parentElement&&img.parentElement.querySelector(„i“);
if(fallback)fallback.style.display=“grid“;
});
});

function esc(v){
return String(v==null?““:v).replace(/[&<>“‚]/g,function(ch){
if(ch===“&“)return „&“;
if(ch===“<„)return „<“;
if(ch===“>“)return „>“;
if(ch===String.fromCharCode(34))return „"“;
return „'“;
});
}

function targetHasNoEngraving(target){
return !!state.noEngraving[target];
}

function engravingTypeKeyFromLabel(label){
var value=String(label||““).toLowerCase();
if(value.indexOf(„chines“)>-1)return „chinese“;
if(value.indexOf(„mond“)>-1)return „moon“;
if(value.indexOf(„monogramm“)>-1)return „initials“;
if(value.indexOf(„datum“)>-1)return „date“;
if(value.indexOf(„wort“)>-1||value.indexOf(„koordinate“)>-1)return „word“;
return „zodiac“;
}

function applyNoEngravingVisual(target){
if(target!==state.target)return;
var active=targetHasNoEngraving(target);

page.classList.toggle(„zxm-no-engraving-active“,active);

if(noEngravingBtn){
noEngravingBtn.classList.toggle(„is-active“,active);
noEngravingBtn.setAttribute(„aria-pressed“,active?“true“:“false“);
}

if(active){
page.querySelectorAll(„[data-engraving-type]“).forEach(function(btn){
btn.classList.remove(„is-active“);
});
page.querySelectorAll(„[data-custom-row]“).forEach(function(row){
row.classList.remove(„is-active“);
});

if(summaryType)summaryType.textContent=“Ohne Gravur“;
if(summaryValue)summaryValue.textContent=“Keine Gravur ausgewählt“;

if(preview){
preview.textContent=““;
preview.setAttribute(„data-engraving“,““);
preview.setAttribute(„aria-hidden“,“true“);
}
}else if(preview){
preview.removeAttribute(„aria-hidden“);
}
}

function saveCurrentConfig(){
if(targetHasNoEngraving(state.target)){
state.configs[state.target]={
target:state.target,
targetLabel:targetLabels[state.target],
type:“Ohne Gravur“,
value:“__NO_ENGRAVING__“,
description:“Ohne Gravur“,
position:““,
noEngraving:true,
source:“ZISANO Christmas Zodiac Hub“
};
return;
}

state.configs[state.target]={
target:state.target,
targetLabel:targetLabels[state.target],
type:typeLabel(),
value:motifValue(),
description:motifDescription(),
position:targetPositions[state.target],
noEngraving:false,
source:“ZISANO Christmas Zodiac Hub“
};
}
function restoreTargetConfig(target){
var c=state.configs[target]||state.confirmed[target];

if(!c){
state.noEngraving[target]=false;
applyNoEngravingVisual(target);
return;
}

state.noEngraving[target]=!!c.noEngraving;
applyNoEngravingVisual(target);

if(c.noEngraving)return;

activateTypeFromConfig(c);

if(preview){
preview.textContent=c.value||“✦“;
preview.setAttribute(„data-engraving“,c.value||“✦“);
}
if(summaryType)summaryType.textContent=c.type||“Gravur“;
if(summaryValue)summaryValue.textContent=c.description||c.value||““;
}
function markCurrentDirty(){
if(!state.confirmed[state.target])return;
delete state.confirmed[state.target];

try{
sessionStorage.setItem(„zisanoMultiEngraving“,JSON.stringify(state.confirmed));
localStorage.setItem(„zisanoMultiEngraving“,JSON.stringify(state.confirmed));
}catch(err){}

renderConfirmedTargets();
updateUnlockState();
updateConfirmationVisual(state.target);
}

function switchTarget(target,scrollPreview){
if(TARGETS.indexOf(target)<0)return;
saveCurrentConfig();
state.target=target;
page.dataset.engravingTarget=target;

page.querySelectorAll(„[data-engraving-target]“).forEach(function(btn){
btn.classList.toggle(„is-active“,btn.dataset.engravingTarget===target);
});

var index=TARGETS.indexOf(target);
if(previewTrack)previewTrack.style.transform=“translateX(-„+(index*100)+“%)“;
if(previewCounter)previewCounter.textContent=(index+1)+“ / „+TARGETS.length;
if(previewTitle)previewTitle.textContent=targetLabels[target];
if(summaryTarget)summaryTarget.textContent=targetLabels[target];
if(carousel)carousel.dataset.currentTarget=target;

restoreTargetConfig(target);
updateArtwork();

updateConfirmationVisual(target);

state.productView=target;
setProductView(target);
updateSelectedUI();

if(scrollPreview){
var active=page.querySelector(‚[data-engraving-target=“‚+target+'“]‘);
if(active&&active.scrollIntoView)active.scrollIntoView({behavior:“smooth“,block:“nearest“,inline:“center“});
}
}

function updateArtwork(){
var activeSymbol=page.querySelector(„.zxm-symbol-button.is-active“);
var key=activeSymbol&&activeSymbol.dataset.signKey||“loewe“;
var url=artworkUrlFor(activeSymbol,state.target) || ((zodiacArtwork[key]||{}).pendant) || „“;
var isZodiac=!!(summaryType&&/Sternzeichen/i.test(summaryType.textContent));
var useBracelet=false; /* v36: bracelet Zodiac preview uses the standard Unicode glyph */
var useBottle=state.target===“flasche“&&url&&isZodiac;
var usePendant=state.target===“anhanger“&&url&&isZodiac;

syncZodiacPickerArtwork();

/* v36: on the clasp use the clean standard Unicode zodiac symbol.
This is smaller, centered and much closer to the real laser engraving. */
if(state.target===“verschluss“ && isZodiac && activeSymbol && preview){
var braceletGlyph=activeSymbol.dataset.symbol||“✦“;
preview.textContent=braceletGlyph;
preview.setAttribute(„data-engraving“,braceletGlyph);
preview.classList.remove(„is-text“);
}

if(artworkPreview){
artworkPreview.hidden=!useBottle;
if(useBottle){
artworkPreview.src=url;
artworkPreview.alt=(activeSymbol&&activeSymbol.dataset.label||“Zodiac“)+“ Gravurmotiv“;
}
}
if(pendantArtworkPreview){
pendantArtworkPreview.hidden=!usePendant;
if(usePendant){
pendantArtworkPreview.src=url;
pendantArtworkPreview.alt=(activeSymbol&&activeSymbol.dataset.label||“Zodiac“)+“ Gravur auf Anhänger-Rückseite“;
}
}
if(braceletArtworkPreview){
braceletArtworkPreview.hidden=!useBracelet;
if(useBracelet){
braceletArtworkPreview.src=url;
braceletArtworkPreview.alt=(activeSymbol&&activeSymbol.dataset.label||“Zodiac“)+“ Gravur auf dem Verschluss“;
}
}
if(preview){
if(useBottle||usePendant||useBracelet){
preview.style.setProperty(„opacity“,“0″,“important“);
preview.setAttribute(„aria-hidden“,“true“);
}else{
preview.style.removeProperty(„opacity“);
preview.removeAttribute(„aria-hidden“);
}
}
page.classList.toggle(„zxm-has-bracelet-zodiac“,!!useBracelet);
page.classList.toggle(„zxm-has-pendant-zodiac“,!!usePendant);
page.classList.toggle(„zxm-has-bottle-zodiac“,!!useBottle);
}

page.querySelectorAll(„[data-engraving-target]“).forEach(function(btn){
btn.addEventListener(„click“,function(){switchTarget(btn.dataset.engravingTarget,false);});
});

/* Optional path: buy the current product type without engraving. */
if(noEngravingBtn){
noEngravingBtn.addEventListener(„click“,function(){
state.noEngraving[state.target]=true;
markCurrentDirty();
applyNoEngravingVisual(state.target);
saveCurrentConfig();
updateArtwork();
updateConfirmationVisual(state.target);
});
}

/* Watch existing engraving controls; the original configurator still drives their content. */
page.addEventListener(„click“,function(e){
if(e.target.closest(„[data-engraving-type],.zxm-symbol-button“)){
state.noEngraving[state.target]=false;
applyNoEngravingVisual(state.target);
window.setTimeout(function(){markCurrentDirty();saveCurrentConfig();updateArtwork();updateConfirmationVisual(state.target);},20);
}
});
page.addEventListener(„input“,function(e){
if(e.target.matches(„[data-personal-input]“)){
markCurrentDirty();window.setTimeout(saveCurrentConfig,10);
}
});
page.addEventListener(„change“,function(e){
if(e.target.matches(„[data-personal-input]“)){
markCurrentDirty();window.setTimeout(saveCurrentConfig,10);
}
});

function renderConfirmedTargets(){
if(confirmedTargets)confirmedTargets.replaceChildren();
}

function updateConfirmationVisual(target){
var ok=!!state.confirmed[target];
var c=state.confirmed[target]||state.configs[target]||{};
var noEngraving=!!c.noEngraving||targetHasNoEngraving(target);
var strip=page.querySelector(„.zxm-builder-summary–strip“);

if(strip){
strip.classList.toggle(„is-confirmed“,ok);
strip.classList.toggle(„is-no-engraving“,noEngraving);
}

page.querySelectorAll(„.zxm-summary-item“).forEach(function(item){
item.classList.toggle(„is-confirmed“,ok);
});

if(confirmBtn){
confirmBtn.classList.toggle(„is-confirmed“,ok);
confirmBtn.textContent=ok
?“✓ Auswahl bestätigt“
:(noEngraving?“Ohne Gravur bestätigen“:“Diese Gravur bestätigen“);
}
}

function updateUnlockState(){
var hasConfirmed=Object.keys(state.confirmed).length>0;
if(productsSection)productsSection.classList.toggle(„is-locked“,!hasConfirmed);
if(productLock){
var s=productLock.querySelector(„span“);
if(s)s.textContent=hasConfirmed?“Produktauswahl freigeschaltet“:“Zuerst deine Auswahl bestätigen“;
}
}

if(confirmBtn)confirmBtn.addEventListener(„click“,function(e){
e.stopImmediatePropagation();
saveCurrentConfig();
var c=state.configs[state.target];
if(!c||(!c.value&&!c.noEngraving))return;
state.confirmed[state.target]=Object.assign({},c);
try{
sessionStorage.setItem(„zisanoMultiEngraving“,JSON.stringify(state.confirmed));
localStorage.setItem(„zisanoMultiEngraving“,JSON.stringify(state.confirmed));
}catch(err){}
renderConfirmedTargets();
updateUnlockState();
updateConfirmationVisual(state.target);
state.productView=state.target;
setProductView(state.target);
if(productsSection)productsSection.scrollIntoView({behavior:“smooth“,block:“start“});
},true);

/* —————- PRODUCT LOADER —————- */
var categorySlugs=[„elegance-armband“,“lifestyle-armband“,“schmuck“];
var bottleId=245050;

function priceNumber(prices){
if(!prices)return 0;
var minor=Number(prices.currency_minor_unit||2);
return Number(prices.price||0)/Math.pow(10,minor);
}

function euro(amount){
try{
return new Intl.NumberFormat(„de-AT“,{style:“currency“,currency:“EUR“}).format(Number(amount||0));
}catch(e){
return „€ „+Number(amount||0).toFixed(2).replace(„.“,“,“);
}
}

function engravingFeeForTarget(target){
var c=state.confirmed[target]||state.configs[target]||{};
if(c.noEngraving)return 0;

if(target===“anhanger“){
var descriptor=String((c.type||““)+“ „+(c.description||““)+“ „+(c.value||““));
return /bild|foto|upload|custom/i.test(descriptor)?30:15;
}
if(target===“flasche“)return 10;
return 10;
}

function productTarget(p){
if(Number(p.id)===bottleId||p._zodiacCategory===“flasche“)return „flasche“;
if(p._zodiacCategory===“schmuck“)return „anhanger“;
return „verschluss“;
}

var braceletSizes=[
{key:“XXS“,label:“XXS“,cm:“15–16 cm“},
{key:“XS“,label:“XS“,cm:“16–17 cm“},
{key:“S“,label:“S“,cm:“17–18 cm“},
{key:“M“,label:“M“,cm:“18–19 cm“},
{key:“L“,label:“L“,cm:“19–20 cm“},
{key:“XL“,label:“XL“,cm:“20,5–21,5 cm“}
];

async function getBraceletVariation(product,sizeKey){
if(!product||productTarget(product)!==“verschluss“)return null;
var productId=String(product.id||““);
var wanted=normalizeSize(sizeKey);
if(!productId||!wanted)return null;

if(!variationCache[productId]){
variationCache[productId]=fetchJson(
„/?wc-ajax=zisano_get_variations&product_id=“+encodeURIComponent(productId)
).catch(function(err){
delete variationCache[productId];
throw err;
});
}

var data=await variationCache[productId];
var sizes=data&&data.sizes?data.sizes:{};
return sizes[wanted]||null;
}

function appendVariationPayload(body,variation){
if(!variation||!variation.variation_id)return false;
body.set(„variation_id“,String(variation.variation_id));

var attrs=variation.attributes||{};
Object.keys(attrs).forEach(function(key){
if(/^attribute_/i.test(key)){
body.set(key,String(attrs[key]||““));
}
});

return true;
}
function renderSizePicker(p){
if(productTarget(p)!==“verschluss“)return „“;var current=state.productSizes[p.id]||““;var info=sizeInfo(current);
return ‚<div class=“zxm-product-size-wrap“ aria-label=“Armbandgröße wählen“>’+
‚<div class=“zxm-product-size-head“><span>GRÖSSE WÄHLEN</span><small>’+(current?(esc(current)+“ · „+esc(info&&info.cm||““)):“Direkt hier auswählen“)+'</small></div>’+
‚<div class=“zxm-product-size-note“><strong>HANDGELENKUMFANG</strong></div>’+
‚<div class=“zxm-product-sizes“>’+braceletSizes.map(function(sz){var active=normalizeSize(current)===normalizeSize(sz.key);return ‚<button type=“button“ class=“zxm-size-option’+(active?‘ is-active‘:“)+'“ data-product-size=“‚+esc(sz.key)+'“ data-product-id=“‚+esc(p.id)+'“ aria-pressed=“‚+(active?’true‘:’false‘)+'“><span>’+esc(sz.label)+'</span><em>’+esc(sz.cm)+'</em></button>‘;}).join(„“)+'</div></div>‘;
}

function renderProductCard(p){
var target=productTarget(p);
var img=p.images&&p.images[0]&&p.images[0].src?p.images[0].src:““;
var colors=colorOptions(p);
var selected=!!state.selected[p.id];
return ‚<article class=“zxm-engraving-product-card’+(selected?‘ is-selected‘:“)+'“ data-product-id=“‚+esc(p.id)+'“ data-product-target=“‚+target+'“ tabindex=“0″ aria-selected=“‚+(selected?’true‘:’false‘)+'“>’+
‚<span class=“zxm-product-selected-flag“><i>✓</i>AUSGEWÄHLT</span>’+
‚<div class=“zxm-engraving-product-media“>’+
(img?'<img src=“‚+esc(img)+'“ alt=“‚+esc(p.name)+'“ loading=“lazy“ decoding=“async“>‘:“)+'</div>’+
‚<div class=“zxm-engraving-product-copy“><h4>’+esc(p.name)+'</h4><div class=“zxm-engraving-product-price“>’+esc(money(p.prices))+'</div>’+
renderSizePicker(p)+
(colors.length?'<div class=“zxm-product-colors“>’+colors.map(function(c){return „<span>“+esc(c)+“</span>“;}).join(„“)+'</div>‘:“)+
‚<button class=“zxm-product-select“ type=“button“ data-select-product=“‚+esc(p.id)+'“>’+(selected?’✓ Ausgewählt‘:’Produkt auswählen‘)+'</button>’+
‚<button class=“zxm-product-cart“ type=“button“ data-add-configured-product=“‚+esc(p.id)+'“>In den Warenkorb</button>’+
‚<a class=“zxm-product-link“ data-base-url=“‚+esc(p.permalink||“#“)+'“ href=“‚+esc(buildHandoffUrl(p.permalink||“#“,target))+'“>Produkt ansehen / Variante wählen</a></div></article>‘;
}

function currentConfirmedForTarget(target){
return state.confirmed[target]||state.configs[target]||{};
}

function equalizeProductCardHeights(){
if(!track)return;
window.requestAnimationFrame(function(){
var cards=[].slice.call(track.querySelectorAll(„.zxm-engraving-product-card“));
if(!cards.length)return;

/* Mobile: natural card height. Do not create empty vertical space. */
if(window.matchMedia && window.matchMedia(„(max-width: 700px)“).matches){
cards.forEach(function(card){
card.style.minHeight=““;
card.style.height=““;
});
return;
}

cards.forEach(function(card){card.style.minHeight=““;});
var max=cards.reduce(function(m,card){return Math.max(m,card.getBoundingClientRect().height);},0);
if(max){
cards.forEach(function(card){card.style.minHeight=Math.ceil(max)+“px“;});
}
cards.forEach(function(card){
var img=card.querySelector(„img“);
if(img&&!img.complete){
img.addEventListener(„load“,equalizeProductCardHeights,{once:true});
}
});
});
}

function selectedProducts(){
return state.products.filter(function(p){return !!state.selected[p.id];});
}

function hasSelectedPendant(){
return selectedProducts().some(function(p){return productTarget(p)===“anhanger“;});
}

function bundleGiftActive(){
return state.chipSelected && hasSelectedPendant();
}

function hasBirthdate(){
return !!(birthdateInput && birthdateInput.value);
}

function updateSelectedUI(){
var list=selectedProducts();
if(selectedCount)selectedCount.textContent=String(list.length);
if(selectedSummary){
selectedSummary.textContent=list.length?
list.length+“ Produkt“+(list.length===1?““:“e“)+“ ausgewählt · „+list.map(function(p){var sz=state.productSizes[p.id];return p.name+(sz?“ · „+sz:““);}).join(“ · „):
„Noch kein Produkt ausgewählt“;
}

var productsTotal=list.reduce(function(sum,p){return sum+priceNumber(p.prices);},0);
var engravingTotal=list.reduce(function(sum,p){return sum+engravingFeeForTarget(productTarget(p));},0);
var chipPrice=state.chipProduct?priceNumber(state.chipProduct.prices):0;
var pendantContext=state.target===“anhanger“;
var chipBundleValid=state.chipSelected && hasSelectedPendant();
var chipNet=chipBundleValid?chipPrice:0;
var giftActive=chipBundleValid;
var coasterActive=hasBirthdate();
var grand=productsTotal+engravingTotal+chipNet;

if(orderCount){
var count=list.length+(chipBundleValid?1:0);
orderCount.textContent=count+“ Produkt“+(count===1?““:“e“);
}

if(orderLines){
var rows=list.map(function(p){
var target=productTarget(p),cfg=currentConfirmedForTarget(target);
var selectedSize=target===“verschluss“?(state.productSizes[p.id]||““):““;
var sz=sizeInfo(selectedSize);
var fee=engravingFeeForTarget(target);
var baseDetail=cfg.noEngraving?“Ohne Gravur“:(cfg.description||cfg.value||targetLabels[target]||“Gravur“);
var detail=baseDetail+(selectedSize?(“ · Größe „+selectedSize+(sz&&sz.cm?“ · „+sz.cm:““)):““);
return ‚<div class=“zxm-order-summary-line“><div><strong>’+esc(p.name)+'</strong><small>’+esc(detail)+'</small></div><div><span>’+esc(money(p.prices))+'</span><small>’+(fee>0?(„+ „+esc(euro(fee))+“ Gravur“):“Ohne Gravur“)+'</small></div></div>‘;
});
if(chipBundleValid&&state.chipProduct){
rows.push(‚<div class=“zxm-order-summary-line zxm-order-summary-line–chip“><div><strong>ZISANO Chip</strong><small>Für deinen Anhänger / Chip-Halter</small></div><div><span>’+esc(euro(chipPrice))+'</span><small>’+(giftActive?’inkl. Gratis-Thermosflasche‘:’Chip ausgewählt‘)+'</small></div></div>‘);
}
if(giftActive){
rows.push(‚<div class=“zxm-order-summary-line zxm-order-summary-line–gift“><div><strong>ZISANO Aqua Vivas Botelo</strong><small>Bundle-Geschenk · Wert 39,90 €’+(state.giftColor?‘ · ‚+esc(state.giftColor):“)+'</small></div><div><span>GRATIS</span><small>’+(state.giftColor?’Farbe: ‚+esc(state.giftColor):’Farbe noch wählen‘)+'</small></div></div>‘);
}
if(coasterActive){
rows.push(‚<div class=“zxm-order-summary-line zxm-order-summary-line–gift“><div><strong>Zodiac-Untersetzer</strong><small>Naturkautschuk · passend zu deinem Sternzeichen</small></div><div><span>GRATIS</span><small>’+esc(birthdateInput.value)+'</small></div></div>‘);
}
orderLines.innerHTML=rows.length?rows.join(„“):'<div class=“zxm-order-summary-empty“>Wähle oben mindestens ein Produkt aus.</div>‘;
}

if(orderProductsTotal)orderProductsTotal.textContent=euro(productsTotal);
if(orderEngravingTotal)orderEngravingTotal.textContent=euro(engravingTotal);
if(orderChipTotal)orderChipTotal.textContent=euro(chipPrice);
if(orderGrandTotal)orderGrandTotal.textContent=euro(grand);
if(orderChipRow)orderChipRow.hidden=!chipBundleValid;
if(orderGiftRow)orderGiftRow.hidden=!giftActive;
if(orderCoasterRow)orderCoasterRow.hidden=!coasterActive;

page.classList.toggle(„zxm-has-product-selection“,list.length>0);
var chipSection=page.querySelector(„#zz-chip-bundle“);
if(chipSection){
chipSection.classList.toggle(„is-ready“,pendantContext);
chipSection.classList.toggle(„is-context-disabled“,!pendantContext);
chipSection.setAttribute(„aria-disabled“,pendantContext?“false“:“true“);
}

if(chipToggle){
chipToggle.disabled=!pendantContext || !state.chipProduct;
chipToggle.classList.toggle(„is-selected“,state.chipSelected);
chipToggle.setAttribute(„aria-pressed“,state.chipSelected?“true“:“false“);
var txt=chipToggle.querySelector(„.zxm-chip-toggle-text“);
if(txt)txt.textContent=state.chipSelected?“Chip ausgewählt“:“Chip auswählen“;
}
if(giftStatus){
giftStatus.classList.toggle(„is-active“,giftActive);
var giftLabel=giftStatus.querySelector(„span:last-child“);
if(giftLabel && state.giftColor)giftLabel.innerHTML=“<b>Wert 39,90 €</b> · Farbe „+esc(state.giftColor)+“.“;
}

var disabled=!list.length;
if(addSelectionCart)addSelectionCart.disabled=disabled;
if(addSelectionCheckout)addSelectionCheckout.disabled=disabled;
}

page.querySelectorAll(‚.zxm-engraving-product-card[data-product-id=“‚+CSS.escape(String(product.id))+'“]‘).forEach(function(card){
card.classList.toggle(„is-selected“,next);
card.setAttribute(„aria-selected“,next?“true“:“false“);
var b=card.querySelector(„[data-select-product]“);
if(b)b.textContent=next?“✓ Ausgewählt“:“Produkt auswählen“;
});

updateSelectedUI();

if(next && productTarget(product)===“anhanger“ && state.chipSelected && !state.giftColor){
window.setTimeout(openGiftColorModal,100);
}
}

async function loadChipProduct(){
try{
var result=await fetchJson(„/wp-json/wc/store/v1/products?slug=zisano-chip&per_page=5“);
var chip=Array.isArray(result)&&result.length?result[0]:null;
if(!chip)throw new Error(„ZISANO Chip wurde über die Store API nicht gefunden.“);
state.chipProduct=chip;
if(chipPriceLabel){
chipPriceLabel.innerHTML='<strong>’+esc(money(chip.prices))+'</strong> · zum Anhänger ergänzen‘;
}
updateSelectedUI();
}catch(err){
console.warn(„[ZISANO chip bundle]“,err);
if(chipPriceLabel)chipPriceLabel.textContent=“ZISANO Chip · 15 % Bundle-Vorteil“;
}
}

async function loadGiftProduct(){
try{
var result=await fetchJson(„/wp-json/wc/store/v1/products?slug=zisano-aqua-vivas-botelo&per_page=5“);
var gift=Array.isArray(result)&&result.length?result[0]:null;
if(!gift)return;
state.giftProduct=gift;
var colors=colorOptions(gift);
if(colors.length)state.giftColors=colors.filter(function(c){return /blau|grün|gruen|rosa/i.test(c);});
if(!state.giftColors.length)state.giftColors=[„Blau“,“Grün“,“Rosa“];
renderGiftColorSwatches();
}catch(err){
console.warn(„[ZISANO Botelo colors]“,err);
}
}

function openGiftColorModal(){
if(!giftColorModal)return;
renderGiftColorSwatches();
giftColorModal.hidden=false;
giftColorModal.setAttribute(„aria-hidden“,“false“);
document.documentElement.classList.add(„zxm-modal-open“);
}

function closeGiftColorModal(){
if(!giftColorModal)return;
giftColorModal.hidden=true;
giftColorModal.setAttribute(„aria-hidden“,“true“);
document.documentElement.classList.remove(„zxm-modal-open“);
}

async function persistGiftColor(){
try{
var body=new URLSearchParams();
body.set(„action“,“zisano_save_bundle_color“);
body.set(„gift_color“,state.giftColor||““);
var r=await fetch(window.ajaxurl||“/wp-admin/admin-ajax.php“,{
method:“POST“,
credentials:“same-origin“,
headers:{„Content-Type“:“application/x-www-form-urlencoded; charset=UTF-8″},
body:body.toString()
});
var data=await r.json();
return !!(data&&data.success);
}catch(err){
console.warn(„[ZISANO gift color]“,err);
return false;
}
}

function validateGiftColor(){
if(bundleGiftActive()&&!state.giftColor){
openGiftColorModal();
return false;
}
return true;
}

async function addSimpleProductToCart(productId){
var url=new URL(„/?wc-ajax=zisano_add_to_cart“,location.origin);
var body=new URLSearchParams();
body.set(„product_id“,String(productId));
body.set(„quantity“,“1″);

var r=await fetch(url.toString(),{
method:“POST“,
credentials:“same-origin“,
headers:{„Content-Type“:“application/x-www-form-urlencoded; charset=UTF-8″},
body:body.toString()
});

async function addConfiguredProductSilent(product){
var target=productTarget(product);
var selectedSize=target===“verschluss“?(state.productSizes[product.id]||““):““;
if(target===“verschluss“&&!selectedSize){
return {ok:false,message:“Bitte zuerst eine Armbandgröße auswählen.“,product:product};
}

var c=state.confirmed[target];
if(!c){
return {ok:false,message:“Bitte bestätige zuerst deine Auswahl für diesen Produkttyp.“,product:product};
}

var body=new URLSearchParams();
body.set(„product_id“,String(product.id));
body.set(„quantity“,“1″);

if(!c.noEngraving){
body.set(„zisano_gravur_target“,target);
body.set(„zisano_gravur_type“,c.type||“Gravur“);
body.set(„zisano_gravur_value“,c.value||““);
body.set(„zisano_gravur_description“,c.description||c.value||““);
body.set(„zisano_gravur_position“,c.position||targetPositions[target]||““);
}

if(target===“verschluss“){
var variation=await getBraceletVariation(product,selectedSize);
if(!variation||!appendVariationPayload(body,variation)){
return {
ok:false,
message:“Die Größe „+selectedSize+“ ist für dieses Armband aktuell nicht verfügbar.“,
product:product
};
}
body.set(„zisano_size_label“,selectedSize);
}

var response=await fetch(„/?wc-ajax=zisano_add_to_cart“,{
method:“POST“,
credentials:“same-origin“,
headers:{„Content-Type“:“application/x-www-form-urlencoded; charset=UTF-8″},
body:body.toString()
});

var data=await response.json();

if(data&&data.error){
return {
ok:false,
message:data.message||“Produkt konnte nicht hinzugefügt werden.“,
product:product
};
}

return {ok:true,data:data||{},product:product};
}
async function persistBirthdayGift(){
if(!birthdateInput||!birthdateInput.value)return false;
var payload={birthdate:birthdateInput.value,marketingConsent:!!(birthdayMarketing&&birthdayMarketing.checked)};
try{sessionStorage.setItem(„zisanoBirthdayGift“,JSON.stringify(payload));}catch(e){}
try{
var body=new URLSearchParams();
body.set(„action“,“zisano_save_birthday_gift“);
body.set(„birthdate“,payload.birthdate);
body.set(„marketing_consent“,payload.marketingConsent?“1″:“0″);
var r=await fetch(window.ajaxurl||“/wp-admin/admin-ajax.php“,{method:“POST“,credentials:“same-origin“,headers:{„Content-Type“:“application/x-www-form-urlencoded; charset=UTF-8″},body:body.toString()});
var data=await r.json();
return !!(data&&data.success);
}catch(err){console.warn(„[ZISANO birthday]“,err);return false;}
}

function validateBirthdayGift(){
/* v48: birthday gift is optional and must never block cart/checkout. */
if(birthdayStatus)birthdayStatus.textContent=““;
return true;
}

async function addWholeSelection(goCheckout){
var list=selectedProducts();
if(!list.length)return;
if(!validateGiftColor())return;
await persistGiftColor();
if(hasBirthdate())await persistBirthdayGift();

var button=goCheckout?addSelectionCheckout:addSelectionCart;
var original=button?button.innerHTML:““;
if(button){button.disabled=true;button.textContent=“Wird vorbereitet …“;}

try{
for(var i=0;i<list.length;i++){
var result=await addConfiguredProductSilent(list[i]);
if(!result.ok){
throw new Error(result.message||“Ein Produkt konnte nicht hinzugefügt werden.“);
}
}

if(bundleGiftActive()&&state.chipProduct){
await addSimpleProductToCart(state.chipProduct.id);
}

document.body.dispatchEvent(new CustomEvent(„zisano:cart-updated“,{detail:{source:“zodiac-bundle“}}));

var cartUrl=(window.wc_add_to_cart_params&&window.wc_add_to_cart_params.cart_url)||“/warenkorb/“;
var checkoutUrl=(window.wc_checkout_params&&window.wc_checkout_params.checkout_url)||“/kasse/“;
location.href=goCheckout?checkoutUrl:cartUrl;
}catch(err){
console.error(„[ZISANO selection cart]“,err);
if(orderSummaryNote)orderSummaryNote.textContent=err&&err.message?err.message:“Ein Produkt konnte nicht automatisch hinzugefügt werden. Bitte prüfe die ausgewählten Größen.“;
if(button){button.disabled=false;button.innerHTML=original;}
}
}

async function addConfiguredProduct(btn){
var id=String(btn.dataset.addConfiguredProduct||““);
var product=state.products.find(function(p){return String(p.id)===id;});
if(!product)return;

var target=productTarget(product);
var selectedSize=target===“verschluss“?(state.productSizes[product.id]||““):““;
if(target===“verschluss“&&!selectedSize){
if(orderSummaryNote)orderSummaryNote.textContent=“Bitte wähle zuerst eine Armbandgröße aus.“;
return;
}

var c=currentConfirmedForTarget(target);
if(!c||!c.value){
alert(„Bitte bestätige zuerst deine Gravur.“);
return;
}

var original=btn.textContent;
btn.disabled=true;
btn.textContent=“Wird hinzugefügt …“;

try{
var result=await addConfiguredProductSilent(product);
if(!result.ok)throw new Error(result.message||“Produkt konnte nicht hinzugefügt werden.“);

btn.textContent=“✓ Im Warenkorb“;
document.body.dispatchEvent(new CustomEvent(„zisano:cart-updated“,{detail:result.data||{}}));

if(window.jQuery){
window.jQuery(document.body).trigger(„added_to_cart“,[
(result.data&&result.data.fragments)||{},
(result.data&&result.data.cart_hash)||““,
null
]);
}

var select=e.target.closest(„[data-select-product]“);
if(select){
e.preventDefault();
e.stopPropagation();
toggleProductSelection(select.dataset.selectProduct);
return;
}

var card=e.target.closest(„.zxm-engraving-product-card“);
if(card && !e.target.closest(„a,button“)){
e.preventDefault();
toggleProductSelection(card.dataset.productId);
return;
}

var btn=e.target.closest(„[data-add-configured-product]“);
if(!btn)return;
e.preventDefault();
addConfiguredProduct(btn);
});

page.addEventListener(„keydown“,function(e){
var card=e.target.closest&&e.target.closest(„.zxm-engraving-product-card“);
if(card && (e.key===“Enter“||e.key===“ „)){
e.preventDefault();
toggleProductSelection(card.dataset.productId);
}
});

if(chipToggle)chipToggle.addEventListener(„click“,function(){
if(chipToggle.disabled)return;
state.chipSelected=!state.chipSelected;

if(!state.chipSelected){
state.giftColor=““;
persistGiftColor();
}

updateSelectedUI();

if(state.chipSelected&&state.target===“anhanger“&&!state.giftColor){
openGiftColorModal();
}
});

if(giftColorModal){
giftColorModal.addEventListener(„click“,function(e){
var colorBtn=e.target.closest&&e.target.closest(„[data-gift-color]“);
if(colorBtn){
e.preventDefault();
state.giftColor=colorBtn.dataset.giftColor||““;
renderGiftColorSwatches();
persistGiftColor();
updateSelectedUI();
window.setTimeout(closeGiftColorModal,120);
return;
}

var closeBtn=e.target.closest&&e.target.closest(„[data-gift-color-close]“);
if(closeBtn){
e.preventDefault();
closeGiftColorModal();
}
});

document.addEventListener(„keydown“,function(e){
if(e.key===“Escape“ && !giftColorModal.hidden)closeGiftColorModal();
});
}

if(birthdateInput){
birthdateInput.addEventListener(„input“,function(){if(birthdayStatus)birthdayStatus.textContent=““;updateSelectedUI();});
birthdateInput.addEventListener(„change“,function(){persistBirthdayGift();updateSelectedUI();});
}
if(birthdayMarketing)birthdayMarketing.addEventListener(„change“,function(){persistBirthdayGift();});

if(addSelectionCart)addSelectionCart.addEventListener(„click“,function(){addWholeSelection(false);});
if(addSelectionCheckout)addSelectionCheckout.addEventListener(„click“,function(){addWholeSelection(true);});

page.querySelectorAll(„[data-product-target-filter]“).forEach(function(btn){
btn.addEventListener(„click“,function(){setProductView(btn.dataset.productTargetFilter);});
});
var openSelected=page.querySelector(„#zz-open-selected“);
if(openSelected)openSelected.addEventListener(„click“,function(){
var chipSection=page.querySelector(„#zz-chip-bundle“);
if(chipSection)chipSection.scrollIntoView({behavior:“smooth“,block:“center“});
});

var prev=page.querySelector(„[data-product-prev]“),next=page.querySelector(„[data-product-next]“);

function moveProductTrack(e,dir){
if(e){
e.preventDefault();
e.stopPropagation();
}

/* Product navigation must never change engraving confirmation. */
updateUnlockState();

if(track){
track.scrollBy({
left:dir*Math.max(280,track.clientWidth*.76),
behavior:“smooth“
});
}

window.setTimeout(updateUnlockState,180);
}

if(prev)prev.addEventListener(„click“,function(e){moveProductTrack(e,-1);});
if(next)next.addEventListener(„click“,function(e){moveProductTrack(e,1);});

async function fetchJson(url){
var r=await fetch(url,{credentials:“same-origin“,headers:{„Accept“:“application/json“}});
if(!r.ok)throw new Error(url+“ · HTTP „+r.status);
return await r.json();
}

async function loadProducts(){
if(!track)return;
try{
var cats=await fetchJson(„/wp-json/wc/store/v1/products/categories?per_page=100“);
var wanted=(Array.isArray(cats)?cats:[]).filter(function(c){return categorySlugs.indexOf(c.slug)>-1;});
var all=[];

for(var i=0;i<wanted.length;i++){
var c=wanted[i];
try{
var list=await fetchJson(„/wp-json/wc/store/v1/products?category=“+encodeURIComponent(c.id)+“&per_page=100&orderby=menu_order&order=asc“);
(Array.isArray(list)?list:[]).forEach(function(p){p._zodiacCategory=c.slug;all.push(p);});
}catch(categoryError){
console.warn(„ZISANO category load:“,c.slug,categoryError);
}
}

/* Bottle by explicit product ID. Try direct endpoint first, then include query fallback. */
try{
var bottle=await fetchJson(„/wp-json/wc/store/v1/products/“+bottleId);
if(bottle&&bottle.id){bottle._zodiacCategory=“flasche“;all.push(bottle);}
}catch(bottleError){
try{
var bottles=await fetchJson(„/wp-json/wc/store/v1/products?include=“+bottleId+“&per_page=10“);
(Array.isArray(bottles)?bottles:[]).forEach(function(p){p._zodiacCategory=“flasche“;all.push(p);});
}catch(bottleFallbackError){
console.warn(„ZISANO bottle load:“,bottleFallbackError);
}
}

var seen={};
state.products=all.filter(function(p){
if(!p||!p.id||seen[p.id])return false;
seen[p.id]=1;
return true;
});

if(!state.products.length)throw new Error(„Keine gravierbaren Produkte von der Store API erhalten.“);

renderProducts();
updateSelectedUI();
}catch(err){
console.warn(„ZISANO multi engraving product loader:“,err);
track.innerHTML='<div class=“zxm-product-loading“><span>Produkte konnten nicht geladen werden. Bitte prüfe, ob die WooCommerce Store API auf dieser Seite erreichbar ist. Der Loader selbst läuft weiter und schreibt den technischen Fehler in die Browser-Konsole.</span></div>‘;
}
}

/* Restore confirmed engravings if this configurator is re-initialised
by the page builder/browser without a full user workflow restart. */
try{
var storedConfirmed=
sessionStorage.getItem(„zisanoMultiEngraving“)||
localStorage.getItem(„zisanoMultiEngraving“);

if(storedConfirmed){
var parsedConfirmed=JSON.parse(storedConfirmed);

if(parsedConfirmed && typeof parsedConfirmed===“object“){
state.confirmed=parsedConfirmed;

Object.keys(parsedConfirmed).forEach(function(target){
var saved=parsedConfirmed[target];
if(saved&&typeof saved===“object“){
state.configs[target]=Object.assign({},saved);
state.noEngraving[target]=!!saved.noEngraving;
}
});
}
}
}catch(err){}

/* Initial state */
if(!state.configs[state.target])saveCurrentConfig();
page.dataset.engravingTarget=“verschluss“;
if(carousel)carousel.dataset.currentTarget=“verschluss“;
switchTarget(„verschluss“,false);
updateUnlockState();
state.chipSelected=false;
try{localStorage.removeItem(„zisanoChipBundleSelected“);}catch(e){}
updateSelectedUI();
loadProducts();
loadChipProduct();
loadGiftProduct();
window.addEventListener(„resize“,function(){window.clearTimeout(window.__zzEqTimer);window.__zzEqTimer=window.setTimeout(equalizeProductCardHeights,120);});

})();

/* ===== zz-v5-cosmic-stars-js ===== */
(function(){
var hero=document.querySelector(„.zxm-page .zxm-hero“);
var field=hero&&hero.querySelector(„.zxm-cosmic-stars“);
if(!field || field.dataset.ready)return;
field.dataset.ready=“1″;
var seed=20261224;
function rnd(){seed=(seed*1664525+1013904223)>>>0;return seed/4294967296;}
for(var i=0;i<86;i++){
var s=document.createElement(„span“);
s.className = „zxm-cosmic-star“+(rnd()>.78?“ is-gold“:““);
s.style.left=(2+rnd()*96).toFixed(2)+“%“;
s.style.top=(3+rnd()*91).toFixed(2)+“%“;
s.style.setProperty(„–s“,(.9+rnd()*3.0).toFixed(2)+“px“);
s.style.setProperty(„–o“,(.38+rnd()*.60).toFixed(2));
s.style.setProperty(„–d“,(5.4+rnd()*6.8).toFixed(2)+“s“);
s.style.setProperty(„–delay“,(-rnd()*6).toFixed(2)+“s“);
field.appendChild(s);
}
})();

/* ===== zz-v32-target-engraving-rules ===== */
(function(){
„use strict“;

var page=document.querySelector(„.zxm-page“);
if(!page)return;

var preview=page.querySelector(„#zz-engraving-preview“);
var summaryType=page.querySelector(„#zz-summary-type“);
var summaryValue=page.querySelector(„#zz-summary-value“);

/* Old bottle image remains in the DOM for backwards compatibility,
but v32 renders bottle2.png through its own independent layer. */
var oldBottleArtwork=page.querySelector(„#zz-zodiac-artwork-preview“);
var bottleLayer=page.querySelector(„#zz-bottle-artwork-layer“);

var monogramInput=page.querySelector(„[data-monogram-input]“);
var monogramLabel=page.querySelector(„[data-monogram-label]“);
var monogramHint=page.querySelector(„[data-monogram-hint]“);
var monogramOptionNote=page.querySelector(„[data-monogram-option-note]“);

var pendantLinesWrap=page.querySelector(„[data-pendant-lines]“);
var pendantLineInputs=[].slice.call(page.querySelectorAll(„[data-pendant-line]“));

var dateInput=page.querySelector(„[data-date-input]“);
var dateLabel=page.querySelector(„[data-date-label]“);
var dateHint=page.querySelector(„[data-date-hint]“);

var zodiacButton=page.querySelector(‚[data-engraving-type=“zodiac“]‘);
var chineseButton=page.querySelector(‚[data-engraving-type=“chinese“]‘);
var moonButton=page.querySelector(‚[data-engraving-type=“moon“]‘);
var dateButton=page.querySelector(‚[data-engraving-type=“date“]‘);
var wordButton=page.querySelector(‚[data-engraving-type=“word“]‘);

var mainCard=page.querySelector(„.zxm-config-main-card .zxm-builder-card“);
var builderGrid=page.querySelector(„.zxm-builder-grid“);

var lastTarget=page.dataset.engravingTarget||“verschluss“;
var lastType=getType();

var rawState={
verschluss:{
initials:monogramInput?monogramInput.value:“VB“,
date:““
},
anhanger:{
initials:[„“,““,““],
date:dateInput?dateInput.value:““
},
flasche:{
initials:monogramInput?monogramInput.value:““,
date:dateInput?dateInput.value:““
}
};

function getTarget(){
return page.dataset.engravingTarget||“verschluss“;
}

function getType(){
var active=page.querySelector(„[data-engraving-type].is-active“);
return active?active.dataset.engravingType:“zodiac“;
}

function syncTypeDataset(){
page.dataset.engravingType=getType();
}

function activeSymbolButton(){
return page.querySelector(„.zxm-symbol-button.is-active“);
}

function cleanSingleLine(value,max){
return String(value||““)
.replace(/\r?\n/g,“ „)
.replace(/\s+/g,“ „)
.trim()
.slice(0,max);
}

/* Live pendant typing must preserve one trailing space.
Otherwise pressing SPACE at the end of a word is immediately
removed before the next word can be typed. */
function cleanPendantTyping(value,max){
return String(value||““)
.replace(/\r?\n/g,“ „)
.replace(/ {2,}/g,“ „)
.slice(0,max);
}

function buildPendantLinesFromInputs(){
return pendantLineInputs
.map(function(input){return cleanSingleLine(input.value,20);})
.filter(function(line){return line!==““;});
}

function fillPendantInputs(lines){
pendantLineInputs.forEach(function(input,idx){
input.value=lines[idx] || „“;
});
}

/* Date stays deliberately stacked one character below the other.
The NAME is different in v32: it is one large rotated word. */
function formatVerticalDate(value){
return cleanSingleLine(value,8).split(„“).join(„\n“);
}

function setPreviewText(value){
if(!preview)return;

preview.textContent=value||““;
preview.setAttribute(„data-engraving“,value||““);
preview.classList.add(„is-text“);

preview.style.removeProperty(„opacity“);
preview.removeAttribute(„aria-hidden“);
}

function clearArtworkStateForText(){
page.classList.remove(
„zxm-has-bracelet-zodiac“,
„zxm-has-pendant-zodiac“,
„zxm-has-bottle-zodiac“
);

if(bottleLayer){
bottleLayer.classList.remove(„is-visible“);
bottleLayer.style.backgroundImage=“none“;
}
}

/* —————————————————————
AVAILABLE ENGRAVING TYPES
Bracelet: zodiac / chinese / monogram only.
Pendant: zodiac / chinese / monogram / date.
Bottle: zodiac / monogram / date.
————————————————————— */
function optionAllowed(target,type){
if(target===“verschluss“){
return [„zodiac“,“chinese“,“initials“].indexOf(type)>-1;
}
if(target===“anhanger“){
return [„zodiac“,“chinese“,“initials“,“date“].indexOf(type)>-1;
}
if(target===“flasche“){
return [„zodiac“,“initials“,“date“].indexOf(type)>-1;
}
return true;
}

function updateAvailability(){
var target=getTarget();

[
{btn:chineseButton,type:“chinese“},
{btn:moonButton,type:“moon“},
{btn:dateButton,type:“date“},
{btn:wordButton,type:“word“}
].forEach(function(item){
if(!item.btn)return;

var allowed=optionAllowed(target,item.type);
item.btn.hidden=!allowed;
item.btn.setAttribute(„aria-hidden“,allowed?“false“:“true“);
item.btn.tabIndex=allowed?0:-1;
});

var current=getType();

if(!optionAllowed(target,current) && zodiacButton){
window.setTimeout(function(){
zodiacButton.click();
},0);
return false;
}

return true;
}

/* —————————————————————
INPUT FIELDS
————————————————————— */
function updateFieldRules(){
var target=getTarget();

if(monogramInput && monogramLabel && monogramHint){
if(target===“verschluss“){
monogramInput.maxLength=9;
monogramInput.placeholder=“z. B. VILMOS“;
monogramInput.hidden=false;

if(pendantLinesWrap)pendantLinesWrap.hidden=true;

monogramLabel.textContent=“MONOGRAMM · MAX. 9 ZEICHEN“;
monogramHint.textContent=“Bis zu 9 Zeichen auf dem Armband-Verschluss.“;

if(monogramOptionNote){
monogramOptionNote.textContent=“Bis 9 Zeichen“;
}
}

else if(target===“anhanger“){
monogramInput.hidden=true;

if(pendantLinesWrap)pendantLinesWrap.hidden=false;

monogramLabel.textContent=“MONOGRAMM · 3 ZEILEN · JE MAX. 20 ZEICHEN“;
monogramHint.textContent=“Jede Zeile separat eingeben · maximal 20 Zeichen pro Zeile. Die drei Zeilen werden mittig auf dem Anhänger gesetzt.“;

if(monogramOptionNote){
monogramOptionNote.textContent=“3 × 20 Zeichen“;
}
}

else{
/* Bottle name: one word, maximum 8 characters.
It is rotated vertically in CSS – NOT split into letters. */
monogramInput.maxLength=8;
monogramInput.placeholder=“z. B. MARIANNA“;
monogramInput.hidden=false;

if(pendantLinesWrap)pendantLinesWrap.hidden=true;

monogramLabel.textContent=“NAME / MONOGRAMM · MAX. 8 ZEICHEN · VERTIKAL“;
monogramHint.textContent=“Die Buchstaben werden groß und gleichmäßig untereinander auf dem Flaschenkörper dargestellt.“;

if(monogramOptionNote){
monogramOptionNote.textContent=“8 Zeichen · vertikal“;
}
}
}

if(dateInput && dateLabel && dateHint){
if(target===“flasche“){
dateInput.maxLength=8;
dateInput.placeholder=“03.12.24″;
dateLabel.textContent=“DEIN PERSÖNLICHES DATUM · MAX. 8 ZEICHEN“;
dateHint.textContent=“Beispiel: 03.12.24 – groß, kontrastreich und untereinander auf dem Flaschenkörper.“;
}else{
dateInput.maxLength=10;
dateInput.placeholder=“TT.MM.JJJJ“;
dateLabel.textContent=“DEIN PERSÖNLICHES DATUM“;
dateHint.textContent=““;
}
}
}

function saveRaw(target,type){
if(!rawState[target])return;

if(type===“initials“){
if(target===“anhanger“){
rawState.anhanger.initials=buildPendantLinesFromInputs();
}else if(monogramInput){
rawState[target].initials=monogramInput.value||““;
}
return;
}

if(type===“date“ && dateInput){
rawState[target].date=dateInput.value||““;
}
}

function restoreRaw(target,type){
if(!rawState[target])return;

if(type===“initials“){
if(target===“anhanger“){
fillPendantInputs(
Array.isArray(rawState.anhanger.initials)
? rawState.anhanger.initials
: []
);
}else if(monogramInput){
monogramInput.value=
typeof rawState[target].initials===“string“
? rawState[target].initials
: „“;
}
return;
}

if(type===“date“ && dateInput){
dateInput.value=rawState[target].date||““;
}
}

/* —————————————————————
TEXT PREVIEWS
————————————————————— */
function syncMonogramPreview(){
var target=getTarget();
var raw=““;
var formatted=““;

syncTypeDataset();

if(target===“anhanger“){
var lines=buildPendantLinesFromInputs();

formatted=lines.join(„\n“);
raw=lines.join(“ / „);

setPreviewText(formatted);
}

else if(target===“flasche“){
raw=cleanSingleLine(monogramInput?monogramInput.value:““,8);

if(monogramInput){
monogramInput.value=raw;
}

/* Bottle name: letters go downward one below the other. */
formatted=raw.split(„“).join(„\n“);
setPreviewText(formatted);
}

else{
raw=cleanSingleLine(monogramInput?monogramInput.value:““,9);

if(monogramInput){
monogramInput.value=raw;
}

formatted=raw;
setPreviewText(formatted);
}

clearArtworkStateForText();

if(summaryType){
summaryType.textContent=“Monogramm“;
}

if(summaryValue){
summaryValue.textContent=raw||““;
}

saveRaw(target,“initials“);
}

function syncDatePreview(){
var target=getTarget();

syncTypeDataset();

var raw=
target===“flasche“
? cleanSingleLine(dateInput?dateInput.value:““,8)
: cleanSingleLine(dateInput?dateInput.value:““,10);

if(dateInput){
dateInput.value=raw;
}

var formatted=
target===“flasche“
? formatVerticalDate(raw)
: raw;

setPreviewText(formatted);
clearArtworkStateForText();

if(summaryType){
summaryType.textContent=“Persönliches Datum“;
}

if(summaryValue){
summaryValue.textContent=raw||““;
}

saveRaw(target,“date“);
}

/* —————————————————————
BOTTLE2 ARTWORK
Uses a separate background layer so older JS cannot hide it.
————————————————————— */
function versionedUrl(raw){
if(!raw)return „“;

try{
var u=new URL(raw,window.location.href);
u.searchParams.set(„zzv“,“20260812-32″);
return u.toString();
}catch(e){
return raw+(raw.indexOf(„?“)>-1?“&“:“?“)+“zzv=20260812-32″;
}
}

function hideBottleArtwork(){
if(oldBottleArtwork){
oldBottleArtwork.hidden=true;
oldBottleArtwork.style.setProperty(„display“,“none“,“important“);
}

if(bottleLayer){
bottleLayer.classList.remove(„is-visible“);
bottleLayer.style.backgroundImage=“none“;
}
}

function setBottleLayerImage(url){
if(!bottleLayer || !url)return;

bottleLayer.style.backgroundImage=’url(„‚+String(url).replace(/“/g,“%22″)+'“)‘;
bottleLayer.classList.add(„is-visible“);
}

function forceBottleArtwork(){
syncTypeDataset();

if(getTarget()!==“flasche“ || getType()!==“zodiac“){
hideBottleArtwork();
return;
}

var active=activeSymbolButton();
var raw=active && active.dataset.artworkBottle
? active.dataset.artworkBottle
: „“;

if(!raw){
hideBottleArtwork();
return;
}

/* Old image is disabled; only v32 layer is used. */
if(oldBottleArtwork){
oldBottleArtwork.hidden=true;
oldBottleArtwork.style.setProperty(„display“,“none“,“important“);
}

var cacheBusted=versionedUrl(raw);
var probe=new Image();

probe.onload=function(){
setBottleLayerImage(cacheBusted);
};

probe.onerror=function(){
/* If a CDN/cache dislikes the query string, try the original URL. */
var fallback=new Image();

fallback.onload=function(){
setBottleLayerImage(raw);
};

fallback.onerror=function(){
hideBottleArtwork();
};

fallback.src=raw;
};

probe.src=cacheBusted;
}

/* —————————————————————
Match the bottle preview panel height to the left configuration
card on desktop. No hard-coded desktop height is necessary.
————————————————————— */
function syncBottlePanelHeight(){
if(!builderGrid || !mainCard)return;

if(window.innerWidth<1181 || getTarget()!==“flasche“){
builderGrid.style.removeProperty(„–zz-bottle-match-height“);
return;
}

var h=Math.ceil(mainCard.getBoundingClientRect().height);

if(h>0){
builderGrid.style.setProperty(
„–zz-bottle-match-height“,
h+“px“
);
}
}

if(„ResizeObserver“ in window && mainCard){
new ResizeObserver(function(){
window.requestAnimationFrame(syncBottlePanelHeight);
}).observe(mainCard);
}

window.addEventListener(„resize“,function(){
window.requestAnimationFrame(syncBottlePanelHeight);
});

/* —————————————————————
MAIN SYNCHRONISATION
————————————————————— */
function syncTextPreviewIfNeeded(){
syncTypeDataset();

var type=getType();

if(type===“initials“){
syncMonogramPreview();
}

else if(type===“date“){
syncDatePreview();
}

else{
if(type!==“zodiac“){
hideBottleArtwork();
}

window.setTimeout(forceBottleArtwork,30);
}

window.requestAnimationFrame(syncBottlePanelHeight);
}

page.querySelectorAll(„[data-engraving-target]“).forEach(function(btn){
btn.addEventListener(„click“,function(){
saveRaw(lastTarget,lastType);

lastTarget=btn.dataset.engravingTarget||lastTarget;

window.setTimeout(function(){
lastTarget=getTarget();
lastType=getType();

restoreRaw(lastTarget,lastType);

if(!updateAvailability())return;

syncTypeDataset();
updateFieldRules();
syncTextPreviewIfNeeded();
},50);
});
});

page.querySelectorAll(
„[data-preview-prev],[data-preview-next],[data-target-prev],[data-target-next]“
).forEach(function(btn){
btn.addEventListener(„click“,function(){
saveRaw(lastTarget,lastType);

window.setTimeout(function(){
lastTarget=getTarget();
lastType=getType();

restoreRaw(lastTarget,lastType);

if(!updateAvailability())return;

syncTypeDataset();
updateFieldRules();
syncTextPreviewIfNeeded();
},65);
});
});

page.querySelectorAll(„[data-engraving-type]“).forEach(function(btn){
btn.addEventListener(„click“,function(){
saveRaw(getTarget(),lastType);

lastType=btn.dataset.engravingType||lastType;

window.setTimeout(function(){
lastType=getType();

restoreRaw(getTarget(),lastType);

if(!updateAvailability())return;

syncTypeDataset();
updateFieldRules();
syncTextPreviewIfNeeded();
},40);
});
});

if(monogramInput){
monogramInput.addEventListener(„input“,function(){
if(getType()===“initials“ && getTarget()!==“anhanger“){
syncMonogramPreview();
}
});

monogramInput.addEventListener(„change“,function(){
if(getType()===“initials“ && getTarget()!==“anhanger“){
syncMonogramPreview();
}
});
}

pendantLineInputs.forEach(function(input){
input.addEventListener(„input“,function(){
if(getType()===“initials“ && getTarget()===“anhanger“){
input.value=cleanPendantTyping(input.value,20);
syncMonogramPreview();
}
});

input.addEventListener(„change“,function(){
if(getType()===“initials“ && getTarget()===“anhanger“){
input.value=cleanPendantTyping(input.value,20);
syncMonogramPreview();
}
});
});

if(dateInput){
dateInput.addEventListener(„input“,function(){
if(getType()===“date“){
syncDatePreview();
}
});

dateInput.addEventListener(„change“,function(){
if(getType()===“date“){
syncDatePreview();
}
});
}

page.addEventListener(„click“,function(e){
if(e.target.closest(„.zxm-symbol-button“)){
window.setTimeout(function(){
syncTypeDataset();
forceBottleArtwork();
},55);
}
});

/* Initial v32 state. */
window.setTimeout(function(){
lastTarget=getTarget();
lastType=getType();

restoreRaw(lastTarget,lastType);

if(!updateAvailability())return;

syncTypeDataset();
updateFieldRules();
syncTextPreviewIfNeeded();
syncBottlePanelHeight();
},110);

})();

/* ===== zz-v36-fixed-engraving-cleanup ===== */
(function(){
try{
sessionStorage.removeItem(„zisanoPreviewAdjustmentsV34“);
sessionStorage.removeItem(„zisanoPreviewAdjustmentsV35“);
localStorage.removeItem(„zisanoPreviewAdjustmentsV34“);
localStorage.removeItem(„zisanoPreviewAdjustmentsV35“);
}catch(e){}
})();

/* ===== zz-explorer-controller-v11 ===== */
(function(){
var page=document.querySelector(‚.zxm-page‘); if(!page)return;
var subTabs=[].slice.call(page.querySelectorAll(‚[data-zz-subtool]‘));
var subPanels=[].slice.call(page.querySelectorAll(‚[data-zz-subpanel]‘));
function activateSub(name){
subTabs.forEach(function(btn){var on=btn.dataset.zzSubtool===name;btn.classList.toggle(‚is-active‘,on);btn.setAttribute(‚aria-selected‘,on?’true‘:’false‘);});
subPanels.forEach(function(panel){panel.classList.toggle(‚is-active‘,panel.dataset.zzSubpanel===name);});
}
subTabs.forEach(function(btn){btn.addEventListener(‚click‘,function(){activateSub(btn.dataset.zzSubtool);});});

}
if(document.readyState === „loading“) {
document.addEventListener(„DOMContentLoaded“, bootZisanoXmas, { once:true });
} else {
bootZisanoXmas();
}
})();

/* =====================================================================
ZISANO CHRISTMAS REWRITE — conversion controller
IDs and data-* attributes are intentionally stable integration hooks.
===================================================================== */
(function(){
„use strict“;
function ready(fn){
if(document.readyState === „loading“) document.addEventListener(„DOMContentLoaded“,fn,{once:true});
else fn();
}
ready(function(){
var page=document.querySelector(„.zxm-page“);
if(!page || page.dataset.rewriteUxReady === „1“) return;
page.dataset.rewriteUxReady=“1″;

// New conversion-first hero behaviour.
qa(‚[data-zz-jump-builder]‘).forEach(function(btn){
btn.addEventListener(‚click‘,function(e){
e.preventDefault();
activateMode(‚personalisiert‘,false);
window.setTimeout(function(){scrollToNode(q(‚#zz-personal-builder‘));},55);
});
});
var openMatch=q(‚[data-open-zodiac-match]‘);
if(openMatch)openMatch.addEventListener(‚click‘,function(){activateMode(’sternzeichen‘,true);});

// Progress navigation.
qa(‚[data-conversion-step]‘).forEach(function(btn){
btn.addEventListener(‚click‘,function(){
var step=Number(btn.dataset.conversionStep||1);
if(step<=2)scrollToNode(q(‚#zz-personal-builder‘));
else if(step===3)scrollToNode(q(‚#zz-engraving-products‘));
else scrollToNode(q(‚#zz-order-summary-card‘),’center‘);
});
});

// Floating contextual CTA.
var dock=document.createElement(‚div‘);
dock.className=’zxm-conversion-dock‘;
dock.innerHTML='<div class=“zxm-conversion-dock__copy“><small>CHRISTMAS ZODIAC</small><strong>Dein persönliches Geschenk gestalten</strong></div><button type=“button“>Jetzt personalisieren →</button>‘;
document.body.appendChild(dock);
var dockCopy=dock.querySelector(’strong‘);
var dockButton=dock.querySelector(‚button‘);

// After a product has been picked, surface optional bonuses once.
var bonus=q(‚.zxm-bonuses‘);
var selectedCount=q(‚#zz-selected-count‘);
if(bonus&&selectedCount){
new MutationObserver(function(){
if(countSelected()>0 && bonus.dataset.autoOpened!==’1′){
bonus.open=true;bonus.dataset.autoOpened=’1′;
}
}).observe(selectedCount,{childList:true,characterData:true,subtree:true});
}

// Keep active Zodiac result close to the selector.
qa(‚.zxm-zodiac-radio‘).forEach(function(radio){
radio.addEventListener(‚change‘,function(){
if(!radio.checked)return;
var key=radio.id.replace(‚zodiac-‚,“);
window.setTimeout(function(){scrollToNode(q(‚.zxm-profile-panel–‚+key));},60);
});
});

// Observe existing commerce state instead of duplicating its logic.
var stateNodes=[q(‚#zz-confirmed-targets‘),q(‚#zz-selected-count‘),q(‚#zz-order-summary-count‘)].filter(Boolean);
if(stateNodes.length){
var stateObserver=new MutationObserver(updateProgress);
stateNodes.forEach(function(n){stateObserver.observe(n,{childList:true,characterData:true,subtree:true,attributes:true});});
}
qa(‚[data-zz-tool]‘).forEach(function(t){t.addEventListener(‚click‘,function(){window.setTimeout(updateDock,60);});});
window.addEventListener(’scroll‘,dockVisibility,{passive:true});
window.addEventListener(‚resize‘,dockVisibility,{passive:true});

// Respect deep links but otherwise start in the purchase-oriented Studio.
var hash=window.location.hash||“;
if(/finder|zodiac/i.test(hash))activateMode(’sternzeichen‘,false);
else if(/astro|aszendent|mondkalender|chinesisches/i.test(hash))activateMode(‚explorer‘,false);
else activateMode(‚personalisiert‘,false);
updateProgress();dockVisibility();
});
})();

</script>

Persönlich für dich da.

Wir verwenden Cookies, um unsere Website und unseren Service zu optimieren.