/* Optional outer hero background; the independent .scene stays untouched. */
.bbk-mailing[data-background="none"] .hero{background-image:none}
.bbk-mailing[data-background="image"] .hero{background-image:var(--bbk-mailing-image);background-position:var(--bbk-mailing-desktop);background-size:cover;background-repeat:no-repeat}
@media(max-width:620px){.bbk-mailing[data-background="image"] .hero{background-position:var(--bbk-mailing-mobile)}}

/* Independent inner hero scene; default retains the existing fir-room motif. */
.bbk-mailing .scene[data-scene="none"]{background-image:none}
.bbk-mailing .scene[data-scene="image"]{background-image:var(--bbk-scene-image);background-position:var(--bbk-scene-desktop);background-size:cover}
@media(max-width:620px){.bbk-mailing .scene[data-scene="image"]{background-position:var(--bbk-scene-mobile)}}

/* Composition is opt-in; legacy markup and its native hover transform stay intact. */
.bbk-mailing .scene[data-composition]{
 --bbk-scene-x:var(--bbk-scene-x-d,0%);--bbk-scene-y:var(--bbk-scene-y-d,0%);--bbk-scene-scale:var(--bbk-scene-scale-d,1);--bbk-scene-rotation:var(--bbk-scene-rotation-d,0deg);
 --bbk-cover-x:var(--bbk-cover-x-d,0%);--bbk-cover-y:var(--bbk-cover-y-d,0%);--bbk-cover-scale:var(--bbk-cover-scale-d,1);--bbk-cover-rotation:var(--bbk-cover-rotation-d,6deg);
 --bbk-scene-art-image:url(assets/tannenzweige-pink-wohnraum.webp);
 position:relative;isolation:isolate;overflow:hidden;background-color:transparent;background-image:none
}
.bbk-mailing .scene[data-composition][data-scene="image"]{--bbk-scene-art-image:var(--bbk-scene-image)}
.bbk-mailing .scene[data-composition][data-scene="none"]{--bbk-scene-art-image:none}
.bbk-mailing .scene[data-composition]>.bbk-scene-art{
 position:absolute;inset:0;pointer-events:none;
 background-image:inherit;background-position:inherit;background-size:inherit;background-repeat:inherit;
 /* The parent no longer paints the image; keep its source in an inherited variable. */
 background-image:var(--bbk-scene-art-image);
 transform:translate(var(--bbk-scene-x),var(--bbk-scene-y)) rotate(var(--bbk-scene-rotation)) scale(var(--bbk-scene-scale))
}
.bbk-mailing .scene[data-composition]>.book,
.bbk-mailing .scene[data-composition]>.book:hover{
 position:relative;z-index:1;
 transform:translate(var(--bbk-cover-x),var(--bbk-cover-y)) rotateY(-16deg) rotate(var(--bbk-cover-rotation)) scale(var(--bbk-cover-scale))
}
.bbk-mailing .scene[data-composition]>.scene-note{z-index:2}
@media(max-width:620px){
 .bbk-mailing .scene[data-composition]{
  --bbk-scene-x:var(--bbk-scene-x-m,0%);--bbk-scene-y:var(--bbk-scene-y-m,0%);--bbk-scene-scale:var(--bbk-scene-scale-m,1);--bbk-scene-rotation:var(--bbk-scene-rotation-m,0deg);
  --bbk-cover-x:var(--bbk-cover-x-m,0%);--bbk-cover-y:var(--bbk-cover-y-m,0%);--bbk-cover-scale:var(--bbk-cover-scale-m,1);--bbk-cover-rotation:var(--bbk-cover-rotation-m,6deg)
 }
}