/* =========================================================
   ROX BEAUTY – Erweiterungen (16.10.2026)
   Logo, Icons, Sprachwahl, Mobilmenü, Mega-Menü, Wellen,
   FAQ-Fragezeichen, Bläschen, Vorher/Nachher-Slider, Karte,
   Footer mit Verlauf und Line-Art, Illustration Gesicht
   ========================================================= */

/* ---------- Fonts: Zusatzzeichen (ă ș ț für Rumänisch), latin-ext ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("./fonts/cormorant-garamond-latin-ext-500-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/jost-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/jost-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Allura";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/allura-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Logo größer ---------- */
html:root{--rb-hd-h:80px}
.rb-brand img{width:58px;height:58px}
.rb-brand-t b{font-size:1.38rem}
@media (max-width:399px){.rb-brand img{width:50px;height:50px}.rb-brand-t b{font-size:1.2rem}.rb-brand-t small{font-size:.5rem;letter-spacing:.06em}}
@media (min-width:1100px){html:root{--rb-hd-h:88px}.rb-brand img{width:68px;height:68px}.rb-brand-t b{font-size:1.55rem}.rb-brand-t small{font-size:.66rem}}
.rb-ft-brand img{width:150px;height:150px;box-shadow:0 0 0 6px rgba(255,253,249,.08),0 22px 44px -18px rgba(0,0,0,.55)}

/* ---------- Icons größer ---------- */
.rb-ic{width:72px;height:72px}
.rb-ic svg{width:56%;height:56%}
.rb-ic--s{width:54px;height:54px}
.rb-ic--xs{width:44px;height:44px}
.rb-ic--l{width:96px;height:96px}
.rb-chip svg{width:20px;height:20px}
.rb-ft-c svg{width:22px;height:22px;margin-top:2px}
.rb-msvc a svg{width:24px;height:24px}
.rb-ft-band svg{width:15px;height:15px}

/* ---------- Sprachwahl DE | RO ---------- */
.rb-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--rb-blush-2);font-size:.7rem;font-weight:500;letter-spacing:.14em;line-height:1;flex:none}
.rb-lang a{display:grid;place-items:center;min-width:36px;height:34px;padding:0 8px;border-radius:999px;color:var(--rb-ink-2);transition:background .3s,color .3s}
.rb-lang a:hover{color:var(--rb-mauve)}
.rb-lang a[aria-current]{background:var(--rb-mauve);color:#fff}
.rb-hd-bar .rb-lang{margin-left:auto}
@media (min-width:1100px){.rb-hd-bar .rb-lang{margin-left:0}}
@media (max-width:399px){.rb-hd-bar{gap:8px;padding-inline:12px}.rb-lang a{min-width:32px;padding:0 6px}}

/* ---------- Mobilmenü: Kreise aus der Ecke ---------- */
@media (max-width:1099px){
  .rb-scrim{display:none}
  .rb-mnav{inset:0;height:100dvh;max-height:none;padding-top:var(--rb-hd-h);overflow:hidden;background:none;border:0;box-shadow:none;transform:none;opacity:1;visibility:hidden;transition:visibility 0s .95s}
  .rb-hd.is-open .rb-mnav{transform:none;visibility:visible;transition:none}
  .rb-mnav-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .rb-mnav-fx i{position:absolute;top:var(--my,40px);right:var(--mx,40px);width:300vmax;height:300vmax;margin:-150vmax -150vmax 0 0;border-radius:50%;background:var(--c);transform:scale(0);transition:transform .6s cubic-bezier(.7,0,.3,1);transition-delay:calc((4 - var(--k)) * .06s)}
  .rb-hd.is-open .rb-mnav-fx i{transform:scale(1);transition:transform 1s cubic-bezier(.65,0,.25,1);transition-delay:calc(var(--k) * .1s)}
  .rb-mnav-fx i:nth-child(1){--c:var(--rb-rose);--k:0}
  .rb-mnav-fx i:nth-child(2){--c:var(--rb-gold-l);--k:1}
  .rb-mnav-fx i:nth-child(3){--c:var(--rb-sage);--k:2}
  .rb-mnav-fx i:nth-child(4){--c:var(--rb-blush);--k:3}
  .rb-mnav-fx i:nth-child(5){--c:var(--rb-paper);--k:4}
  .rb-mnav-fx b{position:absolute;border-radius:50%;transform:scale(0);opacity:0;transition:transform .5s var(--rb-ease),opacity .3s}
  .rb-hd.is-open .rb-mnav-fx b{transform:scale(1);opacity:1;transition:transform 1.1s cubic-bezier(.34,1.56,.64,1) calc(.55s + var(--k) * .09s),opacity .4s calc(.55s + var(--k) * .09s)}
  .rb-mnav-fx b:nth-of-type(1){--k:0;top:calc(var(--rb-hd-h) - 40px);right:-60px;width:180px;height:180px;border:1.5px solid var(--rb-rose);animation:rb-orb 9s ease-in-out infinite}
  .rb-mnav-fx b:nth-of-type(2){--k:1;top:calc(var(--rb-hd-h) + 70px);right:34px;width:54px;height:54px;background:var(--rb-sage-l);animation:rb-orb 7s ease-in-out infinite reverse}
  .rb-mnav-fx b:nth-of-type(3){--k:2;top:calc(var(--rb-hd-h) + 8px);right:110px;width:22px;height:22px;background:var(--rb-gold-l);animation:rb-orb 6s ease-in-out infinite}
  .rb-mnav-fx b:nth-of-type(4){--k:3;bottom:-90px;left:-70px;width:230px;height:230px;background:radial-gradient(circle at 60% 40%,var(--rb-blush),transparent 70%);animation:rb-orb 11s ease-in-out infinite}
  .rb-mnav-in{position:relative;z-index:1;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:22px 18px 34px}
  .rb-mnav-in::before{top:-6px;color:rgba(212,144,139,.18)}
  .rb-mnav a{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .25s,transform .3s}
  .rb-hd.is-open .rb-mnav a{opacity:1;transform:none;transition:opacity .5s,transform .7s var(--rb-ease);transition-delay:calc(.6s + var(--k,0) * .05s)}
  .rb-mnav .rb-msvc-t{opacity:0;transition:opacity .3s}
  .rb-hd.is-open .rb-mnav .rb-msvc-t{opacity:1;transition:opacity .6s .75s}
  .rb-mlist>li>a{font-family:var(--rb-serif);font-size:1.5rem;font-weight:600;letter-spacing:0;padding:12px 2px}
  .rb-mlist{border-color:rgba(58,39,34,.1)}
  .rb-msvc a{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .rb-hd.is-open .rb-hd-bar{background:rgba(255,253,249,.55)}
}
@keyframes rb-orb{0%,100%{translate:0 0}33%{translate:-10px 12px}66%{translate:8px -8px}}

/* ---------- Mega-Menü: größere Icons + Illustration ---------- */
@media (min-width:1100px){
  .rb-dd{width:900px;grid-template-columns:1fr 1fr 260px;gap:8px;padding:16px}
  .rb-dd a{gap:14px;padding:10px 14px;font-size:.92rem}
  .rb-dd .rb-ic--xs{width:54px;height:54px}
  .rb-dd .rb-ic--xs svg{width:54%;height:54%}
  .rb-dd-cta{grid-column:3;grid-row:1 / span 4;position:relative;display:grid;align-content:start;justify-items:center;gap:8px;padding:16px 16px 18px;border-radius:18px;text-align:center;background:linear-gradient(160deg,var(--rb-blush),var(--rb-sage-l));overflow:hidden}
  .rb-dd-cta .rb-dd-ill{width:150px;height:auto;margin-bottom:2px}
  .rb-dd-cta b{font-family:var(--rb-serif);font-size:1.28rem;font-weight:600;line-height:1.15;color:var(--rb-ink)}
  .rb-dd-cta p{font-size:.8rem;line-height:1.45;color:var(--rb-ink-2)}
  .rb-dd .rb-dd-cta a{display:inline-flex;justify-content:center;padding:10px 16px;border-radius:999px;font-size:.82rem}
  .rb-dd .rb-dd-cta a.rb-btn{margin-top:6px;background:var(--rb-mauve);color:#fff}
  .rb-dd .rb-dd-cta a.rb-btn:hover{background:var(--rb-mauve-d)}
  .rb-dd .rb-dd-cta a.rb-dd-tel{padding:4px 8px;color:var(--rb-mauve-d);font-weight:500}
  .rb-dd .rb-dd-cta a.rb-dd-tel:hover{background:none;text-decoration:underline}
}
.dd-bottle{animation:rb-bobs 4s ease-in-out infinite}
.dd-drop{animation:rb-drop 2.8s ease-in infinite;transform-box:fill-box;transform-origin:50% 0}
.dd-tw,.ill-tw,.m-tw,.fa-tw{transform-box:fill-box;transform-origin:center;animation:rb-twinkle 3s ease-in-out infinite}
.dd-tw2,.ill-tw2,.m-tw2,.fa-tw2{animation-delay:-1s}
.dd-tw3,.ill-tw3,.m-tw3,.fa-tw3{animation-delay:-2s}
@keyframes rb-bobs{50%{transform:translateY(-5px)}}
@keyframes rb-drop{0%{transform:translateY(-6px) scale(.6);opacity:0}25%{opacity:1}80%{transform:translateY(42px) scale(1);opacity:1}100%{transform:translateY(48px) scale(1.4,.4);opacity:0}}
@keyframes rb-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

/* ---------- Wellen-Bänder (Laufband oben, Band im Footer) ---------- */
.rb-wvs{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.rb-wv{animation:rb-wv var(--wd,16s) linear infinite}
.rb-wv--r{animation-direction:reverse}
@keyframes rb-wv{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
.rb-marq{background:var(--rb-sage-d);padding-block:26px}
.rb-marq-t span{text-shadow:0 1px 10px rgba(58,39,34,.25)}
.rb-wb{position:relative;isolation:isolate;overflow:hidden;background:var(--rb-mauve-d)}
.rb-wb .rb-ft-band{position:relative;background:none;padding:30px 16px;text-shadow:0 1px 8px rgba(58,39,34,.35)}

/* ---------- FAQ: schwebende Fragezeichen ---------- */
.rb-qm{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.rb-qm i{position:absolute;left:var(--x);top:var(--y);font-family:var(--rb-serif);font-style:italic;font-weight:600;font-size:var(--s);line-height:1;color:var(--c);opacity:var(--o);transform:rotate(var(--r));animation:rb-qm var(--d) ease-in-out infinite;animation-delay:var(--dl)}
@keyframes rb-qm{0%,100%{transform:translate3d(0,0,0) rotate(var(--r)) scale(1)}25%{transform:translate3d(18px,-26px,0) rotate(calc(var(--r) + 12deg)) scale(1.06)}50%{transform:translate3d(-12px,-46px,0) rotate(calc(var(--r) - 8deg)) scale(.95)}75%{transform:translate3d(-24px,-14px,0) rotate(calc(var(--r) + 5deg)) scale(1.04)}}

/* ---------- Hero: Bläschen in alle Richtungen ---------- */
.rb-bub{animation:rb-drift var(--d,12s) ease-in-out infinite}
@keyframes rb-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(var(--x1,var(--x,14px)),var(--y1,var(--y,-18px)),0) scale(1.05)}50%{transform:translate3d(var(--x2,-16px),var(--y2,-6px),0) scale(.92)}75%{transform:translate3d(var(--x3,10px),var(--y3,16px),0) scale(1.08)}}

/* ---------- Kästchen unter dem Text färben sich nacheinander ---------- */
.rb-benefit{--lc:var(--rb-rose)}
.rb-benefit:nth-child(4n+2){--lc:var(--rb-sage)}
.rb-benefit:nth-child(4n+3){--lc:var(--rb-gold)}
.rb-benefit:nth-child(4n+4){--lc:var(--rb-mauve)}
.rb-benefit .rb-ic--line{transition:background .7s,color .7s,box-shadow .7s,transform .7s var(--rb-ease)}
.rb-benefit.is-lit .rb-ic--line{background:var(--lc);color:#fff;box-shadow:inset 0 0 0 1.3px var(--lc),0 14px 26px -12px var(--lc);transform:translateY(-4px)}
.rb-benefit.is-lit{color:var(--rb-ink)}
.rb-chip{--lc:var(--rb-rose);--lb:var(--rb-blush);transition:background .7s,border-color .7s,color .7s,transform .7s var(--rb-ease),box-shadow .7s}
.rb-chip:nth-child(4n+2){--lc:var(--rb-sage);--lb:var(--rb-sage-l)}
.rb-chip:nth-child(4n+3){--lc:var(--rb-gold);--lb:#F5EAD7}
.rb-chip:nth-child(4n+4){--lc:var(--rb-mauve);--lb:#F2E1E6}
.rb-chip.is-lit{background:var(--lb);border-color:var(--lc);transform:translateY(-2px);box-shadow:0 10px 20px -14px var(--lc)}
.rb-chip.is-lit svg{color:var(--lc)}

/* ---------- Vorher/Nachher-Slider ---------- */
.rb-bas{position:relative;aspect-ratio:3/4;border-radius:var(--rb-r-l);overflow:hidden;background:var(--rb-blush);box-shadow:var(--rb-sh-l);isolation:isolate;touch-action:pan-y;user-select:none}
.rb-bas-s{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.05);transition:opacity .9s var(--rb-ease),transform 1.4s var(--rb-ease)}
.rb-bas-s.is-on{opacity:1;transform:none;z-index:1}
.rb-bas-s img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 40%);pointer-events:none}
.rb-bas-tag{position:absolute;left:14px;top:14px;padding:7px 14px;border-radius:999px;background:var(--rb-ink);color:#fff;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.rb-bas-s[data-t="n"] .rb-bas-tag{background:var(--rb-mauve)}
.rb-bas-s[data-t="m"] .rb-bas-tag{background:var(--rb-sage-d)}
.rb-bas-n{position:absolute;left:0;right:0;bottom:0;z-index:3;display:none;align-items:center;justify-content:space-between;gap:10px;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(58,39,34,.55))}
.rb-js .rb-bas-n{display:flex}
.rb-bas-b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,253,249,.92);color:var(--rb-ink);box-shadow:0 8px 18px -10px rgba(0,0,0,.6);transition:transform .3s var(--rb-ease),background .3s}
.rb-bas-b:hover{transform:scale(1.08);background:#fff}
.rb-bas-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rb-bas-d{display:flex;gap:8px}
.rb-bas-d button{position:relative;width:28px;height:28px;border-radius:999px}
.rb-bas-d button::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(255,253,249,.5);transition:background .3s}
.rb-bas-d button[aria-current="true"]::before{background:#fff}
.rb-bas-d button::after{content:"";position:absolute;left:4px;top:50%;height:4px;margin-top:-2px;width:0;border-radius:4px;background:var(--rb-gold-l)}
.rb-bas.is-run .rb-bas-d button[aria-current="true"]::after{animation:rb-basp var(--dur,4.2s) linear forwards}
@keyframes rb-basp{to{width:calc(100% - 8px)}}
.rb-ba .rb-bas{aspect-ratio:3/4}
.rb-media--1{max-width:440px;margin-inline:auto}
@media (min-width:768px){.rb-media--1{grid-template-columns:1fr}}

/* ---------- Karte als Illustration ---------- */
.rb-mapil{position:relative;aspect-ratio:4/3;min-height:360px;border-radius:var(--rb-r-l);overflow:hidden;background:var(--rb-cream);box-shadow:var(--rb-sh-l);isolation:isolate}
.rb-mapil-svg{position:absolute;inset:0;width:100%;height:100%}
.rb-mapil-hit{position:absolute;inset:0;z-index:1}
.rb-mapil-hint{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,253,249,.92);box-shadow:var(--rb-sh);font-size:.74rem;letter-spacing:.06em;color:var(--rb-ink-2);pointer-events:none}
.rb-mapil-hint svg{width:16px;height:16px;fill:none;stroke:var(--rb-mauve);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rb-mapil-card{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:grid;gap:10px;padding:16px 18px;border-radius:20px;background:rgba(255,253,249,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--rb-sh)}
.rb-mapil-card b{font-family:var(--rb-serif);font-size:1.25rem;font-weight:600;color:var(--rb-ink)}
.rb-mapil-card .rb-btns{display:flex;flex-wrap:wrap;gap:8px}
.rb-mapil-card .rb-btn{min-height:44px;padding:9px 16px;font-size:.82rem}
.rb-mapil-card .rb-btns{flex-wrap:wrap}
.rb-mapil-card .rb-btn{flex:1 1 auto;justify-content:center}
@media (max-width:599px){
  .rb-mapil{display:flex;flex-direction:column;aspect-ratio:auto;min-height:0}
  .rb-mapil-svg{position:relative;inset:auto;height:260px;flex:none}
  .rb-mapil-hit{bottom:auto;height:260px}
  .rb-mapil-card{position:relative;left:auto;right:auto;bottom:auto;margin:-26px 12px 12px}
}
.m-lbl{font-family:var(--rb-sans);font-size:15px;font-weight:500;letter-spacing:.32em;fill:var(--rb-ink-2)}
.m-lbl--s{font-size:12px;letter-spacing:.24em;fill:var(--rb-sage-d)}
.m-ring{transform-box:fill-box;transform-origin:center;animation:rb-mring 2.8s ease-out infinite}
.m-ring2{animation-delay:1.4s}
@keyframes rb-mring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.m-pin{animation:rb-mpin 2.6s ease-in-out infinite}
@keyframes rb-mpin{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.m-tree{transform-box:fill-box;transform-origin:50% 100%;animation:rb-mtree 5s ease-in-out infinite;animation-delay:calc(var(--k) * -.7s)}
@keyframes rb-mtree{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) scale(1.04)}}
.m-route{animation:rb-mroute 1.4s linear infinite}
@keyframes rb-mroute{to{stroke-dashoffset:-.045}}
.m-water{animation:rb-mwater 6s ease-in-out infinite}
@keyframes rb-mwater{50%{stroke:#CFDBE8}}

/* ---------- Footer: Verlauf + Line-Art (30 %) ---------- */
.rb-ft{background:radial-gradient(70% 90% at 100% 0%,rgba(212,144,139,.42),transparent 62%),radial-gradient(60% 80% at 0% 100%,rgba(162,173,142,.32),transparent 60%),linear-gradient(135deg,#3A2722 0%,#4E2A33 38%,#6B3348 70%,#8A4A63 100%);background-size:150% 150%,150% 150%,100% 100%;animation:rb-ftbg 20s ease-in-out infinite alternate}
@keyframes rb-ftbg{to{background-position:40% 30%,60% 70%,0 0}}
.rb-ft-art{position:absolute;right:-3%;bottom:40px;z-index:0;width:min(78vw,600px);height:auto;opacity:.3;pointer-events:none}
.rb-ft>.rb-wrap{position:relative;z-index:1}
.fa-d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 4s var(--rb-ease)}
.rb-ft-art.is-in .fa-d{stroke-dashoffset:0}
.fa-hair{transform-box:view-box;transform-origin:150px 40px;animation:rb-fahair 9s ease-in-out infinite}
@keyframes rb-fahair{50%{transform:rotate(2.2deg) translateX(4px)}}
.fa-lotus{transform-box:fill-box;transform-origin:50% 100%;animation:rb-falotus 7s ease-in-out infinite}
@keyframes rb-falotus{50%{transform:scale(1.05) translateY(-6px)}}
.fa-dew{animation:rb-fadew 5s ease-in infinite;transform-box:fill-box;transform-origin:center}
.fa-dew2{animation-delay:-2.4s}
@keyframes rb-fadew{0%{transform:translateY(-10px);opacity:0}30%{opacity:1}100%{transform:translateY(60px);opacity:0}}

/* ---------- Illustration Gesichtsbehandlung ---------- */
.rb-ill svg.ill-g{max-width:420px}
.ill-s{opacity:0}
.ill-s--mas{opacity:1}
.ill-s--an{animation:ill-sc1 9s infinite}
.ill-s--mas{animation:ill-sc2 9s infinite}
.ill-s--mask{animation:ill-sc3 9s infinite}
@keyframes ill-sc1{0%,30%{opacity:1}35%,95%{opacity:0}100%{opacity:1}}
@keyframes ill-sc2{0%,31%{opacity:0}36%,63%{opacity:1}68%,100%{opacity:0}}
@keyframes ill-sc3{0%,64%{opacity:0}69%,94%{opacity:1}99%,100%{opacity:0}}
.ill-lens{animation:ill-lens 9s ease-in-out infinite}
@keyframes ill-lens{0%{transform:translate(160px,206px)}10%{transform:translate(186px,196px)}20%{transform:translate(256px,196px)}30%,100%{transform:translate(222px,132px)}}
.ill-pt{opacity:0;transform-box:fill-box;transform-origin:center;animation:ill-pt 9s infinite;animation-delay:calc(var(--k) * .25s)}
@keyframes ill-pt{0%{opacity:0;transform:scale(0)}6%,24%{opacity:.9;transform:scale(1)}30%,100%{opacity:0;transform:scale(0)}}
.ill-hand{animation:ill-mas 1.8s ease-in-out infinite}
.ill-hand--r{animation-delay:-.9s}
@keyframes ill-mas{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-6px)}50%{transform:translate(0,-11px)}75%{transform:translate(-4px,-5px)}}
.ill-arcs{animation:ill-arcs 1.8s ease-in-out infinite}
@keyframes ill-arcs{50%{opacity:.25}}
.ill-mask-r{transform-box:fill-box;transform-origin:50% 0;animation:ill-mask 9s ease-in-out infinite}
@keyframes ill-mask{0%,64%{transform:scaleY(0)}86%,100%{transform:scaleY(1)}}
.ill-brush{animation:ill-brush 9s ease-in-out infinite}
@keyframes ill-brush{0%,64%{transform:translate(220px,92px) rotate(-30deg)}72%{transform:translate(186px,126px) rotate(-20deg)}78%{transform:translate(254px,126px) rotate(20deg)}84%{transform:translate(176px,196px) rotate(-26deg)}90%{transform:translate(262px,200px) rotate(26deg)}100%{transform:translate(222px,252px) rotate(0deg)}}
.ill-orbit{transform-box:view-box;transform-origin:220px 190px;animation:ill-orbit 40s linear infinite}
@keyframes ill-orbit{to{transform:rotate(360deg)}}
.rb-ill-cap span{animation:ill-cap 9s infinite;animation-delay:calc(var(--k,0) * 3s)}
@keyframes ill-cap{0%,31%{background:var(--rb-mauve);border-color:var(--rb-mauve);color:#fff}36%,100%{background:#fff;border-color:var(--rb-blush-2);color:var(--rb-ink-2)}}

@media (prefers-reduced-motion:reduce){
  .rb-ft,.rb-ft *,.rb-wv,.rb-qm i,.rb-bub,.rb-mnav-fx *,.m-ring,.m-pin,.m-tree,.m-route,.dd-bottle,.dd-drop{animation:none!important}
  .fa-d{transition:none;stroke-dashoffset:0}
  .rb-mnav-fx i,.rb-mnav a{transition-duration:.01ms!important;transition-delay:0s!important}
}