/* Bündler 3 (Emin 12.11.2026): Karten mit eigenem Auswahl-Knopf, großem Preis, Spar-Balken, „Größte Ersparnis“, Funken bei der Wahl.
   Ein Hingucker: die gewählte Karte mit wanderndem Regenbogen-Rahmen und Glanz – der Rest ruhig. Bewegung nur ohne „Bewegung reduzieren“. */
@property --bc3a{syntax:'<angle>';inherits:false;initial-value:0deg}
.v3 .bc3{gap:12px;margin:18px 0 14px}
.v3 .bc3 legend{font:650 15px/1.3 "Inter Tight",sans-serif;margin-bottom:8px;color:var(--ink)}

/* Karten */
.v3 .bc3 .bcopt{position:relative;display:block;padding:14px 16px 14px 52px;border:1.5px solid #e3e6f3;border-radius:22px;background:rgba(255,255,255,.96);cursor:pointer;
 transition:border-color .25s,box-shadow .4s var(--ease),transform .45s cubic-bezier(.3,1.4,.5,1),background-color .3s;animation:bc3In .6s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms + 60ms)}
.v3 .bc3 .bcsingle{--i:-1;padding-top:13px;padding-bottom:13px}
@media(hover:hover){.v3 .bc3 .bcopt:hover{transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(30,40,110,.45)}}
.v3 .bc3 .bcopt:has(input:checked){border-color:transparent;transform:scale(1.012);
 background:linear-gradient(160deg,#f1f3ff,#fff 52%,#fff7ea) padding-box,conic-gradient(from var(--bc3a),#2b4bff,#7c4dff,#ff5a9c,#ffb020,#10b981,#2b4bff) border-box;
 box-shadow:0 22px 44px -26px rgba(43,75,255,.6),0 2px 0 rgba(255,255,255,.6) inset;animation:bc3In .6s var(--ease) both,bc3Spin 5s linear infinite}
.v3 .bc3 .bcsingle:has(input:checked){background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2b4bff,#7c4dff) border-box;animation:bc3In .6s var(--ease) both}
.v3 .bc3 .bcopt input{position:absolute;left:16px;top:16px;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.v3 .bc3 .bcsingle input{top:50%;translate:0 -50%}

/* Auswahl-Knopf: Kreis füllt sich mit Verlauf, Häkchen zeichnet sich */
.v3 .bc3 .bcorb{position:absolute;left:16px;top:16px;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px #c9cfe6;background:#fff;display:grid;place-items:center;
 transition:box-shadow .25s,background .3s,transform .35s cubic-bezier(.3,1.8,.5,1);pointer-events:none}
.v3 .bc3 .bcsingle .bcorb{top:50%;margin-top:-12px}
.v3 .bc3 .bcorb svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s .08s ease-out}
.v3 .bc3 .bcopt:has(input:checked) .bcorb{background:linear-gradient(135deg,#2b4bff,#7c4dff);box-shadow:0 6px 14px -4px rgba(43,75,255,.6);transform:scale(1.08)}
.v3 .bc3 .bcopt:has(input:checked) .bcorb svg{stroke-dashoffset:0}
.v3 .bc3 .bcopt:has(input:focus-visible) .bcorb{outline:3px solid rgba(43,75,255,.4);outline-offset:3px}
.v3 .bc3 .bcopt:hover .bcorb{box-shadow:inset 0 0 0 2px #8f9cf5}

/* Kopf: Bilder, Text, Preis */
.v3 .bc3 .bchead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding-left:0}
.v3 .bc3 .bcset .bcorb{top:30px}
.v3 .bc3 .bcset input{top:30px}
.v3 .bc3 .bctext b{font:650 15.5px/1.25 "Inter Tight",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.v3 .bc3 .bctext small{font-size:12.5px;line-height:1.45;color:#5b6272}
.v3 .bc3 .bcprice{display:grid;justify-items:end;gap:2px;text-align:right;white-space:nowrap}
.v3 .bc3 .bcprice b{font:760 21px/1 "Inter Tight",sans-serif;letter-spacing:-.02em;color:var(--ink);transition:color .3s}
.v3 .bc3 .bcprice small{font-size:11.5px;font-weight:600;color:#0b8f69}
.v3 .bc3 .bcopt:has(input:checked) .bcprice b{color:#1a33d6}
.v3 .bc3 .bcopt:has(input:checked) .bcfan img{animation:bc3Bob 3.2s ease-in-out infinite;animation-delay:calc(var(--k) * -.4s)}

/* Abzeichen */
.v3 .bc3 .bcribbon{top:-12px;right:14px}
.v3 .bc3 .bcbest{position:absolute;left:52px;top:-12px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:999px;overflow:hidden;
 font:700 11.5px/1 "Inter Tight",sans-serif;letter-spacing:.01em;color:#5a3a00;background:linear-gradient(135deg,#ffe08a,#ffc24a 55%,#ffad33);box-shadow:0 8px 18px -10px rgba(214,140,0,.8),inset 0 1px 0 rgba(255,255,255,.7)}
.v3 .bc3 .bcbest svg{width:13px;height:13px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(150,90,0,.5));animation:bc3Star 2.6s ease-in-out infinite}
.v3 .bc3 .bcbest::after{content:'';position:absolute;inset:-2px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 48%,transparent 66%);transform:translateX(-120%);animation:bc3Shine 3.6s 1.2s ease-in-out infinite}

/* Spar-Balken: ganzer Balken = einzeln, blau = im Set, grüner Rest = gespart */
.v3 .bc3 .bcmeter{display:grid;gap:7px;margin:14px 0 2px}
.v3 .bc3 .bcm-track{position:relative;display:block;height:12px;border-radius:999px;background:#eef0f7;overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,30,80,.08)}
.v3 .bc3 .bcm-fill{position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:999px;background:linear-gradient(90deg,#2b4bff,#7c4dff);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.v3 .bc3 .bcm-gap{position:absolute;inset:0 0 0 var(--p);margin-left:3px;border-radius:999px;background:repeating-linear-gradient(-45deg,#34d399 0 6px,#10b981 6px 12px);background-size:17px 17px;opacity:0;transition:opacity .5s .7s;animation:bc3Stripes 1.2s linear infinite}
.v3 .bc3 .bcset.in .bcm-fill,.v3 .bc3 .bcset:has(input:checked) .bcm-fill{transform:none}
.v3 .bc3 .bcset.in .bcm-gap,.v3 .bc3 .bcset:has(input:checked) .bcm-gap{opacity:1}
.v3 .bc3 .bcm-labels{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:12.5px;color:#5b6272}
.v3 .bc3 .bcm-set b{color:#1a33d6;font-weight:700}
.v3 .bc3 .bcm-save{font-weight:650;color:#0b8f69;padding:2px 9px;border-radius:999px;background:#e3f8ef}
.v3 .bc3 .bcm-save b{font-weight:800}
.v3 .bc3 .bcm-old{margin-left:auto}

/* Inhalt */
.v3 .bc3 .bcparts{margin:8px 0 0}
.v3 .bc3 .bcparts summary{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:rgba(43,75,255,.08);color:var(--buy);font-size:12.5px;font-weight:600;cursor:pointer;list-style:none}
.v3 .bc3 .bcparts summary::-webkit-details-marker{display:none}
.v3 .bc3 .bcparts summary::after{content:'';width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.v3 .bc3 .bcparts[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.v3 .bc3 .bcparts ul{display:grid;gap:6px;margin:10px 0 2px;padding:0;list-style:none}
.v3 .bc3 .bcparts li{display:flex;align-items:center;gap:10px;font-size:13px;color:#3d4454;animation:bc3In .45s var(--ease) both;animation-delay:calc(var(--k) * 50ms)}
.v3 .bc3 .bcparts li img{flex:none;width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid #eceef6;cursor:zoom-in}

/* Funken bei der Wahl (bundler.js) */
.bc3-spark{position:absolute;left:28px;top:28px;width:7px;height:7px;border-radius:2px;pointer-events:none;background:var(--c,#7c4dff);
 animation:bc3Spark .7s cubic-bezier(.2,.7,.3,1) forwards;transform:translate(-50%,-50%)}

@keyframes bc3In{from{opacity:0;transform:translateY(10px)}}
@keyframes bc3Spin{to{--bc3a:360deg}}
@keyframes bc3Bob{50%{translate:0 -3px}}
@keyframes bc3Star{50%{transform:rotate(18deg) scale(1.15)}}
@keyframes bc3Shine{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
@keyframes bc3Stripes{to{background-position:17px 0}}
@keyframes bc3Spark{to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(140deg) scale(.2);opacity:0}}

@media(max-width:520px){
 .v3 .bc3 .bcopt{padding:13px 13px 13px 46px}
 .v3 .bc3 .bcorb,.v3 .bc3 .bcopt input{left:13px}
 .v3 .bc3 .bchead{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
 .v3 .bc3 .bchead .bcfan{grid-column:1/-1}
 .v3 .bc3 .bcset .bcorb,.v3 .bc3 .bcset input{top:22px}
 .v3 .bc3 .bcbest{left:46px}
 .v3 .bc3 .bcprice b{font-size:19px}
 .v3 .bc3 .bcm-old{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
 .v3 .bc3 .bcopt,.v3 .bc3 .bcopt:has(input:checked),.v3 .bc3 .bcopt:has(input:checked) .bcfan img,.v3 .bc3 .bcbest svg,.v3 .bc3 .bcbest::after,.v3 .bc3 .bcm-gap,.v3 .bc3 .bcparts li{animation:none}
 .v3 .bc3 .bcopt,.v3 .bc3 .bcm-fill,.v3 .bc3 .bcm-gap,.v3 .bc3 .bcorb,.v3 .bc3 .bcorb svg{transition:none}
 .v3 .bc3 .bcopt:has(input:checked){transform:none}
 .v3 .bc3 .bcm-fill{transform:none}.v3 .bc3 .bcm-gap{opacity:1}
}
/* Feinschliff: Sparsatz nur für Vorleseprogramme (der Balken zeigt dieselben Zahlen), kräftigerer Rahmen, Handy-Kopf mit Bild links */
.v3 .bc3 .bcsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.v3 .bc3 .bcset:has(input:checked){border-width:2.5px}
@media(max-width:520px){
 .v3 .bc3 .bchead{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"fan text" "fan price";gap:4px 12px;align-items:start}
 .v3 .bc3 .bchead .bcfan{grid-column:auto;grid-area:fan;align-self:center}
 .v3 .bc3 .bchead .bctext{grid-area:text}
 .v3 .bc3 .bchead .bcprice{grid-area:price;display:flex;align-items:baseline;gap:8px;justify-items:start;text-align:left}
}

/* ── Freude-Grafik statt Spar-Balken (Emin 12.11.2026: „kein Ladebalken“) ─────────────────────────────────────────────
   Jedes Stück des Sets als rundes Bildchen; die Stücke, deren Einzelpreis die Ersparnis abdeckt, leuchten grün mit Schleife. */
.v3 .bc3 .bcmeter{display:none}
.v3 .bc3 .bcjoy{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 0 2px;padding:10px 12px;border-radius:16px;
 background:linear-gradient(110deg,rgba(43,75,255,.05),rgba(16,185,129,.09));box-shadow:inset 0 0 0 1px rgba(16,185,129,.16)}
.v3 .bc3 .bcj-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v3 .bc3 .bcj-pc{position:relative;display:block;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff,0 4px 10px -6px rgba(20,30,80,.45);
 animation:bcjIn .45s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--k) * 60ms + 200ms)}
.v3 .bc3 .bcj-pc img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.v3 .bc3 .bcj-pc.is-saved{box-shadow:0 0 0 2.5px #10b981,0 0 0 5px rgba(16,185,129,.18),0 8px 16px -8px rgba(16,185,129,.8)}
.v3 .bc3 .bcj-pc.is-saved img{filter:saturate(1.15)}
.v3 .bc3 .bcj-pc.is-saved::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
 background-size:250% 100%;background-position:120% 0;animation:bcjShine 3.2s 1.2s ease-in-out infinite;pointer-events:none}
.v3 .bc3 .bcj-gift{position:absolute;right:-6px;top:-7px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,#34d399,#059669);
 box-shadow:0 3px 8px -2px rgba(5,150,105,.7),0 0 0 2px #fff;z-index:1}
.v3 .bc3 .bcj-gift svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v3 .bc3 .bcj-more{font:700 12px/1 "Inter Tight",sans-serif;color:#5b6272;padding:0 2px}
.v3 .bc3 .bcj-say{flex:1 1 180px;font-size:13px;line-height:1.4;color:#3d4454}
.v3 .bc3 .bcj-amt{display:inline-flex;align-items:center;gap:4px;margin-right:2px;font:800 15px/1.2 "Inter Tight",sans-serif;color:#047857}
/* gewählt: Geschenk-Stücke springen, Schleife wackelt */
.v3 .bc3 .bcset:has(input:checked) .bcj-pc.is-saved{animation:bcjIn .45s cubic-bezier(.3,1.5,.5,1) backwards,bcjHop 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * 60ms + 200ms),calc(var(--k) * .18s + .6s)}
.v3 .bc3 .bcset:has(input:checked) .bcj-gift{animation:bcjWiggle 2.4s ease-in-out infinite}
.v3 .bc3 .bcset:has(input:checked) .bcjoy{background:linear-gradient(110deg,rgba(43,75,255,.07),rgba(16,185,129,.16));box-shadow:inset 0 0 0 1px rgba(16,185,129,.32)}
@keyframes bcjIn{from{transform:scale(.4);opacity:0}}
@keyframes bcjHop{0%,70%,100%{translate:0 0}80%{translate:0 -5px}90%{translate:0 0}}
@keyframes bcjWiggle{0%,70%,100%{rotate:0deg}78%{rotate:-14deg}86%{rotate:12deg}93%{rotate:-6deg}}
@keyframes bcjShine{0%{background-position:120% 0}45%,100%{background-position:-120% 0}}

/* ── −%-Pille: kürzer, Funkeln oben rechts statt links (sah aus wie „+“) – gilt für alle Spar-Pillen ── */
.v3 .bcribbon{gap:0!important;padding:4px 9px!important;font-size:12.5px!important;letter-spacing:-.01em}
.v3 .bcribbon i{position:absolute;right:-6px;top:-7px;width:16px!important;height:16px!important;background:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,190,90,.9))}

@media(max-width:520px){.v3 .bc3 .bcj-pc{width:32px;height:32px}.v3 .bc3 .bcjoy{gap:8px 12px}}
@media(prefers-reduced-motion:reduce){.v3 .bc3 .bcj-pc,.v3 .bc3 .bcj-pc.is-saved::after,.v3 .bc3 .bcset:has(input:checked) .bcj-pc.is-saved,.v3 .bc3 .bcset:has(input:checked) .bcj-gift{animation:none}}