/* ===== DC-18 (Auftrag Emin 10.11.2026): mehr Farbe an den richtigen Stellen, Kaufblau überall, aufklappbare Vorteile,
   Beschreibung mit Bild und Detail-Kacheln, Set-Auswahl mit Kaufreiz, Doppelband, Farbverlauf-Hintergrund, drehbarer Orbit,
   neue Versprechen-Karten, Schritte nacheinander. Wird nach fx.css geladen und überschreibt gezielt. ===== */
.v3{--buy:#2b4bff;--buy2:#4f6bff;--buy-ink:#1a33d6;--violet:#7c4dff;--mint:#10b981;--amber:#f5a524;--coral:#ff5470;--sky:#0ea5e9;
 --buygrad:linear-gradient(135deg,#4865ff 0%,#2b4bff 45%,#1f3cf0 100%)}

/* ---------- Farbfolge für Kacheln (Vorteile, Details): Blau, Violett, Mint, Bernstein, Koralle, Himmel ---------- */
.v3 .pbtile:nth-child(6n+1),.v3 .psfacts dl div:nth-child(6n+1){--c:#2b4bff;--c2:#8ea0ff}
.v3 .pbtile:nth-child(6n+2),.v3 .psfacts dl div:nth-child(6n+2){--c:#7c4dff;--c2:#c2a8ff}
.v3 .pbtile:nth-child(6n+3),.v3 .psfacts dl div:nth-child(6n+3){--c:#0fae84;--c2:#7be0c3}
.v3 .pbtile:nth-child(6n+4),.v3 .psfacts dl div:nth-child(6n+4){--c:#e8930c;--c2:#ffd08a}
.v3 .pbtile:nth-child(6n+5),.v3 .psfacts dl div:nth-child(6n+5){--c:#f0435f;--c2:#ffa3b3}
.v3 .pbtile:nth-child(6n+6),.v3 .psfacts dl div:nth-child(6n+6){--c:#0b94d1;--c2:#8fd6f6}

/* ---------- Vorteile: aufklappbare Kacheln mit Produktfoto ---------- */
.v3 .pb2 .pbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px;align-items:start}
.v3 .pbtile{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 box-shadow:0 1px 0 rgba(16,19,30,.04),0 26px 60px -40px rgba(16,19,30,.38);transition:box-shadow .5s var(--ease),transform .6s var(--ease)}
.v3 .pbtile::before{content:'';position:absolute;z-index:-1;right:-70px;top:-90px;width:230px;height:230px;border-radius:50%;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 24%,transparent),transparent);transition:transform .9s var(--ease)}
.v3 .pbtile::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 0%,transparent);transition:box-shadow .4s}
.v3 .pbtile summary,.v3 .pbhead{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 14px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v3 .pbhead{cursor:default}
.v3 .pbtile summary::-webkit-details-marker{display:none}
.v3 .pbtile summary:focus-visible{outline:3px solid var(--c);outline-offset:-3px;border-radius:26px}
.v3 .pbthumb{flex:none;width:58px;height:58px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,#fff),0 10px 22px -12px var(--c);transition:transform .6s var(--ease),opacity .4s}
.v3 .pbthumb img{display:block;width:100%;height:100%;object-fit:cover}
.v3 .pbtitle{flex:1;min-width:0;font-weight:500;font-size:clamp(16.5px,1.25vw,19px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.v3 .pbplus{position:relative;flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--c2),var(--c) 60%);box-shadow:0 10px 20px -8px var(--c);transition:transform .55s var(--ease)}
.v3 .pbplus::before,.v3 .pbplus::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;border-radius:2px;background:#fff}
.v3 .pbplus::after{transform:rotate(90deg)}
.v3 .pbcheck{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,#fff)}
.v3 .pbcheck::after{content:'';position:absolute;left:10px;top:8px;width:6px;height:11px;border:solid var(--c);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.v3 .pb2 .pbgrid.n4{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.v3 .pbbody{display:grid;gap:14px;padding:0 16px 18px}
.v3 .pbbody p{margin:0 4px;font-size:16px;line-height:1.6;color:#3d4454}
.v3 .pbimg{order:-1;margin:0;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 30px -18px rgba(16,19,30,.45)}
.v3 .pbimg img{display:block;width:100%;height:100%;object-fit:cover}
.v3 details.pbtile[open]:not(.closing)::after{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent)}
.v3 details.pbtile[open]:not(.closing)::before{transform:scale(1.6)}
.v3 details.pbtile[open]:not(.closing) .pbplus{transform:rotate(135deg)}
.v3 details.pbtile[open]:not(.closing) .pbthumb{transform:scale(.86);opacity:.75}
.v3 details.pbtile[open] .pbimg img{animation:pbzoom .9s var(--ease) both}
@keyframes pbzoom{from{transform:scale(1.18);filter:saturate(.6)}to{transform:none;filter:none}}
@media(hover:hover){.v3 details.pbtile:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(16,19,30,.04),0 34px 64px -36px color-mix(in srgb,var(--c) 70%,transparent)}
 .v3 details.pbtile:hover .pbplus{transform:rotate(90deg) scale(1.06)}.v3 details.pbtile[open]:hover .pbplus{transform:rotate(135deg) scale(1.06)}}
@media(max-width:720px){.v3 .pbbody{padding:0 14px 16px}.v3 .pbthumb{width:52px;height:52px;border-radius:16px}}

/* ---------- Beschreibung + Produktdetails: ein Abschnitt mit Bild, Text und farbigen Detail-Kacheln ---------- */
.v3 .ppstory{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,84px);align-items:center}
.v3 .ppstory.psonly,.v3 .ppstory:not(:has(.psmedia)){grid-template-columns:minmax(0,1fr)}
.v3 .psmedia{position:relative;margin:0;aspect-ratio:1;max-width:620px;width:100%;justify-self:center}
.v3 .psglow{position:absolute;inset:-6%;border-radius:50%;background:conic-gradient(from 200deg,#2b4bff,#7c4dff,#ff6aa2,#ffb547,#10b981,#2b4bff);filter:blur(46px);opacity:.34;animation:psspin 22s linear infinite}
@keyframes psspin{to{transform:rotate(1turn)}}
.v3 .psmedia img{position:relative;display:block;width:100%;height:100%;object-fit:cover;border-radius:36px;background:#fff;box-shadow:0 40px 80px -46px rgba(16,19,30,.55)}
.v3 .ppstory h2{font:400 clamp(38px,4.4vw,72px)/.95 "Inter Tight",Open,sans-serif;letter-spacing:-.05em;margin:0 0 clamp(16px,2vw,26px)}
.v3 .pscopy>p{max-width:60ch;margin:0 0 14px;font-size:17px;line-height:1.68;color:#454c5c}
.v3 .pscopy>p:first-of-type{font-size:clamp(20px,1.75vw,27px);line-height:1.38;letter-spacing:-.02em;color:var(--ink)}
.v3 .psfacts{margin-top:clamp(24px,3vw,40px)}
.v3 .ppstory .psfacts .psh{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em;margin:0 0 14px}
.v3 .ppstory .psfacts dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.v3 .ppstory .psfacts dl div{position:relative;display:block;padding:15px 16px 15px 68px;border:0;border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 1px 0 rgba(16,19,30,.04),0 18px 40px -30px rgba(16,19,30,.4);font-size:15px;min-height:70px}
.v3 .ppstory .psfacts dl div::before{content:'';position:absolute;left:14px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:13px;background:linear-gradient(135deg,var(--c2),var(--c) 65%);box-shadow:0 10px 18px -10px var(--c)}
.v3 .ppstory .psfacts dl div::after{content:'';position:absolute;left:14px;top:50%;width:40px;height:40px;margin-top:-20px;background:#fff;-webkit-mask:var(--ico) center/21px no-repeat;mask:var(--ico) center/21px no-repeat}
.v3 .ppstory .psfacts dt{display:block;color:var(--grey);font-size:13px;line-height:1.3}
.v3 .ppstory .psfacts dd{display:block;margin:2px 0 0;font-weight:600;font-size:15.5px;line-height:1.35;text-align:left;color:var(--ink)}
.v3 [data-ico=box]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E")}
.v3 [data-ico=layers]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E")}
.v3 [data-ico=ruler]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2.5' y='7.5' width='19' height='9' rx='2'/%3E%3Cpath d='M7 7.5v4M11 7.5v3M15 7.5v4M19 7.5v3'/%3E%3C/svg%3E")}
.v3 [data-ico=weight]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='2.5'/%3E%3Cpath d='M6.5 9h11l2.5 11H4z'/%3E%3C/svg%3E")}
.v3 [data-ico=drop]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3s6.5 7 6.5 11.2A6.5 6.5 0 0 1 5.5 14.2C5.5 10 12 3 12 3z'/%3E%3C/svg%3E")}
.v3 [data-ico=palette]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.4 0 2-1 1.4-2.2-.7-1.4.2-2.8 1.8-2.8H18a3 3 0 0 0 3-3c0-5.5-4-10-9-10z'/%3E%3Ccircle cx='7.5' cy='11' r='1.2'/%3E%3Ccircle cx='10.5' cy='7' r='1.2'/%3E%3Ccircle cx='15' cy='7.5' r='1.2'/%3E%3C/svg%3E")}
.v3 [data-ico=magnet]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 4h4v8a3 3 0 0 0 6 0V4h4v8a7 7 0 0 1-14 0z'/%3E%3Cpath d='M5 8h4M15 8h4'/%3E%3C/svg%3E")}
.v3 [data-ico=bolt]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 2 5 13.5h6L10 22l9-12h-6z'/%3E%3C/svg%3E")}
.v3 [data-ico=wash]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6h18l-2 13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M6.5 11c1.5 1 3 1 4.5 0s3-1 4.5 0 2.5 1 3 .6'/%3E%3C/svg%3E")}
.v3 [data-ico=pin]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='M12 14.5V22M8 21.5h8'/%3E%3C/svg%3E")}
.v3 [data-ico=spark]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2z'/%3E%3C/svg%3E")}
@media(max-width:900px){.v3 .ppstory{grid-template-columns:minmax(0,1fr);gap:26px}.v3 .psmedia{max-width:460px}}
@media(max-width:720px){.v3 .ppstory .psfacts dl{grid-template-columns:1fr 1fr}.v3 .ppstory .psfacts dl div{padding:12px 12px 12px 58px;min-height:64px}
 .v3 .ppstory .psfacts dl div::before,.v3 .ppstory .psfacts dl div::after{left:10px;width:36px;height:36px;margin-top:-18px}.v3 .ppstory .psfacts dd{font-size:14.5px}}
@media(max-width:380px){.v3 .ppstory .psfacts dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.v3 .psglow{animation:none}.v3 details.pbtile[open] .pbimg img{animation:none}}

/* ---------- Kaufblau überall: Kaufknopf, Set-Knopf, Warenkorb in der Kopfzeile, Schnellkauf auf Karten – mit Glanz ---------- */
.v3 .shopcta,.v3 .soadd,.v3 .pcadd,.v3 .shopbar .bag,.v3 .cdcheckout{background:var(--buygrad);color:#fff;border-color:transparent}
.v3 .shopcta,.v3 .soadd,.v3 .shopbar .bag{position:relative;isolation:isolate;overflow:hidden}
.v3 .shopcta::after,.v3 .soadd::after,.v3 .shopbar .bag::after{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);animation:buyshine 5.2s cubic-bezier(.4,0,.2,1) infinite}
.v3 .shopbar .bag::after{animation-delay:1.6s}
@keyframes buyshine{0%,62%{left:-60%}88%,100%{left:130%}}
.v3 .shopcta:hover,.v3 .soadd:hover,.v3 .shopbar .bag:hover,.v3 .pcadd:hover,.v3 .pcadd:focus-visible{background:linear-gradient(135deg,#3a57ff,#1f3cf0 55%,#1730c9);color:#fff;box-shadow:0 16px 30px -14px rgba(43,75,255,.85)}
.v3 .shopcta:disabled{background:#c9cede;box-shadow:none}.v3 .shopcta:disabled::after{display:none}
.v3 .pcadd{box-shadow:0 12px 24px -10px rgba(43,75,255,.7)}
.v3 .pcadd.done{background:#14804a}
@media(max-width:720px){.v3 .shopbar .hbtns .bag{background:transparent;color:var(--buy);box-shadow:none}.v3 .shopbar .hbtns .bag::after{display:none}.v3 .shopbar .hbtns .bag:hover{background:rgba(43,75,255,.08)}}
@media(prefers-reduced-motion:reduce){.v3 .shopcta::after,.v3 .soadd::after,.v3 .shopbar .bag::after{animation:none;display:none}}

/* ---------- Set-Auswahl am Kaufknopf: Farbverlauf-Rahmen, Spar-Abzeichen, Bilderfächer, Spar-Balken ---------- */
@property --bca{syntax:'<angle>';inherits:false;initial-value:0deg}
.v3 .bc2{gap:12px;margin:18px 0 14px}
.v3 .bc2 legend{font-size:15px;margin-bottom:8px}
.v3 .bc2 .bcopt{position:relative;border-radius:22px;border:1.5px solid #e3e6f3;background:rgba(255,255,255,.94);padding:14px 16px;transition:border-color .25s,box-shadow .35s,transform .35s var(--ease)}
.v3 .bc2 .bcsingle{grid-template-columns:20px minmax(0,1fr)}
.v3 .bc2 .bcopt input{accent-color:var(--buy)}
.v3 .bc2 .bcsingle:has(input:checked){border-color:var(--buy);box-shadow:0 0 0 3px rgba(43,75,255,.12)}
.v3 .bc2 .bcset{display:block;padding:16px 16px 12px;border:2px solid transparent;
 background:linear-gradient(160deg,#f6f7ff,#fff 52%,#fffaf2) padding-box,linear-gradient(120deg,#c7d0ff,#ded1ff 50%,#ffdcb0) border-box;box-shadow:0 20px 44px -30px rgba(43,75,255,.6)}
.v3 .bc2 .bcset:has(input:checked){background:linear-gradient(160deg,#eef1ff,#fff 55%,#fff6e8) padding-box,conic-gradient(from var(--bca),#2b4bff,#7c4dff,#ff5a9c,#ffb020,#10b981,#2b4bff) border-box;
 box-shadow:0 26px 52px -28px rgba(43,75,255,.75);animation:bcspin 6s linear infinite}
@keyframes bcspin{to{--bca:360deg}}
@media(hover:hover){.v3 .bc2 .bcset:hover{transform:translateY(-2px)}}
.v3 .bc2 .bcset>input{position:absolute;left:16px;top:28px;margin:0;width:18px;height:18px}
.v3 .bchead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding-left:30px}
.v3 .bchead>img{width:52px;height:52px;border-radius:14px;object-fit:cover;border:2px solid #fff;box-shadow:0 8px 18px -8px rgba(16,19,30,.45);cursor:zoom-in}
.v3 .bcfan{position:relative;display:block;width:calc(48px + (var(--n) - 1) * 24px);height:56px}
.v3 .bcfan img{position:absolute;left:calc(var(--k) * 17px);top:4px;width:48px;height:48px;border-radius:14px;object-fit:cover;border:2px solid #fff;background:#fff;cursor:zoom-in;
 box-shadow:0 8px 16px -8px rgba(16,19,30,.5);transform:rotate(calc((var(--k) - 2) * 6deg));z-index:calc(10 - var(--k));transition:transform .5s var(--ease),left .5s var(--ease),box-shadow .3s}
.v3 .bcset:hover .bcfan img,.v3 .bcset:has(input:checked) .bcfan img{left:calc(var(--k) * 24px);transform:rotate(0) translateY(-1px)}
.v3 .bcfan img:hover{z-index:20;transform:scale(1.12) translateY(-3px)!important;box-shadow:0 14px 26px -10px rgba(43,75,255,.6)}
.v3 .bc2 .bctext b{font-size:15.5px;letter-spacing:-.01em}
.v3 .bc2 .bctext small{font-size:12.5px}
.v3 .bcnow{display:inline-flex;align-items:center;gap:5px;color:#0b8f69;font-weight:600}
.v3 .bcnow::before{content:'';width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:bcnow 2s infinite}
@keyframes bcnow{70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.v3 .bcribbon{position:absolute;right:14px;top:-12px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:999px;background:linear-gradient(135deg,#ff4f6d,#ff8a3d);color:#fff;
 font:700 13px/1 "Inter Tight",sans-serif;letter-spacing:-.01em;box-shadow:0 10px 22px -8px rgba(255,79,109,.75);transform:rotate(3deg);animation:bcpop 3.6s var(--ease) infinite}
.v3 .bcribbon i{width:11px;height:11px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:bctw 1.8s ease-in-out infinite}
@keyframes bcpop{0%,80%,100%{transform:rotate(3deg) scale(1)}88%{transform:rotate(-2deg) scale(1.08)}}
@keyframes bctw{50%{transform:rotate(90deg) scale(.6);opacity:.6}}
.v3 .bcsave{display:flex;align-items:center;gap:12px;margin:12px 0 4px 30px}
.v3 .bcbar{position:relative;flex:1;min-width:60px;height:9px;border-radius:99px;overflow:hidden;background:repeating-linear-gradient(135deg,#ffc56b 0 6px,#ffd892 6px 12px)}
.v3 .bcbar i{position:absolute;left:0;top:0;bottom:0;width:var(--set);border-radius:99px;background:linear-gradient(90deg,#4865ff,#2b4bff);transform-origin:0 50%;transform:scaleX(.08);transition:transform 1.1s var(--ease)}
.v3 .bcset.in .bcbar i,.v3 .bcset:has(input:checked) .bcbar i{transform:none}
.v3 .bcsavetext{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px;white-space:nowrap}
.v3 .bcsavetext s{color:var(--grey)}
.v3 .bcsavetext b{font-weight:700;color:var(--ink)}
.v3 .bcsavetext em{font-style:normal;font-weight:700;color:#0b8f69;background:#e3f8ef;padding:2px 8px;border-radius:99px}
.v3 .bc2 .bcparts{margin:6px 0 0 30px}
.v3 .bc2 .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 .bc2 .bcparts summary::-webkit-details-marker{display:none}
.v3 .bc2 .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 .bc2 .bcparts[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.v3 .bc2 .bcparts ul{display:grid;gap:6px;margin:10px 0 2px;padding:0;list-style:none}
.v3 .bc2 .bcparts li{display:flex;align-items:center;gap:10px;font-size:13px;color:#3d4454;animation:bcin .45s var(--ease) both;animation-delay:calc(var(--k) * 50ms)}
.v3 .bc2 .bcparts li img{flex:none;width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid #eceef6;cursor:zoom-in;transition:transform .35s var(--ease),box-shadow .3s}
.v3 .bc2 .bcparts li img:hover{transform:scale(1.12);box-shadow:0 10px 22px -10px rgba(43,75,255,.6)}
@keyframes bcin{from{opacity:0;transform:translateY(6px)}}
@media(max-width:420px){.v3 .bcsave{flex-direction:column;align-items:stretch;gap:6px}}
@media(prefers-reduced-motion:reduce){.v3 .bc2 .bcset:has(input:checked),.v3 .bcribbon,.v3 .bcribbon i,.v3 .bcnow::before{animation:none}}

/* ---------- Bild-Zoom für kleine Bilder (Maus: überfahren, Finger: antippen) ---------- */
.chzoom{position:fixed;z-index:3000;left:0;top:0;width:240px;padding:8px;border-radius:24px;background:#fff;box-shadow:0 30px 70px -24px rgba(16,19,30,.55),0 0 0 1px rgba(16,19,30,.05);
 pointer-events:none;opacity:0;transform:translateY(10px) scale(.6);transform-origin:var(--ox,50%) 100%;transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.25,1.15)}
.chzoom.below{transform-origin:var(--ox,50%) 0}
.chzoom.on{opacity:1;transform:none}
.chzoom img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;background:#f4f5f9}
.chzoom span{display:none;padding:8px 6px 2px;font:500 13px/1.35 "Inter Tight",sans-serif;color:#1d2433}
.chzoom.t span{display:block}
@media(prefers-reduced-motion:reduce){.chzoom{transition:opacity .15s;transform:none}}

/* ---------- Doppelband auch auf Unterseiten (über der Fußzeile) ---------- */
.v3 .catband.cbfoot{position:relative;overflow:hidden;margin:clamp(40px,6vw,96px) 0 0;padding:clamp(18px,2.6vw,40px) 0 clamp(26px,3.4vw,52px);user-select:none;-webkit-user-select:none}

/* ---------- Zahlen: farbige Verläufe, am Handy immer in einer Zeile ---------- */
.v3 .hfact b{-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.v3 .hfact:nth-child(1) b{background-image:linear-gradient(120deg,#2b4bff 10%,#6a5cff 90%)}
.v3 .hfact:nth-child(2) b{background-image:linear-gradient(120deg,#7c4dff 10%,#e0479e 90%)}
.v3 .hfact:nth-child(3) b{background-image:linear-gradient(120deg,#ff8a3d 10%,#ff4f6d 90%)}
.v3 .hfact:nth-child(2) span::after{background:#7c4dff}.v3 .hfact:nth-child(2) i{color:#7c4dff}
.v3 .hfact:nth-child(3) span::after{background:#ff4f6d}.v3 .hfact:nth-child(3) i{color:#ff4f6d}
.v3 .hfact:hover b{text-shadow:none;filter:drop-shadow(0 14px 22px rgba(43,75,255,.28))}
@media(max-width:900px){
 .v3 .hfacts{flex-wrap:nowrap;justify-content:space-between;gap:10px}
 .v3 .hfact{min-width:0;flex:0 1 auto;padding:6px 2px 10px}
 .v3 .hfact b{font-size:clamp(40px,12.5vw,76px)}
 .v3 .hfact span{font-size:clamp(11.5px,3.4vw,15px);white-space:nowrap}
 .v3 .hfact i{display:none}
}

/* ---------- Orbit: zum Drehen ziehen, Pfeile links/rechts ---------- */
.v3 .horbit.turnable{pointer-events:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.v3 .horbit.dragging{cursor:grabbing}
.v3 .horbit.dragging .hoitem{pointer-events:none}
.v3 .horbit img{-webkit-user-drag:none;user-select:none}
.v3 .hoctl{position:absolute;z-index:20;left:50%;bottom:6%;display:flex;align-items:center;gap:10px;transform:translateX(-50%);pointer-events:auto}
.v3 .hoturn{display:grid;place-items:center;width:42px;height:42px;padding:0 0 3px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--buy);font:500 26px/1 "Inter Tight",sans-serif;cursor:pointer;
 box-shadow:0 12px 26px -12px rgba(16,19,30,.45),inset 0 0 0 1.5px rgba(43,75,255,.16);transition:transform .25s var(--ease),background .2s,color .2s}
.v3 .hoturn:hover{transform:scale(1.1);background:var(--buy);color:#fff}
.v3 .hoturn:active{transform:scale(.94)}
.v3 .hohint{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.86);color:#596074;font:500 12.5px/1 "Inter Tight",sans-serif;white-space:nowrap;box-shadow:0 8px 20px -14px rgba(16,19,30,.5)}
.v3 .horbit:not(.turnable) .hoctl{display:none}
@media(max-width:900px){.v3 .hoctl{bottom:0}}

/* ---------- Sicher einkaufen: farbige Karten mit Glanz, der immer wieder darüber läuft ---------- */
.v3 .htcard.tc1{background:linear-gradient(140deg,#ffffff 0%,#f5f2ff 55%,#eef5ff 100%);box-shadow:0 34px 90px -44px rgba(76,60,200,.45),inset 0 0 0 1.5px rgba(124,77,255,.14)}
.v3 .htcard.tc1 .htnum{background:linear-gradient(120deg,#2b4bff,#7c4dff 60%,#e0479e);-webkit-background-clip:text;background-clip:text;color:transparent}
.v3 .htcard.tc2.tcship{background:linear-gradient(135deg,#ff9a3d 0%,#ff4f6d 50%,#c2368f 100%);color:#fff;box-shadow:0 34px 90px -40px rgba(255,79,109,.65)}
.v3 .htcard.tc2.tchelp{background:linear-gradient(135deg,#7c4dff 0%,#2b4bff 100%);color:#fff}
.v3 .htcard.tc3{background:radial-gradient(120% 140% at 100% 0%,#24408f 0%,#121a3c 48%,#0b1024 100%);color:#fff}
.v3 .htcard.tc4{background:linear-gradient(135deg,#e5ebff 0%,#f2e8ff 50%,#ffeddc 100%)}
.v3 .htcard.in::after{width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));animation:htshine 7s cubic-bezier(.3,.7,.2,1) infinite;animation-delay:calc(.25s + var(--i) * 1.2s)}
@keyframes htshine{0%{transform:translateX(-140%) skewX(-16deg)}24%,100%{transform:translateX(520%) skewX(-16deg)}}
/* Versand-Grafik: Paket mit Flügeln, Fahrtwind, „0 €“-Plakette */
.tcship .htart .g-speed path{fill:none;stroke:rgba(255,255,255,.75);stroke-width:7;stroke-linecap:round;stroke-dasharray:22 18;animation:gspeed .9s linear infinite}
@keyframes gspeed{to{stroke-dashoffset:40}}
.tcship .htart .g-cloud path{fill:rgba(255,255,255,.3)}
.tcship .htart .g-pbox{fill:#fff}
.tcship .htart .g-pline{stroke:rgba(255,110,70,.28);stroke-width:3}
.tcship .htart .g-ptape{stroke:#ffb547;stroke-width:12}
.tcship .htart .g-plabel{fill:none;stroke:#ffcfb8;stroke-width:5;stroke-linecap:round}
/* Emin 11.11.2026: richtige Federflügel statt „Haiflossen“ – an beiden Seiten des Pakets, vier runde Schwungfedern, schlagen auf und ab */
.tcship .htart .g-wing{filter:drop-shadow(0 4px 5px rgba(120,20,60,.22))}
.tcship .htart .g-wing .wf{fill:#fff}
.tcship .htart .g-wing .wl{fill:none;stroke:rgba(255,110,110,.38);stroke-width:2.6;stroke-linecap:round}
.tcship .htart .w1{transform-box:view-box;transform-origin:98px 108px;animation:gwingl .5s cubic-bezier(.45,0,.55,1) infinite alternate}
.tcship .htart .w2{transform-box:view-box;transform-origin:172px 108px;animation:gwingr .5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes gwingl{from{transform:rotate(20deg)}to{transform:rotate(-12deg) scaleY(.92)}}
@keyframes gwingr{from{transform:rotate(-20deg)}to{transform:rotate(12deg) scaleY(.92)}}
.tcship .htart .ga-fly{animation:gflyb 3.2s ease-in-out infinite}
@keyframes gflyb{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(8px,-12px) rotate(2deg)}}
.tcship .htart .g-badge0 circle{fill:#fff}
.tcship .htart .g-badge0 text{font:800 22px "Inter Tight",sans-serif;fill:#ff4f6d}
.tcship .htart .g-badge0{transform-box:view-box;transform-origin:190px 186px;animation:gbadge 2.4s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(120,20,60,.35))}
@keyframes gbadge{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
.tchelp .htart .g-pbox{fill:#fff}
.tchelp .htart .g-dot{fill:#7c4dff;animation:gdot 1.2s ease-in-out infinite}
.tchelp .htart .d2{animation-delay:.15s}.tchelp .htart .d3{animation-delay:.3s}
@keyframes gdot{0%,60%,100%{transform:none}30%{transform:translateY(-8px)}}
.tchelp .htart .g-dot{transform-box:fill-box}
@media(prefers-reduced-motion:reduce){.v3 .htcard.in::after,.tcship .htart *,.tchelp .htart *{animation:none!important}}

/* ---------- So einfach geht's: 1 → 2 → 3 nacheinander, jeder einmal, danach bleibt der fertige Zustand ---------- */
.hjs .hsteplist li:not(.play) .hstepart *{animation-play-state:paused}
.hjs .hsteplist li.instant *,.hjs .hsteplist li.instant *::after{animation-duration:.01s!important;animation-delay:0s!important}
.hjs .hsteplist li .hstepart{transition:transform .6s var(--ease);will-change:transform}
.hjs .hsteplist li.now .hstepart{transform:translateY(-6px)}
.hjs .hsteplist li .hstepart::before{content:'';position:absolute;inset:0;z-index:6;border-radius:inherit;box-shadow:inset 0 0 0 3px rgba(43,75,255,.4);opacity:0;transition:opacity .5s ease;pointer-events:none;will-change:opacity}
.hjs .hsteplist li.now .hstepart::before{opacity:1}
.hjs .hsteplist li .hstepno{transition:color .4s}
.hjs .hsteplist li.done .hstepno::after{content:' ✓';color:#10b981}
/* Schritt 1: Finger tippt sich durch die Produkte und wählt eins */
.hjs .hsa1 img{animation:none}
.hjs .hsatap{animation:none;left:26%;top:26%;opacity:0}
.hjs .hsteplist li.play .hsatap{animation:s1tap 2.4s cubic-bezier(.45,0,.25,1) both}
@keyframes s1tap{0%{left:26%;top:26%;opacity:0;transform:scale(1)}10%{opacity:1}35%{left:74%;top:26%}60%{left:26%;top:74%}82%{left:74%;top:74%;transform:scale(1)}88%{transform:scale(.6)}94%{opacity:1;transform:scale(1.1)}100%{left:74%;top:74%;opacity:0;transform:scale(1.7)}}
.hjs .hsteplist li.play .hsa1 img:last-of-type{animation:s1pick .7s 2.05s cubic-bezier(.3,1.5,.5,1) both}
@keyframes s1pick{from{transform:none;box-shadow:0 0 0 0 transparent}to{transform:scale(1.04);box-shadow:0 0 0 3px #2b4bff,0 16px 26px -12px rgba(43,75,255,.65)}}
.hjs .hsa1::after{content:'✓';position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#4865ff,#2b4bff);color:#fff;font:700 17px/1 "Inter Tight",sans-serif;box-shadow:0 10px 20px -8px rgba(43,75,255,.8);transform:scale(0);opacity:0}
.hjs .hsteplist li.play .hsa1::after{animation:s1check .5s 2.3s cubic-bezier(.3,1.6,.5,1) both}
@keyframes s1check{to{transform:none;opacity:1}}
/* Schritt 2: Karte gleitet herein, Tipp auf „Jetzt bezahlen“, grün „Bezahlt“, Konfetti – bleibt bezahlt */
.hjs .hsa2card{animation:none;transform:translate(130%,20%) rotate(18deg);opacity:0}
.hjs .hsteplist li.play .hsa2card{animation:s2card 3.2s cubic-bezier(.2,.75,.15,1) both}
@keyframes s2card{0%{transform:translate(130%,20%) rotate(18deg);opacity:0}25%,100%{transform:translate(0,0) rotate(-7deg);opacity:1}}
.hjs .hsa2tap,.hjs .hsa2pay,.hjs .hsa2p2,.hjs .hsa2head i,.hjs .hsa2conf i{animation:none}
.hjs .hsa2tap{opacity:0}.hjs .hsa2p2{opacity:0}.hjs .hsa2conf i{opacity:0}
.hjs .hsteplist li.play .hsa2tap{animation:s2tap 3.2s ease-in-out both}
.hjs .hsteplist li.play .hsa2pay{animation:s2press 3.2s ease-in-out both}
.hjs .hsteplist li.play .hsa2p2{animation:s2paid 3.2s ease-in-out both}
.hjs .hsteplist li.play .hsa2head i{animation:s2bump 3.2s ease-in-out both}
.hjs .hsteplist li.play .hsa2conf i{animation:s2conf 3.2s ease-out both}
@keyframes s2tap{0%,28%{opacity:0;transform:translate(40px,30px)}40%{opacity:1;transform:none}47%{opacity:1;transform:scale(.7)}52%{opacity:1;transform:none}62%,100%{opacity:0;transform:none}}
@keyframes s2press{0%,45%,52%,100%{transform:none}48%{transform:scale(.94)}}
@keyframes s2paid{0%,49%{opacity:0}54%,100%{opacity:1}}
@keyframes s2bump{0%,49%,60%,100%{transform:none}54%{transform:scale(1.3)}}
@keyframes s2conf{0%,50%{opacity:0;transform:rotate(var(--a)) translateY(0)}54%{opacity:1}80%,100%{opacity:0;transform:rotate(var(--a)) translateY(-70px) rotate(180deg)}}
/* Schritt 3: Nachtkarte, Route leuchtet, Lieferwagen fährt zum Haus, Status bis „Zugestellt“ – dann Smiley mit „Juhu!“ */
.v3 .hsa3{background:radial-gradient(120% 120% at 88% 0%,#2c3590 0%,#151c46 46%,#0b0f24 100%)}
.hjs .hsa3done{animation:none;stroke-dashoffset:1}
.v3 .hsa3done{stroke:#6f86ff;filter:drop-shadow(0 0 7px rgba(111,134,255,.95))}
.hjs .hsteplist li.play .hsa3done{animation:s3route 2.9s linear both}
/* Linie läuft genau mit dem Lieferwagen (gleiche Kurve, gleiche Dauer) bis zum Kreisrand, danach fließt sie ins Haus */
@keyframes s3route{0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}89.655%{stroke-dashoffset:.115;animation-timing-function:ease-out}100%{stroke-dashoffset:0}}
.hjs .hsa3van{animation:none;opacity:0}
.hjs .hsteplist li.play .hsa3van{animation:s3van 2.85s linear both}
@keyframes s3van{0%{opacity:0}6%,91.2%{opacity:1}100%{opacity:0}}
.hjs .hsa3home circle{animation:none}
/* Kreis und Haus wachsen gemeinsam um dieselbe Mitte – das Haus bleibt immer genau mittig; Farbe wechselt zu Grün, wenn der Wagen angedockt hat */
.v3 .hsa3home{transform-box:view-box;transform-origin:284px 58px}
.hjs .hsteplist li.play .hsa3home{animation:s3home .8s 2.7s cubic-bezier(.3,1.6,.5,1) both}
.hjs .hsteplist li.play .hsa3home circle{animation:s3homefill .45s 2.7s ease both}
@keyframes s3home{0%{transform:none}45%{transform:scale(1.45)}100%{transform:scale(1.15)}}
@keyframes s3homefill{from{fill:#2b4bff}to{fill:#10b981}}
.hjs .hsa3chips i{animation:none}
.hjs .hsteplist li.play .hsa3chips .hc2{animation:s3chip .3s .75s both}
.hjs .hsteplist li.play .hsa3chips .hc3{animation:s3chip .3s 1.55s both}
.hjs .hsteplist li.play .hsa3chips .hc4{animation:s3chipok .35s 2.6s both}
@keyframes s3chip{to{background:#2b4bff;color:#fff}}
@keyframes s3chipok{50%{transform:scale(1.15)}to{background:#12a150;color:#fff;transform:none}}
.hjs .hsa3mail{animation:none;opacity:0;transform:translateY(-10px)}
.hjs .hsteplist li.play .hsa3mail{animation:s3mail .5s .3s ease-out both}
@keyframes s3mail{to{opacity:1;transform:none}}
.hsa3joy{position:absolute;z-index:3;left:50%;top:44%;width:clamp(74px,30%,104px);aspect-ratio:1;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.hsa3joy svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
.hsa3joy .j-face{fill:#ffd23f;stroke:#f5a524;stroke-width:3}
.hsa3joy .j-shine{fill:none;stroke:rgba(255,255,255,.6);stroke-width:5;stroke-linecap:round;stroke-dasharray:38 300;transform:rotate(200deg);transform-origin:50px 50px}
.hsa3joy .j-eye{fill:none;stroke:#4a2a0a;stroke-width:6;stroke-linecap:round}
.hsa3joy .j-mouth{fill:#5a2208}
.hsa3joy .j-tongue{fill:none;stroke:#ff6b81;stroke-width:6;stroke-linecap:round}
.hsa3joy .j-blush{fill:#ff8fa3;opacity:.75}
.hsa3juhu{position:absolute;right:84%;top:-22%;padding:7px 12px;border-radius:16px 16px 4px 16px;background:#fff;color:#1d2433;font:800 clamp(14px,1.3vw,18px)/1 "Inter Tight",sans-serif;white-space:nowrap;box-shadow:0 12px 24px -10px rgba(0,0,0,.5);transform:scale(0) rotate(10deg);transform-origin:100% 100%}
.hjs .hsteplist li.play .hsa3joy{animation:s3joy .8s 2.85s cubic-bezier(.3,1.6,.5,1) both,s3bob 2.4s 3.7s ease-in-out infinite}
.hjs .hsteplist li.play .hsa3juhu{animation:s3juhu .5s 3.3s cubic-bezier(.3,1.7,.5,1) both}
@keyframes s3joy{from{transform:translate(-50%,-50%) scale(0) rotate(-30deg);opacity:0}to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
@keyframes s3bob{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0)}50%{transform:translate(-50%,-58%) scale(1.04) rotate(-4deg)}}
@keyframes s3juhu{to{transform:rotate(6deg)}}
.hsa3burst{position:absolute;z-index:2;left:50%;top:44%;width:0;height:0}
.hsa3burst i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:2px;background:hsl(calc(var(--c) * 47deg + 10deg) 95% 60%);opacity:0;--a:calc(var(--c) * 22.5deg)}
.hsa3burst i:nth-child(3n){border-radius:50%}
.hjs .hsteplist li.play .hsa3burst i{animation:s3burst 1.2s 2.9s cubic-bezier(.2,.7,.3,1) both}
@keyframes s3burst{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-96px) rotate(260deg) scale(1)}}
/* Ohne Bewegung: alles im fertigen Zustand */
.hcalm .hsa2 .hsa2p2{opacity:1}.hcalm .hsa2 .hsa2card{transform:rotate(-7deg);opacity:1}
.hcalm .hsa3 .hsa3done{stroke-dashoffset:0}.hcalm .hsa3 .hsa3chips i{background:#2b4bff;color:#fff}.hcalm .hsa3 .hsa3chips .hc4{background:#12a150}
.hcalm .hsa3joy{opacity:1;transform:translate(-50%,-50%)}.hcalm .hsa3juhu{transform:rotate(6deg)}.hcalm .hsa3mail{opacity:1}

/* ---------- Handy-Feinschliff ---------- */
.v3 .psglow{inset:2% 4%}
.v3 .buybar{max-width:calc(100vw - 20px);box-sizing:border-box}
.v3 .buybar .bbinfo{min-width:0;flex:1 1 auto;overflow:hidden}
.v3 .buybar .bbinfo b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){
 .v3 .bchead{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:28px}
 .v3 .bc2 .bcset>input{top:30px}
 .v3 .bcsave,.v3 .bc2 .bcparts{margin-left:28px}
 .v3 .bcribbon{right:10px}
 .v3 .buyrow .shopcta{font-size:15px;padding:15px 16px;gap:8px}
}
@media(max-width:1200px){
 .v3 .buyrow{flex-wrap:nowrap;align-items:center;gap:8px}
 .v3 .buyrow .qtypick{flex:none;height:54px}
 .v3 .buyrow .qtypick button{width:34px;height:54px;min-height:0}
 .v3 .buyrow .qtypick input{width:30px}
 .v3 .buyrow #add{min-width:0;min-height:54px;padding:8px 14px;font-size:14.5px;line-height:1.15;border-radius:28px;white-space:normal;text-wrap:balance;gap:8px}
 .v3 .buyrow #add svg{flex:none;width:18px;height:18px}
 .v3 .buyrow .wishbig{width:54px;height:54px}
}

/* ---------- So einfach geht's: Schleife – kurz ausblenden, dann von vorn ---------- */
.hjs .hsteplist .hstepart>*{transition:opacity .35s ease}
.hjs .hsteplist.rewind .hstepart>*{opacity:0!important}

/* ---------- Leerer Warenkorb: Tasche mit Gesicht, farbige Fläche, bunte Kategorien ---------- */
.v3 .cdpanel:has(.cdempty){background:radial-gradient(120% 60% at 100% 0%,#e2d9ff 0%,rgba(226,217,255,0) 66%),radial-gradient(100% 55% at 0% 100%,#ffd9e4 0%,rgba(255,217,228,0) 66%),radial-gradient(70% 40% at 0% 35%,#d9f1ff 0%,rgba(217,241,255,0) 70%),radial-gradient(60% 35% at 100% 80%,#fff0cf 0%,rgba(255,240,207,0) 70%),linear-gradient(180deg,#ffffff 0%,#f4f5ff 100%)}
.v3 .cdpanel:has(.cdempty) .cdhead{background:transparent}
.v3 .ebface{width:150px;height:150px;overflow:visible;animation:none;cursor:pointer}
.ebface .eb-shadow{fill:rgba(43,75,255,.16);transform-box:fill-box;transform-origin:center;animation:ebshadow 3.2s ease-in-out infinite}
.ebface .eb-body{transform-box:view-box;transform-origin:70px 124px;animation:ebsway 3.2s ease-in-out infinite}
.ebface .eb-handle{fill:none;stroke:#3d55ff;stroke-width:7;stroke-linecap:round}
.ebface .eb-shine{fill:none;stroke:rgba(255,255,255,.4);stroke-width:5;stroke-linecap:round}
.ebface .eb-brow{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.ebface .eb-eye{fill:#fff}
.ebface .eb-eyes{transform-box:fill-box;transform-origin:center;animation:ebblink 4.6s infinite}
.ebface .eb-pupil{fill:#1d2433;transition:transform .12s ease-out}
.ebface .eb-sad,.ebface .eb-happy{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1);transform-box:fill-box;transform-origin:center}
.ebface .eb-happy{opacity:0;transform:scale(.6)}
.ebface .eb-tear{fill:#8fd6f6;opacity:0;animation:ebtear 3.2s ease-in 1s infinite}
.ebface .cdspark{fill:#ffb547}
.ebface .s2{fill:#ff5a9c}.ebface .s3{fill:#10b981}
@keyframes ebsway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-3px)}}
@keyframes ebshadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.88)}}
@keyframes ebblink{0%,46%,50%,100%{transform:none}48%{transform:scaleY(.12)}}
@keyframes ebtear{0%,8%{opacity:0;transform:translateY(0)}18%{opacity:1}70%{opacity:.9;transform:translateY(22px)}82%,100%{opacity:0;transform:translateY(30px)}}
/* Freude: Kategorie überfahren oder Tasche anfassen */
.cdempty.hope .ebface .eb-sad,.ebface:hover .eb-sad{opacity:0;transform:scale(.6)}
.cdempty.hope .ebface .eb-happy,.ebface:hover .eb-happy{opacity:1;transform:none}
.cdempty.hope .ebface .eb-brow.l,.ebface:hover .eb-brow.l{transform:rotate(22deg) translateY(-3px)}
.cdempty.hope .ebface .eb-brow.r,.ebface:hover .eb-brow.r{transform:rotate(-22deg) translateY(-3px)}
.cdempty.hope .ebface .eb-tear,.ebface:hover .eb-tear{animation:none;opacity:0}
.cdempty.hope .ebface .eb-body,.ebface:hover .eb-body{animation:ebhop .7s cubic-bezier(.3,1.6,.5,1) infinite alternate}
@keyframes ebhop{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-10px) rotate(3deg)}}
/* Kategorien als bunte Pillen */
.v3 .cdempty .cdcats a,.v3 .cdempty .colnav a{transition:background .25s,color .25s,transform .3s var(--ease)}
.v3 .cdempty .cdcats a:nth-child(6n+1),.v3 .cdempty .colnav a:nth-child(6n+1){--c:#2b4bff;--t:#eef1ff}
.v3 .cdempty .cdcats a:nth-child(6n+2),.v3 .cdempty .colnav a:nth-child(6n+2){--c:#7c4dff;--t:#f2ecff}
.v3 .cdempty .cdcats a:nth-child(6n+3),.v3 .cdempty .colnav a:nth-child(6n+3){--c:#0b8f69;--t:#e3f8ef}
.v3 .cdempty .cdcats a:nth-child(6n+4),.v3 .cdempty .colnav a:nth-child(6n+4){--c:#c47406;--t:#fff2dc}
.v3 .cdempty .cdcats a:nth-child(6n+5),.v3 .cdempty .colnav a:nth-child(6n+5){--c:#e0365a;--t:#ffe8ee}
.v3 .cdempty .cdcats a:nth-child(6n+6),.v3 .cdempty .colnav a:nth-child(6n+6){--c:#0b84ba;--t:#e2f4fd}
.v3 .cdempty .cdcats a,.v3 .cdempty .colnav a{background:var(--t);color:var(--c)}
.v3 .cdempty .cdcats a:hover,.v3 .cdempty .cdcats a:focus-visible,.v3 .cdempty .colnav a:hover,.v3 .cdempty .colnav a:focus-visible{background:var(--c);color:#fff;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.ebface *{animation:none!important}.ebface .eb-tear{opacity:0}}

/* ---------- Bestellstatus: Farbkopf, Status-Chips, Lieferweg-Karte je Paket, Smiley bei Zustellung ---------- */
.v3 .trkpage{max-width:980px}
.v3 .trkhero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:end;margin:14px 0 22px;padding:clamp(24px,3.4vw,40px);border-radius:30px;color:#fff;
 background:radial-gradient(120% 140% at 100% 0%,#7c4dff 0%,#2b4bff 48%,#1730c9 100%);box-shadow:0 34px 80px -40px rgba(43,75,255,.8)}
.v3 .trkhero.arrived{background:radial-gradient(120% 140% at 100% 0%,#2ee6b0 0%,#10b981 40%,#0b7f5c 100%);box-shadow:0 34px 80px -40px rgba(16,185,129,.75)}
.v3 .trkhero::before{content:'';position:absolute;z-index:-1;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;border:2px solid rgba(255,255,255,.18);animation:gspin 30s linear infinite}
.v3 .trkhero::after{content:'';position:absolute;z-index:-1;inset:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-140%) skewX(-16deg);animation:htshine 8s cubic-bezier(.3,.7,.2,1) 1s infinite}
.v3 .trkeyebrow{margin:0 0 6px;font-size:14px;font-weight:600;opacity:.8}
.v3 .trkhero h1{margin:0;color:#fff;font-size:clamp(34px,4.6vw,64px);line-height:.95;letter-spacing:-.045em}
.v3 .trkhello{margin:12px 0 0;font-size:clamp(16px,1.4vw,19px);opacity:.92}
.v3 .trkchips{display:grid;gap:8px;min-width:230px}
.v3 .trkchip.statusline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:0;border-radius:16px;background:rgba(255,255,255,.16);color:#fff;font-size:14px;backdrop-filter:blur(6px)}
.v3 .trkchip span{opacity:.8}
.v3 .trkchip b{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.v3 .trkchip b::before{content:'';width:9px;height:9px;border-radius:50%;background:#fff}
.v3 .trkchip.ok b::before{background:#5cf2bf;box-shadow:0 0 0 4px rgba(92,242,191,.25)}
.v3 .trkchip.go b::before{background:#ffd36b;box-shadow:0 0 0 4px rgba(255,211,107,.25);animation:bcnow 2s infinite}
.v3 .trkchip.wait b::before{background:#ffd36b}
.v3 .trkchip.bad b::before{background:#ff6b81}
/* Lieferweg-Karte (schematisch) */
.v3 .trkmap{position:relative;aspect-ratio:600/190;margin:18px 0 0;border-radius:22px;overflow:hidden;background:radial-gradient(120% 120% at 88% 0%,#2c3590 0%,#151c46 46%,#0b0f24 100%)}
.v3 .trkmap svg{position:absolute;inset:0;width:100%;height:100%}
.v3 .trkblock{fill:rgba(255,255,255,.04)}
.v3 .trkroad{fill:none;stroke:rgba(255,255,255,.16);stroke-width:10;stroke-linecap:round}
.v3 .trkdone{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f,0));filter:drop-shadow(0 0 7px rgba(111,134,255,.95));animation:trkdraw 2.4s cubic-bezier(.45,0,.25,1) .4s both}
@keyframes trkdraw{from{stroke-dashoffset:1}}
.v3 .trkpkg.warn .trkdone{stroke:#f5a524;filter:drop-shadow(0 0 7px rgba(245,165,36,.9))}
.v3 .trkpin circle{fill:#fff}.v3 .trkpin path{fill:#2b4bff}
.v3 .trkhome circle{fill:#2b4bff;transform-box:fill-box;transform-origin:center}.v3 .trkhome path{fill:#fff}
.v3 .trkpkg.arrived .trkhome circle{animation:trkhome .8s 2.6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes trkhome{0%{fill:#2b4bff;transform:none}45%{transform:scale(1.45)}100%{fill:#10b981;transform:scale(1.15)}}
.v3 .trkvan rect,.v3 .trkvan path{fill:#fff}.v3 .trkvan circle{fill:#ffd36b}
.v3 .trkpkg.arrived .trkvan{animation:trkvanout .4s 2.8s both}
@keyframes trkvanout{to{opacity:0}}
.v3 .trkmaplabel{position:absolute;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);font:600 11.5px/1 "Inter Tight",sans-serif}
.v3 .trkmaplabel.start{left:12px;top:12px;bottom:auto}.v3 .trkmaplabel.end{right:12px}
.v3 .trkpage .trklink{background:var(--buygrad);color:#fff;box-shadow:0 12px 24px -12px rgba(43,75,255,.7)}.v3 .trkpage .trklink:hover{background:linear-gradient(135deg,#3a57ff,#1f3cf0 55%,#1730c9)}
.v3 .trkmapnote{margin:6px 2px 0;font-size:11.5px;color:var(--grey)}
.v3 .trkjoy{position:absolute;z-index:3;left:56%;top:46%;width:clamp(54px,13vw,92px);aspect-ratio:1;transform:translate(-50%,-50%) scale(0);opacity:0;animation:s3joy .8s 2.9s cubic-bezier(.3,1.6,.5,1) both,s3bob 2.4s 3.8s ease-in-out infinite}
.v3 .trkjoy svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
.v3 .trkjoy .j-face{fill:#ffd23f;stroke:#f5a524;stroke-width:3}
.v3 .trkjoy .j-shine{fill:none;stroke:rgba(255,255,255,.6);stroke-width:5;stroke-linecap:round;stroke-dasharray:38 300;transform:rotate(200deg);transform-origin:50px 50px}
.v3 .trkjoy .j-eye{fill:none;stroke:#4a2a0a;stroke-width:6;stroke-linecap:round}
.v3 .trkjoy .j-mouth{fill:#5a2208}.v3 .trkjoy .j-tongue{fill:none;stroke:#ff6b81;stroke-width:6;stroke-linecap:round}.v3 .trkjoy .j-blush{fill:#ff8fa3;opacity:.75}
.v3 .trkjoy b{position:absolute;right:88%;top:-20%;padding:7px 12px;border-radius:16px 16px 4px 16px;background:#fff;color:#1d2433;font:800 15px/1 "Inter Tight",sans-serif;white-space:nowrap;box-shadow:0 12px 24px -10px rgba(0,0,0,.5);transform:scale(0) rotate(10deg);transform-origin:100% 100%;animation:s3juhu .5s 3.35s cubic-bezier(.3,1.7,.5,1) both}
.v3 .trkburst{position:absolute;z-index:2;left:56%;top:46%;width:0;height:0}
.v3 .trkburst i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:2px;background:hsl(calc(var(--c) * 47deg + 10deg) 95% 60%);opacity:0;--a:calc(var(--c) * 25.7deg);animation:s3burst 1.2s 2.95s cubic-bezier(.2,.7,.3,1) both}
.v3 .trkburst i:nth-child(3n){border-radius:50%}
.v3 .trkpkg.arrived{box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.35),0 22px 50px -32px rgba(16,185,129,.55)}
.v3 .trkpkg.arrived .trkstate{color:#0b8f69}
.v3 .trkpkg .trkline li.done i{border-color:var(--buy);background:linear-gradient(135deg,#4865ff,#7c4dff)}
.v3 .trkpkg.arrived .trkline li.done i{border-color:#10b981;background:#10b981}
.v3 .trkpkg.arrived .trkline::after{background:linear-gradient(90deg,#2b4bff,#10b981)}
/* noch nicht versendet: Päckchen wird gepackt */
.v3 .trkpkg.pending{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,246,232,.92))}
.v3 .trkpack{position:relative;width:54px;height:44px}
.v3 .trkpack i{position:absolute;bottom:0;width:22px;height:20px;border-radius:5px;background:linear-gradient(135deg,#ffc56b,#f5a524);box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);animation:trkpackin 2.4s ease-in-out infinite}
.v3 .trkpack i:nth-child(1){left:0}.v3 .trkpack i:nth-child(2){left:16px;bottom:16px;animation-delay:.3s}.v3 .trkpack i:nth-child(3){left:30px;animation-delay:.6s}
@keyframes trkpackin{0%,100%{transform:none}40%{transform:translateY(-6px) rotate(-6deg)}}
.v3 .trksum{margin:6px 0 18px;padding:6px 18px;border-radius:22px;background:rgba(255,255,255,.85);box-shadow:0 22px 50px -36px rgba(16,19,30,.4)}
.v3 .trkintro{display:flex;align-items:center;gap:20px;margin:10px 0 6px}
.v3 .trkintroart{flex:none;width:clamp(110px,16vw,160px);height:auto;overflow:visible}
.v3 .trkintroart .ti-box{animation:gfloat 4s ease-in-out infinite}
.v3 .trkintroart .ti-glass{transform-box:fill-box;transform-origin:30% 30%;animation:tiglass 3.4s ease-in-out infinite}
@keyframes tiglass{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-8px)}}
@media(max-width:720px){.v3 .trkhero{grid-template-columns:1fr;border-radius:24px}.v3 .trkchips{min-width:0}.v3 .trkintro{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.v3 .trkhero::before,.v3 .trkhero::after,.v3 .trkdone,.v3 .trkpack i,.v3 .trkintroart *{animation:none}.v3 .trkjoy{animation:none;opacity:1;transform:translate(-50%,-50%)}.v3 .trkjoy b{animation:none;transform:rotate(6deg)}.v3 .trkburst{display:none}}

/* ---------- Flug in den Warenkorb: Kugel mit Produktfoto, bunte Leuchtspur, Funken an der Tasche ---------- */
.fxorb{position:fixed;left:0;top:0;z-index:4000;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;overflow:hidden;background:#fff;border:3px solid #fff;pointer-events:none;
 box-shadow:0 0 0 4px rgba(43,75,255,.35),0 0 28px 6px rgba(124,77,255,.45),0 16px 30px -10px rgba(16,19,30,.6);will-change:transform,opacity}
.fxorb img{display:block;width:100%;height:100%;object-fit:cover}
.fxorb.noimg{background:linear-gradient(135deg,#4865ff,#7c4dff)}
.fxspark{position:fixed;left:0;top:0;z-index:3999;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;pointer-events:none;box-shadow:0 0 10px 2px rgba(255,255,255,.65);will-change:transform,opacity}
/* Herz fliegt zur Merkliste */
.fxheart{position:fixed;left:0;top:0;z-index:4000;width:36px;height:36px;margin:-18px 0 0 -18px;pointer-events:none;will-change:transform,opacity}
.fxheart.mini{width:16px;height:16px;margin:-8px 0 0 -8px}
.fxheart svg{display:block;width:100%;height:100%;fill:#ff3b5c;filter:drop-shadow(0 6px 10px rgba(255,59,92,.55))}
.v3 #hwish.love svg{fill:#ff3b5c;stroke:#ff3b5c;animation:hwlove .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes hwlove{0%{transform:scale(1)}30%{transform:scale(1.45)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* ---------- Grüne Punkte (Lieferzeit, Bestellbar) pulsieren ---------- */
.v3 .stockline.is-bestellbar::before,.v3 .stockline.is-lager::before{background:#1f9d55}
.v3 .deliverynote::before,.v3 .stockline.is-bestellbar::before,.v3 .stockline.is-lager::before{animation:greenpulse 2.2s ease-out infinite}
@keyframes greenpulse{0%{box-shadow:0 0 0 0 rgba(31,157,85,.55)}70%{box-shadow:0 0 0 9px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}

/* ---------- Schriftband des Produkts: Unterlängen (g, p, y) nicht abschneiden ---------- */
.v3 .ptitleband span{line-height:1.22}

/* ---------- Verteilung: ausgeblendete Sterne (2 ★, 1 ★) gedämpft ---------- */

/* ---------- Set-Kachel: schillernder Glanz (anders als der weiße Kaufknopf-Glanz) und funkelnde Sterne ---------- */
.v3 .bc2 .bcset::after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;mix-blend-mode:multiply;opacity:.9;
 background:linear-gradient(115deg,transparent 0%,transparent 36%,rgba(190,170,255,.32) 43%,rgba(255,205,150,.34) 50%,rgba(150,225,255,.32) 57%,transparent 64%,transparent 100%);
 background-size:260% 100%;background-position:100% 0;animation:bcholo 5.5s ease-in-out infinite}
@keyframes bcholo{0%,15%{background-position:110% 0}55%,100%{background-position:-10% 0}}
.v3 .bc2 .bcset::before{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
 background:radial-gradient(circle at 18% 22%,#fff 0 1.6px,transparent 2.6px),radial-gradient(circle at 74% 30%,#ffd36b 0 1.8px,transparent 3px),radial-gradient(circle at 88% 78%,#fff 0 1.5px,transparent 2.4px),radial-gradient(circle at 40% 86%,#c9b8ff 0 1.6px,transparent 2.8px);
 animation:bctwinkle 2.6s ease-in-out infinite}
@keyframes bctwinkle{0%,100%{opacity:.25}50%{opacity:1}}
/* Spar-Balken lebt: Streifen laufen, Glanz zieht über den blauen Teil, leuchtender Punkt an der Grenze */
.v3 .bcbar{overflow:visible;background:repeating-linear-gradient(135deg,#ffc56b 0 6px,#ffe0a3 6px 12px);background-size:17px 17px;animation:bcstripes 1.1s linear infinite}
@keyframes bcstripes{to{background-position:17px 0}}
.v3 .bcbar i{overflow:hidden;background:linear-gradient(90deg,#4865ff,#2b4bff 60%,#7c4dff)}
.v3 .bcbar i::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:bcbarshine 2.4s ease-in-out infinite}
@keyframes bcbarshine{0%,20%{left:-40%}80%,100%{left:110%}}
.v3 .bcsave{position:relative}
.v3 .bcbar::after{content:'';position:absolute;top:50%;left:var(--set);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #2b4bff,0 0 14px 2px rgba(43,75,255,.7);
 opacity:0;transform:scale(.4);transition:opacity .4s 1s,transform .5s 1s cubic-bezier(.3,1.6,.5,1)}
.v3 .bcset.in .bcbar::after,.v3 .bcset:has(input:checked) .bcbar::after{opacity:1;transform:none;animation:bcdot 1.8s 1.6s ease-in-out infinite}
@keyframes bcdot{50%{box-shadow:0 0 0 3px #2b4bff,0 0 0 8px rgba(43,75,255,.18),0 0 16px 4px rgba(43,75,255,.6)}}

/* ---------- Orbit: SNS-Tasche mit CH (Emin 12.11.2026 nachts, BrandMark::heroBag), Bilder lassen sich gedrückt halten und ziehen ----------
   Glanzstreifen gleitet schräg über die Vorderseite und macht dann Pause, Funkelsterne, vorderer Henkel wippt leicht; i-Punkt = Sonne + Wolke (brand-logo.css). */
.v3 .horbit img,.v3 .horbit a{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}
.v3 .hobag .hb-shine{animation:hbshine 3.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes hbshine{0%{transform:translateX(0);opacity:0}8%{opacity:1}52%{transform:translateX(1180px);opacity:1}60%,100%{transform:translateX(1180px);opacity:0}}
.v3 .hobag .hb-spark{transform-box:fill-box;transform-origin:center;animation:hbtw 2.4s ease-in-out infinite}
.v3 .hobag .hb-spark.s2{animation-delay:1.1s}
@keyframes hbtw{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.v3 .hobag .hb-handle{transform-box:fill-box;transform-origin:50% 100%;animation:hbhandle 5.5s ease-in-out infinite}
@keyframes hbhandle{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
@media(prefers-reduced-motion:reduce){.v3 .bc2 .bcset::after,.v3 .bc2 .bcset::before,.v3 .bcbar,.v3 .bcbar i::before,.v3 .bcbar::after,.v3 .hobag *,.v3 .deliverynote::before,.v3 .stockline::before{animation:none!important}}

/* ---------- Unterlängen nie abschneiden (g, p, q, y, j): Masken der Wort-Animationen mit genug Luft unten und rechts ---------- */
.v3 .hword,.v3 .fxsplit .fxw{padding:0 .07em .26em 0;margin:0 -.07em -.26em 0}

/* ---------- Startbild: Scroll-Hinweis statt Plus-Leiste – Maus mit rollendem Punkt, Pfeile, magnetisch, Klick gleitet weiter ---------- */
.v3 .hscroll{display:flex;width:max-content;align-items:center;gap:12px;margin:22px auto 0;padding:9px 18px 9px 12px;border-radius:999px;color:#3d4454;text-decoration:none;
 background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 34px -22px rgba(43,75,255,.55),inset 0 0 0 1px rgba(43,75,255,.12);font:500 14px/1 "Inter Tight",sans-serif;transition:background .3s,color .3s,box-shadow .3s}
.v3 .hscroll:hover,.v3 .hscroll:focus-visible{background:var(--buy);color:#fff;text-decoration:none;box-shadow:0 18px 40px -18px rgba(43,75,255,.85)}
.v3 .hsmouse{position:relative;width:20px;height:30px;border-radius:12px;border:2px solid currentColor;opacity:.85}
.v3 .hsmouse i{position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--buy);animation:hsroll 1.8s cubic-bezier(.6,0,.3,1) infinite}
.v3 .hscroll:hover .hsmouse i,.v3 .hscroll:focus-visible .hsmouse i{background:#fff}
@keyframes hsroll{0%{transform:translateY(0);opacity:0}20%{opacity:1}70%{transform:translateY(9px);opacity:0}100%{transform:translateY(9px);opacity:0}}
.v3 .hschev{display:grid;gap:2px}
.v3 .hschev i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.25;animation:hschev 1.8s ease-in-out infinite}
.v3 .hschev i:nth-child(2){animation-delay:.25s}
@keyframes hschev{0%,100%{opacity:.2}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.v3 .hsmouse i,.v3 .hschev i{animation:none;opacity:1}}

/* ---------- Hintergrund: feines Filmkorn (nur Computer) – macht Flächen lebendig, ohne zu stören ---------- */
.fxgrain{position:fixed;z-index:2147480000;inset:-120px;pointer-events:none;opacity:.035;will-change:transform;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:fxgrain 1.6s steps(1) infinite}
@keyframes fxgrain{0%{transform:translate(0,0)}12%{transform:translate(-38px,22px)}25%{transform:translate(26px,-34px)}37%{transform:translate(-14px,46px)}50%{transform:translate(44px,10px)}62%{transform:translate(-50px,-18px)}75%{transform:translate(18px,38px)}87%{transform:translate(-26px,-44px)}}
@media(prefers-reduced-motion:reduce){.fxgrain{animation:none}}
/* Hinweis im Startbild: lesbar als Glas-Pille über den Bildern */
.v3 .hframe .stagehint{padding:7px 13px;border-radius:999px;background:rgba(16,19,30,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(255,255,255,.9);font-size:12.5px}

/* ---------- Set: Preisvergleich statt Balken – einzeln (durchgestrichen) → im Set → Münze „gespart“ ---------- */
.v3 .bc2 .bcsave{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px 30px}
.v3 .bcold,.v3 .bcnew{display:grid;gap:1px;padding:6px 11px;border-radius:13px;line-height:1.1}
.v3 .bcold{background:#f1f2f6;color:var(--grey)}
.v3 .bcold s{font-size:13.5px;text-decoration-thickness:1.5px;text-decoration-color:#ff4f6d}
.v3 .bcnew{background:linear-gradient(135deg,#eef1ff,#e6e0ff);color:var(--buy-ink)}
.v3 .bcnew b{font-size:15px;font-weight:700;color:var(--buy)}
.v3 .bcold small,.v3 .bcnew small{font-size:10.5px;font-weight:600;opacity:.75}
.v3 .bcarrow{display:inline-flex;gap:1px}
.v3 .bcarrow i{width:7px;height:7px;border-right:2px solid var(--buy);border-bottom:2px solid var(--buy);transform:rotate(-45deg);opacity:.25;animation:bcarr 1.4s ease-in-out infinite}
.v3 .bcarrow i:nth-child(2){animation-delay:.18s}.v3 .bcarrow i:nth-child(3){animation-delay:.36s}
@keyframes bcarr{0%,100%{opacity:.2}40%{opacity:1}}
.v3 .bccoin{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;background:linear-gradient(135deg,#e3f8ef,#d2f5e6);color:#0b8f69;box-shadow:0 8px 18px -12px rgba(16,185,129,.8)}
.v3 .bccoin em{font-style:normal;font-weight:700;font-size:13px;white-space:nowrap}
.v3 .bccoinface{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:800 12px/1 "Inter Tight",sans-serif;font-style:normal;color:#7a4a00;
 background:radial-gradient(circle at 35% 30%,#fff1b8,#ffc94d 55%,#e8a400);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 2px 6px -2px rgba(200,140,0,.8);animation:bccoin 3.2s ease-in-out infinite}
@keyframes bccoin{0%,70%,100%{transform:rotateY(0)}80%{transform:rotateY(180deg)}90%{transform:rotateY(360deg) translateY(-2px)}}
@media(max-width:420px){.v3 .bc2 .bcsave{margin-left:28px}}
@media(prefers-reduced-motion:reduce){.v3 .bcarrow i,.v3 .bccoinface{animation:none;opacity:1}}
/* Menge: kleiner Hinweis „3 ד an den Preisen */
.v3 .qtyhint{display:block;flex-basis:100%;margin-top:2px;font:500 13px "Inter Tight",sans-serif;color:var(--grey)}
.v3 .bcqty{margin-left:6px;font-size:12px;font-weight:500;color:var(--grey)}

/* ---------- Häufige Fragen: links Überschrift + Hilfe-Karte, rechts farbige Fragen-Kacheln ---------- */
.v3 .pf2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);align-items:start}
.v3 .pf2 h2{font-size:clamp(38px,4.4vw,72px)}
.v3 .pfside{position:sticky;top:110px}
.v3 .pfintro{margin:0 0 18px;font-size:16px;line-height:1.55;color:#4a5164;max-width:36ch}
.v3 .pfhelp{display:flex;align-items:center;gap:14px;max-width:360px;padding:14px 18px 14px 14px;border-radius:22px;text-decoration:none;color:var(--ink);
 background:linear-gradient(135deg,#eef1ff,#f6ecff 60%,#fff1e6);box-shadow:0 20px 44px -30px rgba(43,75,255,.6),inset 0 0 0 1px rgba(124,77,255,.12);transition:transform .35s var(--ease),box-shadow .35s}
.v3 .pfhelp:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(43,75,255,.75),inset 0 0 0 1px rgba(124,77,255,.2)}
.v3 .pfhelp b{display:block;font-size:16px}.v3 .pfhelp small{display:block;margin-top:2px;color:var(--grey);font-size:13px}
.v3 .pfbubble{position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:4px;width:52px;height:42px;border-radius:16px 16px 16px 5px;background:var(--buygrad);box-shadow:0 10px 20px -10px rgba(43,75,255,.9)}
.v3 .pfbubble i{width:6px;height:6px;border-radius:50%;background:#fff;animation:gdot 1.2s ease-in-out infinite}
.v3 .pfbubble i:nth-child(2){animation-delay:.15s}.v3 .pfbubble i:nth-child(3){animation-delay:.3s}
.v3 .pflist{display:grid;gap:10px}
.v3 .pf2 .pfitem{--c:#2b4bff;position:relative;max-width:none;margin:0;padding:0;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(16,19,30,.04),0 18px 40px -32px rgba(16,19,30,.4);transition:box-shadow .4s,transform .4s var(--ease)}
.v3 .pf2 .pfitem:nth-child(5n+2){--c:#7c4dff}.v3 .pf2 .pfitem:nth-child(5n+3){--c:#0fae84}.v3 .pf2 .pfitem:nth-child(5n+4){--c:#e8930c}.v3 .pf2 .pfitem:nth-child(5n+5){--c:#f0435f}
.v3 .pf2 .pfitem summary{display:flex;align-items:center;gap:14px;padding:16px 18px 16px 14px;list-style:none;cursor:pointer;font-size:clamp(16px,1.3vw,18.5px);font-weight:500;letter-spacing:-.01em}
.v3 .pf2 .pfitem summary::-webkit-details-marker{display:none}
.v3 .pf2 .pfitem summary::after{display:none}
.v3 .pfq{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font:700 16px/1 "Inter Tight",sans-serif;transition:background .3s,color .3s}
.v3 .pftext{flex:1;min-width:0}
.v3 .pfplus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 10%,#fff);transition:transform .45s var(--ease),background .3s}
.v3 .pfplus::before,.v3 .pfplus::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--c);transition:background .3s}
.v3 .pfplus::after{transform:rotate(90deg)}
.v3 .pf2 .pfitem[open]:not(.closing){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,transparent),0 24px 50px -30px color-mix(in srgb,var(--c) 70%,transparent)}
.v3 .pf2 .pfitem[open]:not(.closing) .pfq{background:var(--c);color:#fff}
.v3 .pf2 .pfitem[open]:not(.closing) .pfplus{transform:rotate(135deg);background:var(--c)}
.v3 .pf2 .pfitem[open]:not(.closing) .pfplus::before,.v3 .pf2 .pfitem[open]:not(.closing) .pfplus::after{background:#fff}
@media(hover:hover){.v3 .pf2 .pfitem:hover{transform:translateX(4px)}}
.v3 .pf2 .pfa p{margin:0;padding:0 22px 18px 62px;font-size:15.5px;line-height:1.6;color:#4a5164}
.v3 .pf2 .pfa a{color:var(--c);font-weight:600}
@media(max-width:900px){.v3 .pf2{grid-template-columns:1fr}.v3 .pfside{position:static}.v3 .pf2 .pfa p{padding:0 18px 16px 18px}}
@media(prefers-reduced-motion:reduce){.v3 .pfbubble i{animation:none}}
.v3 .bccoinface{position:relative;overflow:hidden}.v3 .bccoinface::before{content:'';position:absolute;inset:5px;border-radius:50%;border:1.5px solid rgba(160,100,0,.45)}.v3 .bccoinface::after{content:'';position:absolute;top:-4px;bottom:-4px;left:-8px;width:6px;background:rgba(255,255,255,.85);transform:skewX(-20deg);animation:bccoinshine 3.2s ease-in-out infinite}
@keyframes bccoinshine{0%,60%{left:-8px}80%,100%{left:30px}}

/* ---------- Kundenfotos im Vollbild: fester Kartenstapel, immer mittig, Pfeile neben der Karte ---------- */
.v3 .revlight{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;--sw:min(84vw,600px);--sh:min(74vh,760px)}
.v3 .revlight[open]{display:grid;place-items:center;animation:none}
.v3 .revlight::backdrop{background:radial-gradient(80% 70% at 50% 45%,rgba(43,75,255,.28),rgba(10,12,24,.9) 70%);backdrop-filter:blur(8px)}
.v3 .revlight .revlstage{position:relative;display:block;width:var(--sw);height:var(--sh);touch-action:none;user-select:none;-webkit-user-select:none}
.v3 .revlc{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#0d1122;cursor:grab;will-change:transform;
 box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);
 transform:translate(calc(var(--d,0) * 16px + var(--px,0px)),calc(var(--d,0) * 14px + var(--py,0px))) rotate(calc(var(--d,0) * 3.5deg + var(--pr,0deg))) scale(calc(1 - var(--d,0) * .05));
 filter:brightness(calc(1 - var(--d,0) * .25));transition:transform .52s cubic-bezier(.2,.9,.25,1),filter .52s,opacity .45s}
.v3 .revlc.drag{transition:none;cursor:grabbing}
.v3 .revlight .revlc img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none}
.v3 .revlight .revlc img.bg{object-fit:cover;filter:blur(26px) brightness(.55) saturate(1.2);transform:scale(1.15)}
.v3 .revlight .revlc img.fg{object-fit:contain}
.v3 .revlc.out{transform:translate(calc(-125% + var(--tx,0px) * .2),-8%) rotate(-24deg)!important;opacity:0;transition:transform .52s cubic-bezier(.5,0,.75,.2),opacity .52s ease-in}
.v3 .revlc.in{transform:translate(-125%,-8%) rotate(-24deg);opacity:0;transition:none}
.v3 .revlc.enter{opacity:0;transform:translate(48px,42px) rotate(10deg) scale(.85)}
.v3 .revlc.gone{opacity:0}
.v3 .revlstage.deal .revlc{animation:revldeal .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc((2 - var(--d,0)) * 70ms)}
@keyframes revldeal{from{transform:translate(0,40px) rotate(-6deg) scale(.8);opacity:0}}
.v3 .revlight .revnav{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.96);color:var(--buy);font:500 30px/1 "Inter Tight",sans-serif;
 display:grid;place-items:center;padding:0 0 4px;cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);transition:transform .25s var(--ease),background .2s,color .2s;z-index:5}
.v3 .revlight .revnav:hover{transform:scale(1.08);background:var(--buy);color:#fff}
.v3 .revlight .revnav.prev{left:max(14px,calc(50% - var(--sw) / 2 - 76px));right:auto}
.v3 .revlight .revnav.next{right:max(14px,calc(50% - var(--sw) / 2 - 76px));left:auto}
.v3 .revlight .revnav[hidden]{display:none}
.v3 .revlight .revclose{position:absolute;z-index:6;top:max(14px,calc(50% - var(--sh) / 2 - 58px));right:max(14px,calc(50% - var(--sw) / 2));left:auto;width:42px;height:42px;margin:0}
.v3 .revlight .revlcount{position:absolute;left:0;right:0;top:calc(50% + var(--sh) / 2 + 18px);bottom:auto;margin:0;text-align:center;color:#fff;font:600 14px "Inter Tight",sans-serif;letter-spacing:.04em}
@media(max-width:720px){
 .v3 .revlight{--sw:90vw;--sh:min(64vh,620px)}
 .v3 .revlight .revnav{top:auto;margin:0;bottom:max(16px,calc(50% - var(--sh) / 2 - 86px))}
 .v3 .revlight .revnav.prev{left:calc(50% - 110px)}.v3 .revlight .revnav.next{right:calc(50% - 110px)}
 .v3 .revlight .revlcount{top:auto;bottom:max(30px,calc(50% - var(--sh) / 2 - 72px))}
 .v3 .revlight .revclose{top:max(14px,calc(50% - var(--sh) / 2 - 56px));right:5vw}
}
@media(prefers-reduced-motion:reduce){.v3 .revlc{transition:none}.v3 .revlstage.deal .revlc{animation:none}}
/* ---------- Sterne-Verteilung: symmetrisch (Stern-Spalte, Balken, Anzahl), alle Zeilen gleich – auch 2 ★ und 1 ★ ---------- */
.v3 .revdist{gap:6px;min-width:min(320px,100%)}
.v3 .revbar{grid-template-columns:46px minmax(0,1fr) 46px;gap:12px;padding:4px 8px}
.v3 .revbar .rvs{display:inline-flex;align-items:center;justify-content:center;gap:5px;font:600 14px/1 "Inter Tight",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.v3 .revbar .rvs b{font-size:14px;line-height:1;color:#f5b100;transform:translateY(-.5px)}
.v3 .revbar i{height:10px;background:#e3e7f2}
.v3 .revbar small{text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.v3 .revbar.revoff{cursor:default}
.v3 .revbar.revoff:hover{background:none}
/* Herz zurück (Entfernen): blasser, das Herz oben atmet aus, der Knopf fängt es auf */
.fxheart.back svg{fill:#c5cad8;filter:drop-shadow(0 6px 10px rgba(16,19,30,.25))}
.v3 #hwish.unlove svg{animation:hwunlove .7s ease}
@keyframes hwunlove{0%{transform:scale(1)}40%{transform:scale(.75)}100%{transform:scale(1)}}
.v3 .wish.land{animation:wishland .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes wishland{0%{transform:scale(1)}35%{transform:scale(.82)}70%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ---------- Set-Ansicht „Im Set enthalten“: Farbverlauf-Rahmen, Fotos, gleiche Spalten, Summen bündig ---------- */
@property --sba{syntax:'<angle>';inherits:false;initial-value:0deg}
.v3 .setbox.sb2,.v3 .setinbuy .setbox.sb2{position:relative;margin-top:22px;max-width:none;padding:18px 0 14px;border:2px solid transparent;border-radius:26px;
 background:linear-gradient(160deg,#f7f8ff,#fff 50%,#fff8ef) padding-box,conic-gradient(from var(--sba),#2b4bff,#7c4dff,#ff5a9c,#ffb020,#10b981,#2b4bff) border-box;
 box-shadow:0 26px 60px -36px rgba(43,75,255,.6);animation:bcspin 8s linear infinite;--sbpad:18px}
@keyframes sbspin{to{--sba:360deg}}
.v3 .setbox.sb2{animation-name:sbspin}
.v3 .sbhead{display:flex;align-items:center;gap:10px;padding:0 var(--sbpad) 10px}
.v3 .sb2 .sbhead h2{margin:0;font:600 18px/1.2 "Inter Tight",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.v3 .sbcount{padding:4px 10px;border-radius:99px;background:rgba(43,75,255,.1);color:var(--buy);font:600 12px/1 "Inter Tight",sans-serif}
.v3 .sbrib{position:static;margin-left:auto}
.v3 .sb2 .setlist{margin:0;padding:0;list-style:none;display:grid;gap:0}
.v3 .sb2 .setlist li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px var(--sbpad);border:0;border-top:1px solid rgba(43,75,255,.08);
 animation:sbin .55s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i) * 70ms);transition:background .25s}
.v3 .sb2 .setlist li:hover{background:rgba(43,75,255,.04)}
@keyframes sbin{from{opacity:0;transform:translateX(-12px)}}
.v3 .sbimg{position:relative;width:56px;height:56px}
.v3 .sbimg img{display:block;width:56px;height:56px;border-radius:15px;object-fit:cover;background:#fff;border:2px solid #fff;box-shadow:0 8px 18px -10px rgba(16,19,30,.5);cursor:zoom-in;transition:transform .35s var(--ease)}
.v3 .sb2 li:hover .sbimg img{transform:rotate(-4deg) scale(1.06)}
.v3 .sbqty{position:absolute;right:-6px;top:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:99px;display:grid;place-items:center;background:var(--buygrad);color:#fff;font:700 11px/1 "Inter Tight",sans-serif;box-shadow:0 6px 12px -6px rgba(43,75,255,.9)}
.v3 .sbname{display:grid;gap:2px;min-width:0}
.v3 .sbname a{color:var(--ink);font-weight:500;font-size:15px;line-height:1.3;text-decoration:none}
.v3 .sbname a:hover{color:var(--buy);text-decoration:none}
.v3 .sbname small{color:var(--grey);font-size:12.5px}
.v3 .sbname em{font-style:normal;font-size:12.5px;color:#b45309}
.v3 .sbprice{display:grid;justify-items:end;font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;color:var(--ink)}
.v3 .sbprice small{font-weight:400;font-size:11.5px;color:var(--grey)}
.v3 .sb2 .setsum{display:grid;gap:0;margin:6px 0 0;padding:8px 0 0;border-top:1.5px dashed rgba(43,75,255,.18)}
.v3 .sb2 .setsum div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px var(--sbpad);font-variant-numeric:tabular-nums}
.v3 .sb2 .setsum dt{color:#4a5164;font-size:14.5px}
.v3 .sb2 .setsum dd{margin:0;font-size:15px}
.v3 .sb2 .setsum div:first-child dd{text-decoration:none}
.v3 .sb2 .setsum s{color:var(--grey);text-decoration-thickness:1.5px;text-decoration-color:#ff4f6d}
.v3 .sb2 .sbset b{font-size:18px;font-weight:700;color:var(--buy)}
.v3 .sb2 .setsave{margin:6px var(--sbpad) 0;padding:10px 14px;border-radius:16px;background:linear-gradient(135deg,#e3f8ef,#d2f5e6);color:#0b6b37;font-weight:700;box-shadow:0 10px 22px -16px rgba(16,185,129,.9)}
.v3 .sb2 .setsave dt{display:inline-flex;align-items:center;gap:10px;color:#0b6b37;font-weight:700}
.v3 .sb2 .setsave dd{font-size:17px}
.v3 .sb2 .setnote{margin:10px var(--sbpad) 0;font-size:12px;color:var(--grey)}
@media(max-width:520px){.v3 .setbox.sb2{--sbpad:14px}.v3 .sb2 .setlist li{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}.v3 .sbimg,.v3 .sbimg img{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.v3 .setbox.sb2,.v3 .sb2 .setlist li{animation:none}}
/* Startbild: Karte greifen und schwingen (Maus) */
.v3 .stageframe.hovering{cursor:grab}
.v3 .stageframe.grabbing,.v3 .stageframe.grabbing *{cursor:grabbing;user-select:none;-webkit-user-select:none}

/* ---------- Nach dem Kauf: Warten (pulsiert), Bestätigt (Häkchen + Konfetti + nächste Schritte), Nicht abgeschlossen ---------- */
.v3 .rp{max-width:760px;text-align:center}
.v3 .rp .k{display:block;text-align:left}
.v3 .rphero{position:relative;width:132px;height:132px;margin:26px auto 10px}
.v3 .rpring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(43,75,255,.18),rgba(43,75,255,0) 70%);animation:rpbreath 2.4s ease-in-out infinite}
@keyframes rpbreath{50%{transform:scale(1.15);opacity:.6}}
.v3 .rpicon{position:relative;width:100%;height:100%;overflow:visible}
.v3 .rpc{fill:#fff;stroke:rgba(43,75,255,.25);stroke-width:5;filter:drop-shadow(0 16px 26px rgba(43,75,255,.35))}
.v3 .rpok,.v3 .rpx{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.v3 .rpdots circle{fill:var(--buy);animation:gdot 1.2s ease-in-out infinite;transform-box:fill-box}
.v3 .rpdots circle:nth-child(2){animation-delay:.15s}.v3 .rpdots circle:nth-child(3){animation-delay:.3s}
.v3 .rp.ok .rpdots,.v3 .rp.fail .rpdots{display:none}
.v3 .rp.ok .rpc{fill:#10b981;stroke:#5ee0b8;animation:rppop .6s cubic-bezier(.3,1.6,.5,1) both}
.v3 .rp.ok .rpok{opacity:1;animation:rpdraw .6s .35s cubic-bezier(.6,0,.2,1) forwards}
.v3 .rp.ok .rpring{background:radial-gradient(circle,rgba(16,185,129,.28),rgba(16,185,129,0) 70%)}
.v3 .rp.fail .rpc{fill:#f0435f;stroke:#ffb3c0;animation:rppop .6s cubic-bezier(.3,1.6,.5,1) both}
.v3 .rp.fail .rpx{opacity:1;animation:rpdraw .5s .3s ease forwards}
.v3 .rp.fail .rpring{background:radial-gradient(circle,rgba(240,67,95,.22),rgba(240,67,95,0) 70%)}
@keyframes rppop{from{transform:scale(.5);transform-origin:50% 50%}}
@keyframes rpdraw{to{stroke-dashoffset:0}}
.v3 .rpconf{position:absolute;left:50%;top:50%;width:0;height:0}
.v3 .rpconf i{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:2px;background:hsl(calc(var(--c) * 41deg + 200deg) 90% 58%);opacity:0;--a:calc(var(--c) * 20deg)}
.v3 .rpconf i:nth-child(3n){border-radius:50%}
.v3 .rp.ok .rpconf i{animation:rpconf 1.4s .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes rpconf{0%{opacity:0;transform:rotate(var(--a)) translateY(0)}12%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-120px) rotate(300deg)}}
.v3 .rp h1{margin:6px 0 10px}
.v3 .rp .receipt{display:grid;gap:6px;justify-items:center;border:0;background:none;padding:0}
.v3 .rp #rstate{font-size:clamp(18px,1.6vw,22px)}
.v3 .rp #rhint{max-width:52ch;margin:0;color:#4a5164}
.v3 .rpsteps{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:26px 0 8px;padding:0;list-style:none;text-align:center}
.v3 .rp.ok .rpsteps{display:grid}
.v3 .rpsteps li{position:relative;display:grid;justify-items:center;gap:4px;padding:14px 8px;border-radius:18px;background:rgba(255,255,255,.85);box-shadow:0 16px 36px -28px rgba(16,19,30,.45);animation:sbin .5s cubic-bezier(.2,.9,.25,1) both}
.v3 .rpsteps li:nth-child(2){animation-delay:.1s}.v3 .rpsteps li:nth-child(3){animation-delay:.2s}.v3 .rpsteps li:nth-child(4){animation-delay:.3s}
.v3 .rpsteps i{width:28px;height:28px;border-radius:50%;background:#eef1ff;box-shadow:inset 0 0 0 2px rgba(43,75,255,.25)}
.v3 .rpsteps li.done i{background:#10b981;box-shadow:none;position:relative}
.v3 .rpsteps li.done i::after{content:'';position:absolute;left:10px;top:6px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.v3 .rpsteps b{font-size:14px;font-weight:600}.v3 .rpsteps small{font-size:12px;color:var(--grey)}
.v3 .rplinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 0}
@media(max-width:600px){.v3 .rpsteps{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.v3 .rpring,.v3 .rpdots circle,.v3 .rp.ok .rpconf i{animation:none}.v3 .rp.ok .rpok,.v3 .rp.fail .rpx{animation:none;stroke-dashoffset:0}}
.v3 .rplinks .pill{display:inline-flex;align-items:center;padding:0 24px;min-height:54px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;box-shadow:0 14px 30px -20px rgba(16,19,30,.5);text-decoration:none}
.v3 .rplinks{align-items:center}.v3 .rplinks .shopcta{margin:0}

/* ---------- Bewertungsfotos immer mittig (Vorlage für alle Produkte und künftige Importe): Einzelfoto in der Karte zentriert, ---------- */
/* ---------- Stapel vor dem Auffächern liegt in der Mitte statt links ---------- */
.v3 .revcard{--rpm:12px}
.v3 .revcard .revphoto,.v3 .revcard .revvideo{margin-left:auto;margin-right:auto;max-width:calc(100% - var(--rpm) * 2)}
.v3 .revcard .revphoto img{margin:0 auto}
.js .v3 .revdeck.stacked .revdcard{transform:translateX(calc((var(--i) - (var(--n) - 1) / 2) * (-100% - 6px))) translateY(calc(var(--i) * 3px)) rotate(calc(var(--i) * 4deg - 3deg))}
@media(max-width:720px){.v3 .revcard{--rpm:7px}.js .v3 .revdeck.stacked .revdcard{transform:translateX(calc((var(--i) - (var(--n) - 1) / 2) * (-100% - 4px))) translateY(calc(var(--i) * 2px)) rotate(calc(var(--i) * 4deg - 3deg))}}
@media(prefers-reduced-motion:reduce){.js .v3 .revdeck.stacked .revdcard{transform:none}}

/* ---------- Startbild: farbiger Hintergrund statt Dunkelblau (WebGL zeichnet den fließenden Verlauf; das hier ist der Stand ohne WebGL ---------- */
/* ---------- und vor dem ersten Bild), Abdunklung unten nur noch leicht und farbig für die Schrift ---------- */
/* Himmels-Verlauf der Startbühne – gemeinsame Farben für Bühne und „Entdecken"-Szene (dort als SVG-Verlauf, gleiche Lagen; Test HeroSkyGradientTest) */
.v3{--sky-base:#6b45f5;--sky-blue:#2b54ff;--sky-pink:#ff54a8;--sky-orange:#ff9e45;--sky-cyan:#29d6f2}
.hreelsky .hsk-b{stop-color:var(--sky-blue)}.hreelsky .hsk-p{stop-color:var(--sky-pink)}.hreelsky .hsk-o{stop-color:var(--sky-orange)}.hreelsky .hsk-c{stop-color:var(--sky-cyan)}.hreelsky .hsk-s1{stop-color:#280e5a}.hreelsky .hsk-s2{stop-color:#1e0a48} /* Abdunklung wie .hframe.stageframe .hshade: rgb(40,14,90) / rgb(30,10,72) */
.v3 .hframe.stageframe{background:radial-gradient(60% 70% at 14% 22%,var(--sky-blue) 0,transparent 70%),radial-gradient(45% 60% at 86% 24%,var(--sky-pink) 0,transparent 70%),radial-gradient(45% 55% at 66% 88%,var(--sky-orange) 0,transparent 70%),radial-gradient(40% 50% at 46% 54%,var(--sky-cyan) 0,transparent 70%),var(--sky-base)}
.v3 .hframe.stageframe .hshade{background:linear-gradient(180deg,rgba(40,14,90,0) 46%,rgba(40,14,90,.26) 72%,rgba(30,10,72,.52)),radial-gradient(70% 60% at 0% 100%,rgba(30,10,72,.42),rgba(30,10,72,0) 64%)}
.v3 .hframe.stageframe .htitle{text-shadow:0 6px 40px rgba(46,12,100,.5)}
.v3 .hframe.stageframe .stagehint{background:rgba(36,12,86,.42)}

/* ---------- Produktkarten symmetrisch (Vorlage für alle Raster): Bild, Titel, Sterne, Preis, Hinweis und Varianten stehen in ---------- */
/* ---------- jeder Reihe auf gleicher Höhe – die Zeilen teilen sich das Raster (Subgrid), fehlende Angaben lassen ihre Zeile frei ---------- */
@supports (grid-template-rows:subgrid){
 .v3 .collectiongrid,.v3 .hrailtrack.collectiongrid{row-gap:0}
 .v3 .collectiongrid>*,.v3 .collectiongrid>.offerwrap>.pcwrap,.v3 .collectiongrid .productcard{display:grid;grid-template-columns:minmax(0,1fr);grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}
 .v3 .collectiongrid>*{padding-bottom:var(--cgap,40px)}
 .v3 .hrailtrack.collectiongrid>*{padding-bottom:0}
 .v3 .collectiongrid .productcard .entry{display:contents}
 .v3 .collectiongrid .productcard>.image{grid-row:1}
 .v3 .collectiongrid .productcard .entry>b{grid-row:2;align-self:start;margin-top:14px}
 .v3 .collectiongrid .productcard .entry>.pcstars{grid-row:3;align-self:start}
 .v3 .collectiongrid .productcard .entry>span:last-child{grid-row:4;align-self:start;justify-self:start}
 .v3 .collectiongrid .productcard>.pccond{grid-row:5;align-self:start}
 .v3 .collectiongrid .productcard>small{grid-row:6;align-self:start}
 /* Größen-Container würde das gemeinsame Raster abschalten: Warenkorb-Knopf sitzt deshalb im Bildfeld (Zeile 1), die Auswahl misst das Bild (shopui.js) */
 .v3 .collectiongrid .pcwrap{container-type:normal}
 .v3 .collectiongrid .productcard>.image{align-self:start}
 .v3 .collectiongrid .pcwrap>.productcard{grid-row:1/span 6;grid-column:1}
 .v3 .collectiongrid .pcwrap>.pcadd{position:relative;grid-row:1;grid-column:1;align-self:end;justify-self:end;top:auto;right:auto;margin:0 12px 12px 0}
 @media(max-width:720px){.v3 .collectiongrid{--cgap:28px}}
}

/* ---------- Schnellkauf „… wählen“ auf der Karte: Kacheln mit Variantenbild, Name und Preis; Überfahren zeigt das Bild groß ---------- */
.v3 .pcquick.pq2{padding:12px;border-radius:22px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 box-shadow:0 30px 60px -22px rgba(43,40,120,.55),0 0 0 1px rgba(43,75,255,.1);max-height:calc(100cqw - 76px);overflow:auto;overscroll-behavior:contain}
.v3 .pq2 .pqhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.v3 .pq2 .pqhead p{margin:0;font:600 13.5px/1.15 "Inter Tight",sans-serif;color:var(--ink)}
.v3 .pq2 .pqx{display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#f1f2f8;color:#4a5164;font:400 18px/1 "Inter Tight",sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.v3 .pq2 .pqx:hover{background:#e4e7f5;transform:rotate(90deg)}
.v3 .pq2 .pqlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.v3 .pq2:not(.withimg) .pqlist{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.v3 .pq2 .pqv{position:relative;display:grid;align-content:start;gap:3px;min-width:0;padding:6px 6px 9px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1.5px #e6e8f2;
 color:var(--ink);text-align:left;font:500 12.5px/1.2 "Inter Tight",sans-serif;cursor:pointer;transition:box-shadow .2s,transform .25s var(--ease);animation:pqin .38s var(--ease) both;animation-delay:calc(var(--k) * 45ms)}
.v3 .pq2:not(.withimg) .pqv{padding:10px 12px}
.v3 .pq2 .pqv:hover:not(:disabled),.v3 .pq2 .pqv:focus-visible{outline:none;transform:translateY(-2px);box-shadow:0 0 0 2px var(--buy),0 14px 26px -14px rgba(43,75,255,.85)}
.v3 .pq2 .pqimg{position:relative;display:block;aspect-ratio:1;margin-bottom:4px;border-radius:11px;overflow:hidden;background:#f3f4f8}
.v3 .pq2 .pqimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.v3 .pq2 .pqv:hover .pqimg img{transform:scale(1.08)}
.v3 .pq2 .pqname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px}
.v3 .pq2 .pqv small{padding:0 2px;font-size:11.5px;font-weight:600;color:var(--buy)}
.v3 .pq2 .pqv:disabled{opacity:.5;cursor:not-allowed}.v3 .pq2 .pqv:disabled small{color:var(--grey)}
.v3 .pq2 .pqv::after{content:'+';position:absolute;right:9px;top:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--buygrad);color:#fff;font:700 15px/1 "Inter Tight",sans-serif;
 box-shadow:0 6px 12px -6px rgba(43,75,255,.9);opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.v3 .pq2:not(.withimg) .pqv::after{top:50%;margin-top:-11px}
.v3 .pq2 .pqv:hover:not(:disabled)::after,.v3 .pq2 .pqv:focus-visible::after{opacity:1;transform:none}
@keyframes pqin{from{opacity:0;transform:translateY(8px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.v3 .pq2 .pqv{animation:none}.v3 .pq2 .pqv:hover .pqimg img{transform:none}}

/* ---------- Varianten auf der Produktseite: mit Foto als Kacheln (wie im Schnellkauf), ohne Foto als Pillen; Auswahl blau ---------- */
.v3 .v3chips button[aria-pressed=true]{border-color:var(--buy);box-shadow:inset 0 0 0 1px var(--buy);background:#f3f6ff;color:var(--buy)}
.v3 .v3chips.v3pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-width:520px}
.v3 .v3chips.v3pics button{position:relative;display:grid;align-content:start;gap:6px;min-width:0;padding:6px 6px 9px;border:0;border-radius:18px;background:#fff;color:var(--ink);
 box-shadow:0 0 0 1.5px var(--line);text-align:left;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;transition:box-shadow .2s,transform .25s var(--ease),background .2s;animation:pqin .4s var(--ease) both;animation-delay:calc(var(--k,0) * 50ms)}
.v3 .v3chips.v3pics button:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px #b9c0d8,0 12px 22px -16px rgba(16,19,30,.5)}
.v3 .v3chips.v3pics button[aria-pressed=true]{background:#f3f6ff;color:var(--buy);box-shadow:0 0 0 2.5px var(--buy),0 16px 28px -16px rgba(43,75,255,.85)}
.v3 .v3chips.v3pics button[aria-pressed=true]::after{content:'';position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--buygrad) ;box-shadow:0 6px 12px -6px rgba(43,75,255,.9);
 -webkit-mask:none;animation:pqcheck .35s cubic-bezier(.3,1.6,.5,1) both}
.v3 .v3chips.v3pics button[aria-pressed=true]::before{content:'';position:absolute;z-index:1;right:17.5px;top:15px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
@keyframes pqcheck{from{transform:scale(.3);opacity:0}}
.v3 .v3pic{display:block;aspect-ratio:1;border-radius:13px;overflow:hidden;background:#f3f4f8}
.v3 .v3pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.v3 .v3chips.v3pics button:hover .v3pic img{transform:scale(1.07)}
.v3 .v3pname{padding:0 3px;overflow-wrap:anywhere}
.v3 .v3chips.v3pics button.sold{opacity:.5;text-decoration:none}.v3 .v3chips.v3pics button.sold .v3pname{text-decoration:line-through}
@media(prefers-reduced-motion:reduce){.v3 .v3chips.v3pics button,.v3 .v3chips.v3pics button[aria-pressed=true]::after{animation:none}}

/* ---------- Leistung: Abschnitte außerhalb des Bildschirms halten ihre Animationen an (dc18.js setzt .animoff) ---------- */
.animoff,.animoff *,.animoff *::before,.animoff *::after{animation-play-state:paused!important}

/* ---------- Leistung Kategorie-Band (gemessen bei 240 Hz: 93 → 222 Bilder/s): kein Dauer-Wackeln der 60 Bildchen und kein Dauer-Drehen ---------- */
/* ---------- der 20 Sterne im laufenden, schrägen Band – das Band selbst läuft weiter und reagiert auf die Maus, Bildchen fächern beim Überfahren ---------- */
.v3 .cbspark,.v3 .cbstack img{animation:none}

/* ---------- Fortschrittsleiste oben: farbiger Verlauf wie das Startbild (Blau → Violett → Pink → Orange), über die ganze Breite verankert, ---------- */
/* ---------- damit beim Scrollen nach und nach die Farben dazukommen; Lichtschimmer läuft durch; Kopf und erreichte Punkte nehmen die Farbe ihrer Stelle an ---------- */
.v3 .fxprog{--pc:color-mix(in oklch,#2b54ff calc((1 - var(--sp,0)) * 100%),#ff4fa3)}
.v3 .fxprogfill{overflow:hidden;background:linear-gradient(90deg,#2b54ff 0%,#5b4bff 22%,#8b4dff 42%,#d04fc4 62%,#ff54a8 78%,#ff9e45 100%) 0 0/100vw 100% no-repeat;
 box-shadow:0 0 14px color-mix(in srgb,var(--pc) 55%,transparent),0 0 2px var(--pc)}
.v3 .fxprogfill::after{content:'';position:absolute;inset:0 auto 0 0;width:180px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-200px);animation:fxprogshine 2.8s ease-in-out infinite}
@keyframes fxprogshine{to{transform:translateX(100vw)}}
.v3 .fxproghead{border-color:var(--pc);animation:none;box-shadow:0 0 0 5px color-mix(in srgb,var(--pc) 18%,transparent),0 0 18px color-mix(in srgb,var(--pc) 65%,transparent)}
.v3 .fxproghead::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pc);opacity:0;animation:fxheadring 2.4s ease-out infinite}
@keyframes fxheadring{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
.v3 .fxmark.done{border-color:color-mix(in oklch,#2b54ff calc((1 - var(--at)) * 100%),#ff4fa3);background:color-mix(in oklch,#2b54ff calc((1 - var(--at)) * 100%),#ff4fa3)}
@media(prefers-reduced-motion:reduce){.v3 .fxprogfill::after,.v3 .fxproghead::after{animation:none;opacity:0}}

/* ---------- Doppel-Band (Emin 11.11.2026: „nicht so symmetrisch, so wie vorher, ein bisschen verschoben – Höhe von Weiß und Blau bleibt gleich“):
   die Bänder liegen wieder schräg zueinander (weiß −2°, blau −0,8°) statt parallel. Damit beide über die ganze Breite gleich dick bleiben,
   deckt keines das andere ab: sie berühren sich am linken Bildrand und öffnen sich nach rechts leicht. Abstand in der Mitte = halbe Breite × tan(Winkelunterschied). ---------- */
.v3 .cbr2{rotate:-.8deg;margin-top:calc(50vw * .021)}
@media(min-width:1600px){.v3 .cbr2{rotate:-1deg;margin-top:calc(50vw * .0175)}}
@media(max-width:720px){.v3 .cbr2{rotate:-1deg;margin-top:calc(50vw * .035)}}

/* ---------- Handy ohne seitliches Scrollen (geprüft bei 375 px): lange Wörter im Produkttitel (z. B. „Katzen-Fensterhängematte“) ---------- */
/* ---------- brechen um statt die Spalte zu verbreitern; leerer Warenkorb: Kategorie-Pillen umbrechen mittig ---------- */
@media(max-width:980px){.v3 .detailLayout{grid-template-columns:minmax(0,1fr)}}
.v3 .detailLayout>*{min-width:0}
.v3 .fxsplit .fxw{max-width:100%}
.v3 h1.fxsplit{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.v3 .cdempty{min-width:0}
.v3 .cdempty .colnav{flex-wrap:wrap;justify-content:center;overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
/* DC-26 Handy-Feinschliff (Emin 11.11.2026) */
/* Set-Vergleich nebeneinander statt untereinander: einzeln → im Set in einer Reihe, „gespart“ daneben bzw. darunter */
@media(max-width:420px){
 .v3 .bc2 .bcsave{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 8px;margin-left:28px}
 .v3 .bc2 .bcold,.v3 .bc2 .bcnew{padding:5px 10px}
}
/* Kaufleiste unten: Knopf ohne den Abstand des großen Warenkorb-Knopfs → oben und unten gleich viel Luft */
.v3 .buybar .shopcta{margin:0}
/* Warenkorb auf dem Handy: mehr Platz für die Artikel – höheres Fenster, kompakte Summe, Hinweise stehen schon in Versand/Gesamt */
@media(max-width:720px){
 .v3 .cdpanel{max-height:94dvh}
 .v3 .cdfoot{padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
 .v3 .cdfoot .cdsum{font-size:13.5px;padding:2px 0}
 .v3 .cdfoot .cdsum span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .v3 .cdfoot .cdtotal{padding-top:4px}
 .v3 .cdfoot .cdnote{margin:4px 0 10px;font-size:11.5px}
 .v3 .cdfoot .cdcheckout{height:50px}
 .v3 .cdfoot .cdtrust,.v3 .cdfoot .cdmore{display:none}
}
/* DC-27 Fächer oben in der Kollektion (Emin 11.11.2026): jede Karte führt zum Produkt; gewählte Produkte oder Bestseller */
.v3 .colfan>a{display:block;cursor:pointer;transition:transform .7s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1)}
.v3 .colfan>a:focus-visible{outline:3px solid var(--buy,#2b4bff);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.v3 .colfan>a{transition:none}}
/* DC-28 Teilen mit den offiziellen Logos (Emin 11.11.2026): Knöpfe mit WhatsApp-, Facebook- und Pinterest-Zeichen in den Markenfarben; Handy: runde Logo-Knöpfe */
.v3 .sharerow .shtitle{font:600 13px/1 "Inter Tight",sans-serif;color:var(--grey);margin-right:4px}
.v3 .sharerow .sh{--bc:#1d1d1f;position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 11px;border-radius:999px;background:#fff;border:1px solid rgba(17,17,17,.13);color:var(--ink);font:500 14px/1 "Inter Tight",sans-serif;text-decoration:none;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s,box-shadow .2s,color .2s}
.v3 .sharerow .sh[hidden]{display:none}
.v3 .sharerow .sh svg{width:20px;height:20px;flex:none;fill:var(--bc)}
.v3 .sharerow .sh svg.ln{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v3 .sharerow .sh-wa{--bc:#25D366}.v3 .sharerow .sh-fb{--bc:#0866FF}.v3 .sharerow .sh-pin{--bc:#E60023}
.v3 .sharerow .sh:hover{border-color:color-mix(in srgb,var(--bc) 55%,transparent);background:color-mix(in srgb,var(--bc) 7%,#fff);transform:translateY(-1px);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--bc) 70%,transparent)}
.v3 .sharerow .sh:focus-visible{outline:2px solid var(--bc);outline-offset:2px}
.v3 .sharerow .sh.done{--bc:#15803d;border-color:#15803d;color:#15803d;background:#f0fdf4}
/* Emin 11.11.2026: symmetrisch – „Teilen“ als kleine Überschrift, darunter alle Knöpfe in EINER Reihe, gleich breit über die ganze Breite.
   Wird der Platz eng (Handy, schmale Spalte), zeigen dieselben gleich breiten Knöpfe nur noch das Logo (Name bleibt für Screenreader). */
.v3 .sharerow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;container-type:inline-size}
.v3 .sharerow .shtitle{flex:0 0 100%;margin:0 0 2px}
.v3 .sharerow .sh{flex:1 1 0;min-width:0;justify-content:center;height:42px;padding:0 5px;gap:5px;font-size:13px}
.v3 .sharerow .sh svg{width:19px;height:19px}
.v3 .sharerow .shl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container (max-width:505px){.v3 .sharerow .sh{height:46px;padding:0}.v3 .sharerow .sh svg{width:22px;height:22px}
 .v3 .sharerow .shl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.v3 .sharerow .sh{transition:none}.v3 .sharerow .sh:hover{transform:none}}
/* DC-32 Stempel neben der Kollektions-Überschrift (Emin 11.11.2026: „Handgemachte Traumfänger … es soll geil ausschauen“):
   runder weißer Stempel, Schrift im Kreis dreht sich langsam um ein kobaltblaues Herz; springt beim Laden leicht schräg hinein */
.v3 .coltitle .colstamp{position:relative;display:inline-block;vertical-align:middle;width:1.32em;height:1.32em;margin:-.5em 0 -.5em .22em;translate:0 -.2em;rotate:-9deg;filter:drop-shadow(0 .14em .26em rgba(255,45,135,.26));animation:csin .9s .5s cubic-bezier(.3,1.5,.5,1) both;pointer-events:none}
.v3 .colstamp svg{display:block;width:100%;height:100%;overflow:visible}
.v3 .colstamp .csbg{fill:#fff}
.v3 .colstamp .csdash{fill:none;stroke:rgba(255,45,135,.45);stroke-width:1.3;stroke-dasharray:2 3.2}
.v3 .colstamp text{font:700 10.6px/1 "Inter Tight",sans-serif;letter-spacing:.16em;text-transform:uppercase;fill:var(--cobalt)}
.v3 .colstamp .csring{transform-box:view-box;transform-origin:60px 60px;animation:csspin 22s linear infinite}
.v3 .colstamp .cscore{filter:drop-shadow(0 3px 7px rgba(255,45,135,.55))}
.v3 .colstamp .csheart{fill:#fff;transform-box:view-box;transform-origin:60px 61px;animation:csbeat 2.4s ease-in-out infinite;filter:drop-shadow(0 1px 2px rgba(150,0,60,.35))}
@keyframes csspin{to{transform:rotate(360deg)}}
@keyframes csbeat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(.98)}45%{transform:scale(1.08)}}
@keyframes csin{from{opacity:0;scale:.35;rotate:-50deg}}
@media(max-width:720px){.v3 .coltitle .colstamp{width:1.5em;height:1.5em}}
/* Emin 11.11.2026: Stempel nicht auf dem Strich – Stempel etwas höher, Bogen darunter etwas tiefer (nur wenn ein Stempel da ist) */
.v3 .colheadtext:has(.colstamp) .ctswoosh{margin-top:clamp(14px,1.5vw,26px)}
@media(prefers-reduced-motion:reduce){.v3 .colstamp,.v3 .colstamp .csring,.v3 .colstamp .csheart{animation:none}}
/* DC-33 Kombi-Artikel (Emin 11.11.2026: „Einzeln nur zusammen … schöner machen, was geht“): statt Warnhinweis in Beige ein positives Merkmal
   in Markenblau mit kleinem Doppel-Päckchen-Symbol; Warenkorb mit Fortschrittsbalken bis zum Versand. Regel bleibt (30 € je Bestellung). */
.v3 .kicon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v3 .kicon rect:last-of-type{fill:color-mix(in srgb,currentColor 14%,transparent)}
.v3 .pccond{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin-top:4px;padding:3px 9px 3px 7px;border-radius:999px;background:rgba(43,75,255,.08);color:#2437c9;font:600 11.5px/1.3 "Inter Tight",sans-serif;letter-spacing:.01em}
.v3 .pricecond.kombi{display:flex;align-items:flex-start;gap:8px;width:max-content;max-width:100%;margin-top:8px;padding:8px 13px 8px 10px;border-radius:14px;background:linear-gradient(100deg,rgba(43,75,255,.09),rgba(124,77,255,.07));border:1px solid rgba(43,75,255,.16);color:#22306e;font-size:13px;line-height:1.4;font-weight:500}
.v3 .pricecond.kombi .kicon{color:var(--cobalt);margin-top:1px}
.v3 .pricecond.kombi b{color:#1d2fb8;font-weight:700}
.v3 .combonote{display:flex;gap:8px;align-items:flex-start;background:rgba(43,75,255,.06);border-color:rgba(43,75,255,.16);color:#22306e}
.v3 .combonote .kicon{color:var(--cobalt);margin-top:2px}
.v3 .bckombi{display:inline-flex;align-items:center;gap:5px;color:#2b3fb8}
.v3 .bckombi .kicon{color:var(--cobalt)}
.v3 .cdcond{display:inline-flex !important;align-items:center;gap:4px;margin-top:3px;padding:2px 8px 2px 6px;border-radius:999px;background:rgba(43,75,255,.08);color:#2437c9 !important;font:600 11px/1.3 "Inter Tight",sans-serif}
.v3 .cdcombo{background:linear-gradient(120deg,#f3f5ff,#f7f1ff);border:1px solid rgba(43,75,255,.16)}
.v3 .cdcombo>p{color:#2a3466}
.v3 .cdcombo .cdctitle{display:flex;align-items:center;gap:7px;margin-bottom:2px;color:#1d2fb8;font-size:14.5px}
.v3 .cdcombo .cdctitle .kicon{color:var(--cobalt);width:1.25em;height:1.25em}
.v3 .cdcombo .setoffers{background:#fff;border-color:rgba(43,75,255,.14)}
.v3 .cdcbar{position:relative;height:8px;margin:10px 0 4px;border-radius:999px;background:rgba(43,75,255,.12);overflow:hidden}
.v3 .cdcbar i{position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:inherit;background:linear-gradient(90deg,#2b4bff,#7c4dff,#ff4fa3);animation:cdcgrow 1s cubic-bezier(.3,.7,.2,1) both}
.v3 .cdcbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:cdcshine 2.4s 1s ease-in-out infinite}
@keyframes cdcgrow{from{width:0}}
@keyframes cdcshine{60%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.v3 .cdcbar i,.v3 .cdcbar i::after{animation:none}}
/* Unterlängen und Überhänge nie abschneiden – ALLE Wort-/Zeilen-Masken im Shop (Emin 11.11.2026: „g und e werden gecuttet … auf alles anwenden“):
   genug Luft unten (g, p, q, y, j) und rechts (e, f, r bei enger Laufweite); Startversatz so groß, dass vor dem Einblenden nichts hervorschaut */
.v3 .ctw{padding:.06em .12em .3em .04em;margin:-.06em -.12em -.3em -.04em}
.v3 .ctw>span{transform:translateY(140%)}
/* Ursache des Rest-Schnitts (Emin 11.11.2026, 2. Meldung): die Wörter glänzen per Hintergrund-Verlauf (background-clip:text) – der wird nur
   im Kasten des Worts gemalt, Unterlängen und Überhänge außerhalb blieben unsichtbar. Kasten unsichtbar vergrößert (Innenabstand,
   gleich großer negativer Außenabstand), Layout bleibt gleich. Gilt für jeden Text mit diesem Effekt. */
.v3 .ctw>span{padding:.1em .12em .3em 0;margin:-.1em -.12em -.3em 0}
.v3 .cbword,.v3 .hfact b,.v3 .htcard.tc1 .htnum{padding:.1em .12em .3em 0;margin:-.1em -.12em -.3em 0}
.v3 .hword,.v3 .fxsplit .fxw{padding:0 .12em .3em 0;margin:0 -.12em -.3em 0}
.v3 .hero3 h1 .ln{padding:0 .12em .3em 0;margin:0 -.12em -.26em 0}
.v3 .stagetitle .ln{padding:0 .12em .3em 0;margin:0 -.12em -.24em 0}
@media(prefers-reduced-motion:reduce){.v3 .ctw>span{transform:none}}
/* Karten-Fächer in echtem 3D (Emin 11.11.2026: „Karten sollen ganz bleiben … den Switch soll man sehen, nicht so einen ekligen Cut“):
   jede Karte liegt in eigener Tiefe und ist minimal gekippt. Statt einer Ebenen-Nummer, die schlagartig umspringt, fährt die gezeigte Karte
   nach vorn und schiebt sich sichtbar durch die Nachbarn – die Schnittkante wandert weich über die Karte, danach liegt sie ganz vorn.
   (z-index gilt im 3D-Raum nicht; die Tiefe entscheidet.) */
.v3 .colfan{perspective:1600px;transform-style:preserve-3d;transition:translate .7s cubic-bezier(.2,.8,.2,1)}
.v3 .colfan>*:nth-child(1){transform:translate(-86%,16px) rotate(-14deg) rotateY(20deg) translateZ(0)}
.v3 .colfan>*:nth-child(2){transform:translate(-29%,-6px) rotate(-5deg) rotateY(15deg) translateZ(40px)}
.v3 .colfan>*:nth-child(3){transform:translate(29%,-6px) rotate(5deg) rotateY(-15deg) translateZ(80px)}
.v3 .colfan>*:nth-child(4){transform:translate(86%,16px) rotate(14deg) rotateY(-20deg) translateZ(40px)}
.v3 .colfan>*:nth-child(3):last-child{transform:translate(70%,12px) rotate(11deg) rotateY(-12deg) translateZ(40px)}
.v3 .colfan>*:nth-child(1):nth-last-child(3){transform:translate(-70%,12px) rotate(-11deg) rotateY(12deg) translateZ(40px)}
.v3 .colfan>*:nth-child(2):nth-last-child(2){transform:translate(0,-10px) rotate(0) rotateY(0) translateZ(80px)}
@media(hover:hover){
 .v3 .colhead:hover .colfan>*:nth-child(1){transform:translate(-100%,22px) rotate(-18deg) rotateY(20deg) translateZ(0)}
 .v3 .colhead:hover .colfan>*:nth-child(2){transform:translate(-38%,-14px) rotate(-7deg) rotateY(15deg) translateZ(40px)}
 .v3 .colhead:hover .colfan>*:nth-child(3){transform:translate(38%,-14px) rotate(7deg) rotateY(-15deg) translateZ(80px)}
 .v3 .colhead:hover .colfan>*:nth-child(4){transform:translate(100%,22px) rotate(18deg) rotateY(-20deg) translateZ(40px)}
 .v3 .colhead:hover .colfan>*:nth-child(3):last-child{transform:translate(84%,18px) rotate(15deg) rotateY(-12deg) translateZ(40px)}
 .v3 .colhead:hover .colfan>*:nth-child(1):nth-last-child(3){transform:translate(-84%,18px) rotate(-15deg) rotateY(12deg) translateZ(40px)}}
.v3 .colfan>a{transition:transform .7s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.5,0,.25,1),scale .6s cubic-bezier(.45,0,.25,1),box-shadow .6s}
.v3 .colfan>a:hover,.v3 .colfan>a:focus-visible{translate:0 -10px 120px;scale:.96;box-shadow:0 40px 70px -26px rgba(16,19,30,.55)}
@media(min-width:1500px) and (hover:hover){.v3 .colhead:hover .colfan{translate:28px 0}}
@media(prefers-reduced-motion:reduce){.v3 .colfan>a,.v3 .colfan>a:hover{transition:none}}
/* DC-35 Produktkarten neu geordnet (Emin 11.11.2026: „Preis zuerst, dann Sterne, dann der Rest … keine Riesenlücke“):
   Bild · Preis (mit „ab“ bei unterschiedlichen Varianten, Sets mit echter Ersparnis) · Sterne · Titel · Fußzeile mit allen kleinen Angaben.
   Fünf gemeinsame Zeilen je Reihe; fehlende Angaben teilen sich die Fußzeile – es bleibt keine leere Zeile. */
@supports (grid-template-rows:subgrid){
 .v3 .collectiongrid>*,.v3 .collectiongrid>.offerwrap>.pcwrap,.v3 .collectiongrid .productcard{grid-row:span 5}
 .v3 .collectiongrid .pcwrap>.productcard{grid-row:1/span 5}
 .v3 .collectiongrid .productcard .entry>span.pcprice{grid-row:2;align-self:start;justify-self:stretch}
 .v3 .collectiongrid .productcard .entry>span.pcstars{grid-row:3;align-self:start}
 .v3 .collectiongrid .productcard .entry>b.pctitle{grid-row:4;align-self:start;margin-top:7px}
 .v3 .collectiongrid .productcard>.pcmeta{grid-row:5;align-self:start}
}
.v3 .productcard .entry .pcprice{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin-top:14px;font:600 20px/1.15 "Inter Tight",sans-serif;letter-spacing:-.015em;color:var(--ink)}
.v3 .productcard .entry .pcprice small{font-size:13px;font-weight:500;color:var(--grey);letter-spacing:0;margin-right:-5px}
.v3 .productcard .pcsave{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:linear-gradient(100deg,#e7f8ef,#eefbf4);color:#11804a;font:600 11.5px/1 "Inter Tight",sans-serif;font-style:normal;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(17,128,74,.14)}
.v3 .productcard .entry .pcstars{margin-top:5px}
.v3 .productcard .entry .pctitle{margin-top:7px;font-size:15px;font-weight:500;line-height:1.35;color:#2a2f3b}
.v3 .productcard .pcmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.v3 .productcard .pcmeta .pccond{margin-top:0}
.v3 .productcard .pcmeta small{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:rgba(20,24,40,.05);color:#5b6170;font:500 11.5px/1.3 "Inter Tight",sans-serif}
@media(max-width:720px){.v3 .productcard .entry .pcprice{font-size:17px;margin-top:10px}.v3 .productcard .entry .pctitle{font-size:13.5px}.v3 .productcard .pcsave{font-size:10.5px;padding:3px 7px}}
/* DC-36 Auswahllisten im Shop-Stil (statt System-Liste): Glas-Karte mit runden Ecken, Einträge als weiche Pillen, gewählter mit Häkchen;
   öffnet weich unter (oder über) dem Feld, Pfeil im Sortier-Knopf dreht sich mit */
.v3 .csellist{position:fixed;z-index:3000;margin:0;padding:6px;list-style:none;border-radius:20px;max-height:min(60vh,420px);overflow:auto;
 background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
 box-shadow:0 28px 60px -24px rgba(16,19,30,.38),0 0 0 1px rgba(43,75,255,.10);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
 transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1);outline:none}
.v3 .csellist.up{transform-origin:bottom right;transform:translateY(8px) scale(.97)}
.v3 .csellist.on{opacity:1;transform:none}
.v3 .csellist li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 38px 11px 14px;border-radius:14px;
 font:500 14.5px/1.2 "Inter Tight",sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.v3 .csellist li.act{background:linear-gradient(100deg,rgba(43,75,255,.09),rgba(124,77,255,.07))}
.v3 .csellist li[aria-selected=true]{color:var(--cobalt);font-weight:600}
.v3 .csellist li[aria-selected=true]::after{content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--cobalt);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.v3 .csellist li[aria-disabled=true]{opacity:.45;cursor:default}
.v3 .cselhost svg{transition:rotate .25s cubic-bezier(.2,.8,.2,1)}
.v3 .cselhost.cselopen svg{rotate:180deg}
.v3 .sortpill.cselopen{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(43,75,255,.12),0 10px 30px -18px rgba(16,19,30,.25)}
@media(prefers-reduced-motion:reduce){.v3 .csellist{transition:none}}
/* DC-37 Kopfzeile „Himmelsbahn“: gleitende Glas-Pille mit langsam wanderndem Markenverlauf am Rand (statt Unterstrich) */
@property --navang{syntax:'<angle>';inherits:false;initial-value:0deg}
.v3 .shopbar nav.glide{position:relative}
.v3 .navglide{position:absolute;left:0;top:0;width:var(--w,0);height:var(--h,36px);transform:translate(var(--x,0),var(--y,0));border-radius:999px;opacity:0;pointer-events:none;z-index:0;
 border:1.5px solid transparent;background:linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.96)) padding-box,conic-gradient(from var(--navang),#2b4bff,#7c4dff,#ff4fa3,#ffb547,#38c6ff,#2b4bff) border-box;
 box-shadow:0 10px 24px -14px rgba(43,75,255,.55),0 2px 6px -3px rgba(124,77,255,.25);
 transition:transform .55s cubic-bezier(.3,1.3,.4,1),width .55s cubic-bezier(.3,1.3,.4,1),height .3s,opacity .3s;animation:navspin 7s linear infinite}
.v3 .navglide.on{opacity:1}
.v3 .navglide.instant{transition:none}
@keyframes navspin{to{--navang:360deg}}
.v3 .shopbar nav.glide a{position:relative;z-index:1;transition:color .3s}
.v3 .shopbar nav.glide a::after{display:none}
.v3 .shopbar nav.glide a.glided,.v3 .shopbar nav.glide a[aria-current]{color:var(--cobalt)}
@media(prefers-reduced-motion:reduce){.v3 .navglide{transition:opacity .2s;animation:none}}
/* DC-38 Himmelsbote: Chat-Wölkchen unten rechts (schwebt sanft, Gesicht, pinke Bäckchen), Sprechblase einmal je Besuch,
   Chatfenster als Glas-Karte mit Himmelsverlauf im Kopf. Weicht Kaufleiste (Handy) und Cookie-Hinweis aus. */
.v3 .hb{position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + env(safe-area-inset-bottom));z-index:900;font-family:"Inter Tight",sans-serif}
.v3 .hbcloud{display:block;width:84px;height:58px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 14px 22px rgba(43,75,255,.28)) drop-shadow(0 2px 4px rgba(16,19,30,.12));animation:hbfloat 4.2s ease-in-out infinite;transition:scale .3s cubic-bezier(.3,1.5,.5,1)}
.v3 .hbcloud:hover{scale:1.08}
.v3 .hbcloud:focus-visible{outline:3px solid var(--cobalt);outline-offset:4px;border-radius:24px}
.v3 .hbsvg{display:block;width:100%;height:100%;overflow:visible}
.v3 .hbbody{stroke:rgba(43,75,255,.16);stroke-width:1.2}
.v3 .hbeye{fill:#262b3a;transform-box:fill-box;transform-origin:center;animation:hbblink 5.5s infinite}
.v3 .hbsmile{fill:none;stroke:#262b3a;stroke-width:2.4;stroke-linecap:round}
.v3 .hbcheek{fill:#ff6fae;opacity:.55}
.v3 .hbspark{fill:#ffb547;transform-box:fill-box;transform-origin:center;animation:hbspark 2.6s ease-in-out infinite}
.v3 .hb.open .hbcloud{animation-play-state:paused}
@keyframes hbfloat{50%{translate:0 -6px}}
@keyframes hbblink{0%,92%,100%{scale:1 1}95%{scale:1 .1}}
@keyframes hbspark{50%{scale:.55;opacity:.5}}
.v3 .hbtip{position:absolute;right:6px;bottom:72px;width:max-content;max-width:min(250px,calc(100vw - 40px));margin:0;padding:12px 34px 12px 14px;border-radius:18px 18px 6px 18px;background:#fff;color:#2a2f3b;font-size:13.5px;line-height:1.4;box-shadow:0 18px 40px -18px rgba(16,19,30,.4),0 0 0 1px rgba(43,75,255,.1);cursor:pointer;opacity:0;translate:0 8px;scale:.96;transform-origin:bottom right;transition:opacity .3s,translate .4s cubic-bezier(.3,1.4,.5,1),scale .4s cubic-bezier(.3,1.4,.5,1)}
.v3 .hbtip.on{opacity:1;translate:0 0;scale:1}
.v3 .hbtip b{color:var(--cobalt)}
.v3 .hbtipx{position:absolute;top:6px;right:8px;width:22px;height:22px;border:0;border-radius:50%;background:none;color:#8a90a0;font-size:16px;line-height:1;cursor:pointer}
.v3 .hbtipx:hover{background:rgba(20,24,40,.06);color:var(--ink)}
.v3 .hbpanel{position:absolute;right:0;bottom:74px;display:flex;flex-direction:column;width:min(380px,calc(100vw - 28px));height:min(580px,calc(100dvh - 120px));border-radius:26px;overflow:hidden;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 40px 90px -30px rgba(16,19,30,.45),0 0 0 1px rgba(43,75,255,.1);opacity:0;translate:0 14px;scale:.96;transform-origin:bottom right;transition:opacity .25s,translate .35s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1)}
.v3 .hbpanel.on{opacity:1;translate:0 0;scale:1}
.v3 .hbhead{display:flex;align-items:center;gap:12px;padding:16px 14px 16px 16px;color:#fff;background:linear-gradient(120deg,#2b4bff,#7c4dff 58%,#ff4fa3)}
.v3 .hbav{flex:none;width:52px;height:36px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.v3 .hbav .hbsvg{animation:hbfloat 4.2s ease-in-out infinite}
.v3 .hbht{flex:1;min-width:0;display:grid;gap:2px}
.v3 .hbht b{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.v3 .hbht small{font-size:12px;opacity:.88}
.v3 .hbclose{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .2s}
.v3 .hbclose:hover{background:rgba(255,255,255,.3)}
.v3 .hbclose svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.v3 .hblog{flex:1;overflow:auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth}
.v3 .hbmsg{max-width:86%;padding:10px 13px;border-radius:18px;font-size:14px;line-height:1.45;opacity:0;translate:0 6px;transition:opacity .25s,translate .3s cubic-bezier(.2,.8,.2,1)}
.v3 .hbmsg.on{opacity:1;translate:0 0}
.v3 .hbmsg.bot{align-self:flex-start;background:#f1f3fc;color:#252a37;border-bottom-left-radius:6px}
.v3 .hbmsg.me{align-self:flex-end;background:linear-gradient(120deg,#2b4bff,#5a4dff);color:#fff;border-bottom-right-radius:6px}
.v3 .hbmsg a{color:var(--cobalt);font-weight:600}
.v3 .hbmsg .hbcode{padding:1px 7px;border-radius:7px;background:#fff;color:#c2185b;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(194,24,91,.25)}
.v3 .hbdots{display:inline-flex;gap:4px;padding:3px 0}
.v3 .hbdots i{width:7px;height:7px;border-radius:50%;background:#9aa3c0;animation:hbdot 1s ease-in-out infinite}
.v3 .hbdots i:nth-child(2){animation-delay:.15s}
.v3 .hbdots i:nth-child(3){animation-delay:.3s}
@keyframes hbdot{50%{translate:0 -4px;background:#5a6bff}}
.v3 .hbitems{display:grid;gap:6px;margin-top:8px}
.v3 .hbitem{display:flex;align-items:center;gap:10px;padding:6px;border-radius:14px;background:#fff;text-decoration:none!important;color:var(--ink)!important;box-shadow:0 0 0 1px rgba(43,75,255,.1);transition:box-shadow .2s,translate .2s}
.v3 .hbitem:hover{box-shadow:0 0 0 1.5px rgba(43,75,255,.4);translate:0 -1px}
.v3 .hbitem img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;background:#eef0f6}
.v3 .hbitem span{display:grid;gap:2px;min-width:0}
.v3 .hbitem b{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v3 .hbitem small{font-size:12.5px;color:var(--cobalt);font-weight:600}
.v3 .hball{display:inline-block;margin-top:8px;font-size:13px}
.v3 .hbsug{border:0;background:none;padding:0;color:var(--cobalt);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.v3 .hbchips{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;scrollbar-width:none}
.v3 .hbchips::-webkit-scrollbar{display:none}
.v3 .hbchips button{flex:none;padding:7px 12px;border-radius:999px;border:1px solid rgba(43,75,255,.25);background:#fff;color:#2437c9;font:500 12.5px/1 "Inter Tight",sans-serif;cursor:pointer;transition:background-color .2s,border-color .2s}
.v3 .hbchips button:hover{background:rgba(43,75,255,.07);border-color:rgba(43,75,255,.5)}
.v3 .hbform{display:flex;gap:8px;padding:8px 12px 14px}
.v3 .hbform input{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(20,24,40,.1);background:#fff;font:400 14.5px "Inter Tight",sans-serif;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.v3 .hbform input:focus{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(43,75,255,.12)}
.v3 .hbform button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:linear-gradient(120deg,#2b4bff,#7c4dff);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 20px -10px rgba(43,75,255,.8);transition:scale .2s}
.v3 .hbform button:hover{scale:1.06}
.v3 .hbform button svg{width:18px;height:18px;fill:currentColor}
.v3:has(.consentbar:not([hidden])) .hb{display:none}
@media(max-width:720px){.v3 .hbform input{font-size:16px}.v3 .hbcloud{width:66px;height:46px}.v3 .hbtip{bottom:58px}.v3 .hbpanel{bottom:60px;height:min(560px,calc(100dvh - 96px))}.v3:has(.buybar) .hb{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.v3 .hbcloud,.v3 .hbav .hbsvg,.v3 .hbeye,.v3 .hbspark,.v3 .hbdots i{animation:none}.v3 .hbpanel,.v3 .hbtip,.v3 .hbmsg{transition:opacity .2s}}
/* Nachtauftrag 12.11.2026 B3 – Begrüßung des Himmelsboten: Hand winkt, „POW!“, Sprechblase tippt, Mund redet, Rauchwölkchen (himmelsbote.js).
   Nur transform/opacity. Hand/Mund nur am Wölkchen unten rechts, nicht im Chat-Kopf. */
.v3 .hbhand,.v3 .hbhandin{transform-box:fill-box;transform-origin:50% 100%}
.v3 .hb.wave .hbcloud .hbspark{opacity:0;transition:opacity .2s}
.v3 .hbhand{opacity:0;transform:scale(0)}
.v3 .hbhandin>*{stroke:rgba(43,75,255,.3);stroke-width:1.1}
.v3 .hb.wave .hbcloud .hbhand{animation:hbhandup .28s cubic-bezier(.3,1.6,.5,1) forwards}
.v3 .hb.wave .hbcloud .hbhandin{animation:hbwave .42s ease-in-out .22s 3 alternate}
.v3 .hb.pow .hbcloud .hbhand{animation:hbhandgone .14s ease-in forwards}
@keyframes hbhandup{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes hbwave{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@keyframes hbhandgone{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}
.v3 .hbmouth{opacity:0;transform-box:view-box;transform-origin:47px 44.8px}
.v3 .hbmouth ellipse{fill:#262b3a}.v3 .hbmouth .hbtongue{fill:#ff6fae}
.v3 .hb.talk .hbcloud .hbmouth{opacity:1;animation:hbtalk .15s ease-in-out infinite alternate}
.v3 .hb.talk .hbcloud .hbsmile{opacity:0}
@keyframes hbtalk{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.v3 .hbpow{position:absolute;right:-16px;top:-26px;z-index:3;display:grid;place-items:center;width:68px;height:54px;pointer-events:none;opacity:0;transform:scale(0)}
.v3 .hbpow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v3 .hbpow path{fill:#ffd84a;stroke:#ff4fa3;stroke-width:2.4;stroke-linejoin:round}
.v3 .hbpow b{position:relative;font:italic 900 14px/1 "Inter Tight",sans-serif;letter-spacing:-.02em;color:#2b2fd6;transform:rotate(-8deg);text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff}
.v3 .hb.pow .hbpow{animation:hbpow .82s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes hbpow{0%{opacity:0;transform:scale(0) rotate(-26deg)}28%{opacity:1;transform:scale(1.18) rotate(-4deg)}42%{transform:scale(1) rotate(-8deg)}78%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(1.3) rotate(-2deg)}}
.v3 .hbsay{position:absolute;right:0;bottom:calc(100% + 14px);z-index:2;box-sizing:border-box;width:max-content;max-width:min(272px,calc(100vw - 36px));margin:0;padding:12px 15px 11px;border-radius:20px 20px 6px 20px;background:#fff;color:#262b3a;font:500 14.5px/1.42 "Inter Tight",sans-serif;letter-spacing:-.005em;box-shadow:0 20px 44px -18px rgba(43,75,255,.45),0 2px 8px rgba(16,19,30,.08);transform-origin:90% 100%;opacity:0;transform:scale(.3);pointer-events:none}
.v3 .hbsay::after{content:"";position:absolute;right:20px;bottom:-6px;width:14px;height:14px;border-radius:3px;background:#fff;transform:rotate(45deg)}
.v3 .hbsay.on{opacity:1;transform:none;transition:opacity .18s ease,transform .42s cubic-bezier(.3,1.6,.5,1)}
.v3 .hbsay.poof{opacity:0;transform:scale(.86);transition:opacity .3s ease,transform .38s ease}
.v3 .hbsay.measure{visibility:hidden;transition:none;transform:none}
.v3 .hbsay--side{right:calc(100% + 12px);bottom:2px;transform-origin:100% 75%;border-radius:20px 6px 20px 20px}
.v3 .hbsay--side::after{right:-5px;bottom:auto;top:14px}
.v3 .hbsaytxt{position:relative;margin:0}
.v3 .hbsay .hbcode{color:var(--cobalt,#2b4bff);font-weight:750;letter-spacing:.02em}
.v3 .hbcaret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;border-radius:1px;background:var(--cobalt,#2b4bff);animation:hbcaret .7s steps(1) infinite}
@keyframes hbcaret{50%{opacity:0}}
.v3 .hbsaychat{display:inline-flex;margin-top:8px;padding:6px 12px;border:0;border-radius:999px;background:#eef1ff;color:var(--cobalt,#2b4bff);font:600 12.5px/1.2 "Inter Tight",sans-serif;cursor:pointer;pointer-events:auto;visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s,background-color .2s}
.v3 .hbsay.done .hbsaychat{visibility:visible;opacity:1;transform:none}
.v3 .hbsaychat:hover{background:#e2e7ff}
.v3 .hbsaychat:focus-visible{outline:2px solid var(--cobalt,#2b4bff);outline-offset:2px}
.v3 .hbpuff{position:absolute;z-index:2;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 38% 34%,#fff 0,#f4f6fd 44%,rgba(216,223,245,.8) 62%,rgba(216,223,245,0) 72%);opacity:0;animation:hbpuff .9s cubic-bezier(.2,.7,.3,1) var(--d,0s) forwards}
@keyframes hbpuff{0%{opacity:0;transform:translate(0,0) scale(.3)}18%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.7)}}
@media(max-width:720px){.v3 .hbpow{width:56px;height:45px;right:-10px;top:-22px}.v3 .hbpow b{font-size:12px}.v3 .hbsay{bottom:calc(100% + 10px);font-size:14px}}
@media(prefers-reduced-motion:reduce){.v3 .hbhand,.v3 .hbpow,.v3 .hbmouth,.v3 .hbcaret{display:none}.v3 .hbsay,.v3 .hbsay.on,.v3 .hbsay.poof{transform:none;transition:opacity .3s}}

/* ---------- Traumfänger-Karten (Emin 12.11.2026): Emblem „Handgemacht · Unikat“ rechts unten im Bild – gleich groß und gleich weit vom Rand
   wie das Herz oben rechts, Schrift dreht sich, Herz schlägt; darunter „Handgemachte Traumfänger“ statt grauem Wort; der Schnellkauf-Knopf
   rückt bei Traumfängern nach links unten, damit nichts übereinander liegt. ---------- */
.v3 .pcstamp{position:absolute;right:12px;bottom:12px;z-index:3;width:44px;height:44px;border-radius:50%;pointer-events:none;
 filter:drop-shadow(0 6px 12px rgba(255,45,135,.32)) drop-shadow(0 1px 2px rgba(20,10,40,.18));animation:psIn .8s .35s cubic-bezier(.3,1.5,.5,1) both}
.v3 .pcstamp svg{display:block;width:100%;height:100%;overflow:visible}
.v3 .pcstamp .psbg{fill:rgba(255,255,255,.94)}
.v3 .pcstamp text{font:800 15.5px/1 "Inter Tight",sans-serif;letter-spacing:.06em;text-transform:uppercase;fill:#2b3ad8}
.v3 .pcstamp .psring{transform-box:view-box;transform-origin:60px 60px;animation:csspin 16s linear infinite}
.v3 .pcstamp .pscore{filter:drop-shadow(0 2px 5px rgba(255,45,135,.55))}
.v3 .pcstamp .psheart{fill:#fff;transform-box:view-box;transform-origin:60px 61px;animation:csbeat 2.4s ease-in-out infinite}
.v3 .pcwrap:hover .pcstamp .psring{animation-duration:6s}
@keyframes psIn{from{opacity:0;scale:.4;rotate:-60deg}}
.v3 .pcwrap.is-dream .pcadd{right:auto;left:12px}
.v3 .collectiongrid .pcwrap.is-dream>.pcadd{justify-self:start;margin:0 0 12px 12px}
.v3 .productcard .pcmeta .pcdream{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;font:700 11.5px/1.2 "Inter Tight",sans-serif;font-style:normal;letter-spacing:.01em;
 color:#c2186b;background:linear-gradient(120deg,rgba(255,45,135,.12),rgba(124,77,255,.12));box-shadow:inset 0 0 0 1px rgba(255,45,135,.22)}
.v3 .productcard .pcmeta .pcdream svg{width:13px;height:13px;fill:#ff2d87;animation:csbeat 2.4s ease-in-out infinite;transform-origin:50% 55%}
@media(prefers-reduced-motion:reduce){.v3 .pcstamp,.v3 .pcstamp .psring,.v3 .pcstamp .psheart,.v3 .productcard .pcmeta .pcdream svg{animation:none}}

/* „Du sparst …“ mit süßem Smiley (Emin 12.11.2026): schräg daneben, rote Bäckchen, lachende Augen; wippt ab und zu fröhlich */
.v3 .productcard .pcsave .pcsmile{display:inline-block;flex:none;width:15px;height:15px;margin:-3px -2px -3px 5px;rotate:-16deg;transform-origin:50% 60%;
 filter:drop-shadow(0 2px 3px rgba(214,150,0,.35));animation:pcSmile 3.6s ease-in-out 1.2s infinite}
.v3 .productcard .pcsave .pcsmile svg{display:block;width:100%;height:100%;overflow:visible}
.v3 .productcard .pcsave .pcsmile .sf{fill:#ffd447;stroke:#f0a800;stroke-width:1.1}
.v3 .productcard .pcsave .pcsmile .sc{fill:#ff8fa8;opacity:.75}
.v3 .productcard .pcsave .pcsmile .se,.v3 .productcard .pcsave .pcsmile .sm{fill:none;stroke:#6b4300;stroke-width:1.45;stroke-linecap:round}
.v3 .productcard:hover .pcsave .pcsmile{animation-duration:1.2s}
@keyframes pcSmile{0%,62%,100%{transform:none}70%{transform:translateY(-2px) rotate(12deg) scale(1.12)}78%{transform:rotate(-8deg)}86%{transform:translateY(-1px) rotate(6deg)}93%{transform:none}}
@media(max-width:720px){.v3 .productcard .pcsave .pcsmile{width:13px;height:13px;margin-left:4px}}
@media(prefers-reduced-motion:reduce){.v3 .productcard .pcsave .pcsmile{animation:none}}