/* ROX BEAUTY – 17.10.2026: Pflanzen-Deko (rox-flora.js), echter Pinselstrich, drehende Sterne an den Überschriften */

/* ---------- Pflanzen ---------- */
/* über dem Inhalt der Sektion (vorher z-index:-1, dann lagen sie unter Fotos und Karten);
   Sektionen mit Pflanze ohne content-visibility, sonst schneidet die Paint-Containment
   den Zweig an der Sektionsgrenze ab (17.10.2026) */
.bt{position:absolute;z-index:4;pointer-events:none;animation:bt-in 1.6s cubic-bezier(.2,.7,.2,1) both}
.bt-host{content-visibility:visible!important}
/* nur während des Messens (rox-flora.js): Pflanze noch ohne Einblenden, Inhalt ohne Einblend-Verschiebung */
.bt-wait{animation:none!important}
.bt-meas [data-rv]{transform:none!important;transition-property:opacity!important}
.bt svg{display:block;width:100%;height:100%;overflow:visible}
.bt--m svg{transform:scaleX(-1)}
.bt--g{transform-origin:50% 100%}
.bt--b{transform-origin:0 40%}
.bt--b.bt--m{transform-origin:100% 40%}
@keyframes bt-in{from{opacity:0;transform:scale(.9) translateY(10px)}}

/* ---------- Pinselstrich hinter "Ihre Haut. Ihre Routine." (Maske: tools/pinselstrich.py) ---------- */
.rb-brush{padding:13px 40px 15px}
.rb-brush::before{inset:-10px -84px -12px -22px;background:var(--rb-mauve);-webkit-mask:url("img/deko/pinselstrich.webp") center/100% 100% no-repeat;mask:url("img/deko/pinselstrich.webp") center/100% 100% no-repeat;transform:none;clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.6,.05,.25,1)}
.rb-js .rb-brush[data-rv]::before{transform:none;clip-path:inset(0 100% 0 0)}
.rb-js .rb-brush[data-rv].is-in::before{transform:none;clip-path:inset(0 0 0 0)}

/* ---------- Überschriften mit Stern links/rechts: größer, drehen sich gegenläufig ---------- */
.rb-eyebrow{gap:14px;font-size:clamp(.82rem,.78rem + .2vw,.92rem);letter-spacing:.2em}
.rb-eyebrow svg{width:24px;height:24px;fill:rgba(234,214,179,.5);animation:rb-spin 9s linear infinite}
.rb-eyebrow svg:last-of-type:not(:first-of-type){animation:rb-spin-l 6.5s linear infinite}
@keyframes rb-spin{to{transform:rotate(360deg)}}
@keyframes rb-spin-l{to{transform:rotate(-360deg)}}
@media (max-width:480px){.rb-eyebrow{gap:10px;letter-spacing:.16em}.rb-eyebrow svg{width:20px;height:20px}}

@media (prefers-reduced-motion:reduce){.bt,.rb-eyebrow svg{animation:none!important}.rb-brush::before{transition:none}}