/* =====================================================================
   RUBY G – Dark Enchantment
   Design-Ebene über app.css: nur Farben, Schriften und Effekte.
   Das CMS (PHP, JavaScript, app.css) bleibt identisch mit dem Vindictagy-Shop.
   Farben aus den Dosen: Champagner-Gold (Classic), Lavendel (Zero Spell),
   Salbeigrün (Waldmeister), Rosé (Cherry Blush) – auf dunklem Perlgrund.
   ===================================================================== */

/* Cinzel (SIL Open Font License), lokal eingebunden – keine Übertragung an Google */
@font-face{font-family:"Cinzel";src:url("../fonts/cinzel.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --bg:#0c0a10;
  --surface:#15111a;
  --surface2:#1c1623;
  --purple:#d9b36c;          /* Hauptakzent: Champagner-Gold (Variable heißt aus Kompatibilität weiter --purple) */
  --light:#f1dfb5;
  --text:#f7f1ea;            /* Perlweiß */
  --muted:#b8adc2;
  --line:#2f2638;
  --gold:#d9b36c;
  --gold-deep:#a97c35;
  --lavender:#b89cf2;
  --sage:#8fcf8a;
  --rose:#f08fb0;
  --pearl:#f7f1ea;
  --font-display:"Cinzel",Georgia,"Times New Roman",serif;
}

/* Hintergrund: dunkler Perlgrund mit Schimmer in den vier Sortenfarben und feinem Sternenstaub */
body{
  background:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 9%,#f1dfb599 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 62%,#fff6 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 44%,#f08fb099 50%,transparent 51%),
    radial-gradient(1px 1px at 55% 88%,#b89cf299 50%,transparent 51%),
    radial-gradient(circle at 85% -5%,#d9b36c1f 0,transparent 34%),
    radial-gradient(circle at 5% 25%,#b89cf214 0,transparent 30%),
    radial-gradient(circle at 95% 70%,#f08fb012 0,transparent 32%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
}
::selection{background:#d9b36c55;color:#fff}

/* Überschriften & Marke */
.store-main h1,.section-head h2,#stream-title,.script-title,.campaign h2,.maintenance-card h1,
.store-head .brand-image span,.site-footer .brand-image span{
  font-family:var(--font-display);font-weight:600;letter-spacing:.06em;
}
.store-main h1,.maintenance-card h1{
  background:linear-gradient(100deg,#f7f1ea 0%,#f1dfb5 30%,#d9b36c 50%,#f1dfb5 70%,#f7f1ea 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 18px #d9b36c33);
}
.store-head .brand-image span,.site-footer .brand-image span{
  color:var(--gold);text-shadow:0 0 16px #d9b36c55;font-size:1.3rem;letter-spacing:.22em;
}
.brand span{color:var(--gold);text-shadow:0 0 16px #d9b36c55}
.eyebrow,.hero-kicker{color:var(--gold)!important;letter-spacing:.28em}
.section-head h2{letter-spacing:.08em}
.script-title{color:var(--rose)!important;text-shadow:0 0 18px #f08fb055!important}

/* Kopf- und Fußzeile */
.premium-header{background:#0c0a10d9;border-color:#d9b36c26;box-shadow:0 8px 35px #0009}
.site-footer{background:#09070c;border-top-color:#d9b36c22}
.cart-action{color:var(--light)}
.cart-action span{background:var(--gold);color:#1a1208}
.cart-action:hover svg,.search-action:hover svg{filter:drop-shadow(0 0 7px #d9b36c)}

/* Buttons: Gold mit dunkler Schrift, ruhiger Glanz */
.btn.primary,.card-cart,.hero-cta{
  background:linear-gradient(135deg,#f1dfb5 0%,#d9b36c 45%,#b8893d 100%)!important;
  border-color:#f1dfb5!important;color:#1a1208!important;box-shadow:0 8px 28px #d9b36c33!important;text-shadow:none!important;
}
.btn.primary svg,.card-cart svg,.hero-cta svg{color:#1a1208}
.btn.primary:hover,.card-cart:hover,.hero-cta:hover{box-shadow:0 10px 34px #d9b36c55!important;filter:brightness(1.05)}
.btn:hover{border-color:var(--gold)}
.btn.is-added{background:linear-gradient(135deg,#9fd99b,#6fbf6a)!important;border-color:#c9f0c6!important}
.btn.is-added::after{color:#10240f}

/* Karten & Flächen */
.panel{background:linear-gradient(145deg,#17121d,#110d16);border-color:var(--line)}
.product-card{background:linear-gradient(160deg,#18131e,#120e17);border-color:#2f2638}
.product-card:hover,.product-card.is-tilting{border-color:#d9b36c88;box-shadow:0 18px 40px #0009,0 0 26px #d9b36c22}
input,select,textarea{background:#0f0c13;border-color:#342a3e}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #d9b36c22}

/* Sortenfarben: Karten auf der Startseite anhand der Produktadresse einfärben */
.energy-card{--tone:var(--gold)}
.energy-card:has(a[href*="zero"]),.energy-card:has(a[href*="spell"]){--tone:var(--lavender)}
.energy-card:has(a[href*="wald"]),.energy-card:has(a[href*="green"]){--tone:var(--sage)}
.energy-card:has(a[href*="cherry"]),.energy-card:has(a[href*="kirsch"]),.energy-card:has(a[href*="blush"]){--tone:var(--rose)}
.energy-card:has(a[href*="classic"]){--tone:var(--gold)}
.tone-green{--tone:var(--sage)}.tone-pink{--tone:var(--rose)}.tone-purple{--tone:var(--lavender)}.tone-yellow,.tone-orange{--tone:var(--gold)}.tone-blue{--tone:var(--lavender)}
.energy-card{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 10%,#17121d),#110d16)}

/* Hero: Gold-Schimmer statt Glitch, funkelnde Lichtpunkte statt Blitz */
.energy-hero h1{animation:none;transform:none}
.energy-hero h1 span{color:var(--pearl);text-shadow:0 2px 0 #3a2d24,0 0 30px #f7f1ea22}
.energy-hero h1 em{
  font-family:var(--font-display);font-style:normal;
  background:linear-gradient(100deg,#f08fb0 0%,#f1dfb5 35%,#d9b36c 50%,#b89cf2 80%,#f08fb0 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 22px #d9b36c44);
}
@keyframes rubyShimmer{from{background-position:0% 50%}to{background-position:250% 50%}}
@keyframes rubyTwinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.energy-hero::after{
  opacity:1;mix-blend-mode:screen;background:
    radial-gradient(2px 2px at 14% 22%,#fff 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 31% 70%,#f1dfb5 50%,transparent 51%),
    radial-gradient(2px 2px at 48% 14%,#f08fb0 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 58%,#fff 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 78% 30%,#b89cf2 50%,transparent 51%),
    radial-gradient(2px 2px at 90% 76%,#f1dfb5 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 88%,#8fcf8a 50%,transparent 51%);
}
@media (prefers-reduced-motion:no-preference){
  .energy-hero h1 em,.store-main h1:not(#hero-title){animation:rubyShimmer 7s linear infinite}
  .energy-hero::after{animation:rubyTwinkle 3.2s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.energy-hero::after{opacity:.6}}

/* Laufband: Cinzel in Gold mit Sternfunken */
.ticker{background:linear-gradient(90deg,#120e17,#1d1622 50%,#120e17);border-block-color:#d9b36c33}
.ticker-track{font-family:var(--font-display);font-size:1.05rem;font-weight:600;letter-spacing:.2em;color:var(--light)}
.ticker-track svg{display:none}
.ticker-track span::after{content:"✦";margin-left:1.4rem;color:var(--gold);font-size:.8em}

/* Kleinteile */
.stars{color:var(--gold)}
.free-shipping{border-color:#d9b36c40;background:#d9b36c0f}
.free-shipping-bar span{background:linear-gradient(90deg,#b8893d,#f1dfb5)}
.pay-chip{border-color:#d9b36c33;color:var(--light)}
.status-pill.tone-success,.discount-status.ok{color:#a8e3a4}
.footer-credit{color:var(--gold)}
.giftcard-preset.active span,.giftcard-preset input:checked+span{border-color:var(--gold);background:#d9b36c1f;box-shadow:0 0 0 1px var(--gold),0 6px 20px #d9b36c2e}
.gallery-thumb.active{border-color:var(--gold)}
.tip-option.active{box-shadow:inset 0 0 0 2px var(--gold);background:#d9b36c14}
.payment:has(input:checked){border-color:var(--gold);background:#d9b36c10}
.fly-ghost{box-shadow:0 10px 30px #d9b36c66}
.toast-float{border-color:#d9b36c55;background:#15110ef2;color:#f1dfb5}
.food-warning{border-color:#f08fb055;background:#f08fb012;color:#f6c4d6}
.maintenance-page{background:var(--bg)}

/* Hero-Hintergrund: statt Vindictagy-Blitzbild weiche Perl-, Gold- und Lavendel-Schleier */
.energy-hero:before{
  background:
    radial-gradient(ellipse at 18% 40%,#b89cf21f 0,transparent 45%),
    radial-gradient(ellipse at 40% 85%,#f08fb014 0,transparent 40%),
    radial-gradient(ellipse at 30% 10%,#d9b36c1a 0,transparent 42%),
    linear-gradient(0deg,#0c0a10 0%,transparent 25%,transparent 80%,#0c0a10 100%),
    #0c0a10!important;
}
@media(max-width:800px){.energy-hero:before{background:radial-gradient(ellipse at 50% 30%,#b89cf21f 0,transparent 55%),#0c0a10!important}}
.hero-benefits b,.hero-benefits svg{color:var(--gold)!important}
.hero-benefits span{color:var(--pearl)}

/* Drei Kacheln unter dem Hero in Gold, Lavendel und Rosé, ohne Blitz-Streifen */
.power-tile{background:linear-gradient(145deg,#17121d,#110d16);box-shadow:none}
.power-tile:before{opacity:.07;background:radial-gradient(circle at 85% 50%,currentColor 0,transparent 55%)}
.power-tile.energy{color:var(--gold);border-color:#d9b36c66;box-shadow:0 0 22px #d9b36c1a}
.power-tile.focus{color:var(--lavender);border-color:#b89cf266;box-shadow:0 0 22px #b89cf21a}
.power-tile.strength{color:var(--rose);border-color:#f08fb066;box-shadow:0 0 22px #f08fb01a}
.power-tile strong{font-family:var(--font-display);font-weight:600;letter-spacing:.1em;color:var(--pearl)}

/* Anmelden-Button in der Kopfzeile: Gold-Umriss */
.header-login{background:transparent!important;border-color:#d9b36c99!important;color:var(--light)!important;box-shadow:none!important}
.header-login:hover{background:#d9b36c1a!important;border-color:var(--gold)!important}
.header-login svg{color:var(--gold)}

/* Vier Sorten nebeneinander statt Sechser-Raster */
@media(min-width:900px){.bestseller-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.energy-card-body small{color:var(--tone)}
.energy-card-body h3{font-family:var(--font-display);font-weight:600;letter-spacing:.06em}

/* Aktionskacheln (Probierpaket / Story) */
.campaign{border-color:#d9b36c33!important;background-color:#15111a}
.campaign .btn{border-color:#d9b36c99}
.campaign:after{background:linear-gradient(90deg,#15111a 22%,transparent 72%)!important}

/* Wartungsseite: Sternenhimmel statt Vindictagy-Blitzmotiv */
.maintenance-page{background:var(--bg)}
.maintenance-page:before{background:radial-gradient(1px 1px at 12% 18%,#f7e7bf 50%,transparent 51%),radial-gradient(1px 1px at 78% 26%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 34% 72%,#d9b36c 50%,transparent 51%),radial-gradient(1px 1px at 88% 80%,#b89cf2 50%,transparent 51%),radial-gradient(1px 1px at 55% 12%,#fff 50%,transparent 51%),radial-gradient(ellipse at 20% 10%,#b89cf233,transparent 55%),radial-gradient(ellipse at 85% 90%,#f08fb026,transparent 55%),radial-gradient(ellipse at 50% 45%,#d9b36c1f,transparent 60%),var(--bg)!important;filter:none;transform:none;animation:none}
.maintenance-energy{border-color:#d9b36c;background:linear-gradient(145deg,#d9b36c33,#b89cf21c);color:#f1dfb5;box-shadow:0 0 35px #d9b36c4d}
.maintenance-kicker{color:#d9b36c}
.maintenance-status{border-color:#3a2f2a}
.maintenance-status svg{color:#d9b36c}
.maintenance-contact{color:#f1dfb5}

/* Kampagnen-Überschrift nicht zu wuchtig */
.campaign.trial h2{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.2;max-width:15ch}

/* =====================================================================
   MAGIC-EFFEKTE (nur CSS, kein zusätzliches Script)
   Alle Bewegungen laufen nur, wenn das Gerät keine reduzierte Bewegung wünscht.
   ===================================================================== */
@property --rg-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rgSpin{to{--rg-angle:360deg}}
@keyframes rgDust{from{background-position:0 0}to{background-position:0 -320px}}
@keyframes rgDustSlow{from{background-position:0 0}to{background-position:-60px -460px}}
@keyframes rgTwinkleSoft{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes rgFloat{0%,100%{transform:scale(1.04) translateY(0)}50%{transform:scale(1.05) translateY(-10px)}}
@keyframes rgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes rgGlint{0%,62%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
@keyframes rgShine{0%,70%{transform:translateX(-130%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes rgAura{0%,100%{box-shadow:0 0 18px #d9b36c55}33%{box-shadow:0 0 24px #b89cf266}66%{box-shadow:0 0 24px #f08fb055}}
@keyframes rgLogo{0%,100%{filter:drop-shadow(0 0 4px #d9b36c66)}50%{filter:drop-shadow(0 0 12px #f1dfb5cc) brightness(1.15)}}
@keyframes rgStarSpin{0%,100%{transform:rotate(0) scale(.85);opacity:.6}50%{transform:rotate(180deg) scale(1.2);opacity:1}}
@keyframes rgRise{0%{opacity:0;transform:translateY(40px)}25%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}
@keyframes rgKenBurns{from{transform:scale(1)}to{transform:scale(1.07) translateX(-1%)}}
@keyframes rgHalo{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.8;transform:scale(1.04)}}

/* 1) Schwebender Feenstaub über der ganzen Seite (hinter dem Inhalt) */
html::before,html::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
html::before{
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%,#f1dfb5 50%,transparent 51%),
    radial-gradient(1px 1px at 30% 65%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 55% 35%,#d9b36c 50%,transparent 51%),
    radial-gradient(1px 1px at 75% 80%,#b89cf2 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 10%,#f08fb0 50%,transparent 51%);
  background-size:320px 320px;opacity:.55;
}
html::after{
  background-image:
    radial-gradient(2px 2px at 20% 40%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 75%,#f1dfb5 50%,transparent 51%),
    radial-gradient(1px 1px at 85% 25%,#8fcf8a 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 45% 5%,#d9b36c88 50%,transparent 51%);
  background-size:460px 460px;opacity:.4;
}

/* 2) Hero: eigene Sternenschicht, schwebende Dosen, Lichtglanz und farbiger Halo */
.energy-hero .hero-lightning{
  display:block!important;position:absolute;inset:0 -50vw;z-index:-1;opacity:.7;filter:none;
  background:none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 40% 70%,#f1dfb5 50%,transparent 51%),
    radial-gradient(1px 1px at 65% 15%,#b89cf2 50%,transparent 51%),
    radial-gradient(2px 2px at 85% 55%,#f08fb0 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 50% 90%,#8fcf8a 50%,transparent 51%);
  background-size:320px 320px;
}
.energy-hero-art{position:relative}
.energy-hero-art::before{
  content:"";position:absolute;inset:8% 10%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 25% 50%,#d9b36c40,transparent 45%),radial-gradient(ellipse at 45% 50%,#b89cf240,transparent 45%),radial-gradient(ellipse at 65% 50%,#8fcf8a33,transparent 45%),radial-gradient(ellipse at 85% 50%,#f08fb040,transparent 45%);
  filter:blur(30px);
}
.energy-hero-art::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:28%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,#fff5 45%,#f1dfb588 50%,#fff5 55%,transparent);
  transform:translateX(-120%) skewX(-18deg);opacity:.55;
}
.hero-kicker{text-shadow:0 0 14px #d9b36c66}

/* 3) Goldene Buttons mit wanderndem Glanz */
.btn.primary,.card-cart,.hero-cta{position:relative;overflow:hidden;isolation:isolate}
.btn.primary::before,.card-cart::before,.hero-cta::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff9 50%,transparent);transform:translateX(-130%) skewX(-20deg);
}

/* 4) Überschriften in fließendem Gold, Logo mit Glühen */
.section-head h2,.campaign h2:not(.script-title),.power-tile strong{
  background:linear-gradient(100deg,#f7f1ea 0%,#f1dfb5 30%,#d9b36c 50%,#f1dfb5 70%,#f7f1ea 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
}
.store-head .brand-image span,.site-footer .brand-image span{
  background:linear-gradient(100deg,#d9b36c 0%,#f7e7bf 45%,#d9b36c 60%,#a97c35 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 8px #d9b36c55);
}

/* 5) Sortenkarten: magischer Rahmen, der beim Hover umläuft, und aufsteigende Funken */
.energy-card::before{
  content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--rg-angle),transparent 0 55%,var(--tone) 68%,#fff 75%,var(--tone) 82%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .35s;
}
.energy-card:hover::before,.energy-card:focus-within::before{opacity:1}
.energy-card:hover{box-shadow:0 18px 40px #000a,0 0 32px color-mix(in srgb,var(--tone) 35%,transparent)}
.energy-card-image{position:relative}
.energy-card-image::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(2px 2px at 20% 80%,#fff 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 35% 95%,var(--tone) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 85%,#fff 50%,transparent 51%),
    radial-gradient(3px 3px at 70% 100%,var(--tone) 50%,transparent 51%),
    radial-gradient(2px 2px at 82% 88%,#f1dfb5 50%,transparent 51%),
    radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--tone) 30%,transparent),transparent 60%);
}
.energy-card:hover .energy-card-image img{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--tone) 45%,transparent)) brightness(1.06)}

/* 6) Kacheln, Laufband, Aktionen, Produktseite */
.power-icon svg{filter:drop-shadow(0 0 8px currentColor)}
.ticker-track span::after{display:inline-block}
.campaign img{transform-origin:70% 50%}
.product-gallery{position:relative;isolation:isolate}
.product-gallery::before{
  content:"";position:absolute;inset:10% 15%;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(40px);
  background:radial-gradient(circle,#d9b36c40,#b89cf226 45%,transparent 70%);
}

@media (prefers-reduced-motion:no-preference){
  html::before{animation:rgDust 38s linear infinite}
  html::after{animation:rgDustSlow 64s linear infinite,rgTwinkleSoft 5s ease-in-out infinite}
  .energy-hero .hero-lightning{animation:rgDust 30s linear infinite}
  .energy-hero-art img{animation:rgFloat 7s ease-in-out infinite}
  .energy-hero-art::before{animation:rgHalo 6s ease-in-out infinite}
  .energy-hero-art::after{animation:rgGlint 7s ease-in-out infinite 1.5s}
  .btn.primary::before,.card-cart::before,.hero-cta::before{animation:rgShine 5s ease-in-out infinite}
  .card-cart::before{animation-delay:1.2s}
  .hero-cta{animation:rgAura 6s ease-in-out infinite}
  .section-head h2,.campaign h2:not(.script-title),.power-tile strong,
  .store-head .brand-image span,.site-footer .brand-image span{animation:rubyShimmer 8s linear infinite}
  .brand-image img{animation:rgLogo 3.5s ease-in-out infinite}
  .energy-card:hover::before,.energy-card:focus-within::before{animation:rgSpin 2.6s linear infinite}
  .energy-card:hover .energy-card-image::after{opacity:1;animation:rgRise 1.8s ease-out infinite}
  .power-icon{animation:rgBob 3.4s ease-in-out infinite}
  .power-tile.focus .power-icon{animation-delay:.6s}
  .power-tile.strength .power-icon{animation-delay:1.2s}
  .ticker-track span::after{animation:rgStarSpin 3s ease-in-out infinite}
  .campaign img{animation:rgKenBurns 18s ease-in-out infinite alternate}
  .product-gallery::before{animation:rgHalo 6s ease-in-out infinite}
  .maintenance-energy{animation:rgAura 5s ease-in-out infinite,rgBob 3.4s ease-in-out infinite}
}

/* =====================================================================
   HERO-TEXT: „NATURAL MAGIC · BOOST YOUR ENERGY“ / „NATURAL MAGIC.“
   ===================================================================== */
@keyframes rgSweep{0%,55%{background-position:100% 50%}100%{background-position:-100% 50%}}
@keyframes rgBlurIn{from{opacity:0;filter:blur(14px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes rgSpread{from{opacity:0;letter-spacing:.7em}to{opacity:1;letter-spacing:.28em}}
@keyframes rgMagicGlow{0%,100%{filter:drop-shadow(0 0 16px #d9b36c55)}33%{filter:drop-shadow(0 0 26px #b89cf277)}66%{filter:drop-shadow(0 0 26px #f08fb066)}}
@keyframes rgSpark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}40%,60%{opacity:1;transform:scale(1) rotate(90deg)}}

/* Kicker: Gold mit durchlaufendem Lichtreflex, funkelnde Sterne links und rechts */
.energy-hero .hero-kicker{
  display:inline-flex;align-items:center;gap:.7em;
  background:linear-gradient(90deg,#a97c35 0%,#d9b36c 40%,#fff7e0 50%,#d9b36c 60%,#a97c35 100%);
  background-size:200% 100%;background-position:100% 50%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 10px #d9b36c55);
}
.energy-hero .hero-kicker::before,.energy-hero .hero-kicker::after{
  content:"✦";display:inline-block;-webkit-text-fill-color:#f1dfb5;font-size:1.05em;
  text-shadow:0 0 10px #f1dfb5;
}

/* „NATURAL“: Perlweiß, über das regelmäßig ein goldener Lichtstreif gleitet */
.energy-hero h1 span{
  background:linear-gradient(100deg,#f7f1ea 0%,#f7f1ea 42%,#fff 47%,#f1dfb5 50%,#fff 53%,#f7f1ea 58%,#f7f1ea 100%);
  background-size:250% 100%;background-position:100% 50%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* „MAGIC.“: Farbverlauf der vier Sorten, wechselndes Leuchten und funkelnde Sterne */
.energy-hero h1 em{position:relative;width:fit-content}
.energy-hero h1 em::before,.energy-hero h1 em::after{
  content:"✦";position:absolute;pointer-events:none;-webkit-text-fill-color:#fff;font-family:serif;line-height:1;
  opacity:0;
}
.energy-hero h1 em::before{top:-.08em;right:-.32em;font-size:.34em;text-shadow:0 0 12px #f1dfb5,0 0 24px #d9b36c}
.energy-hero h1 em::after{bottom:.02em;left:-.28em;font-size:.22em;text-shadow:0 0 10px #b89cf2,0 0 20px #f08fb0}

@media (prefers-reduced-motion:no-preference){
  .energy-hero .hero-kicker{animation:rgSpread 1.4s cubic-bezier(.2,.7,.2,1) both,rgSweep 6s ease-in-out 1.6s infinite}
  .energy-hero .hero-kicker::before{animation:rgStarSpin 3s ease-in-out infinite}
  .energy-hero .hero-kicker::after{animation:rgStarSpin 3s ease-in-out 1.5s infinite}
  .energy-hero h1 span{animation:rgBlurIn 1.1s ease-out .2s both,rgSweep 7s ease-in-out 2s infinite}
  .energy-hero h1 em{animation:rgBlurIn 1.2s ease-out .5s both,rubyShimmer 7s linear 1.7s infinite,rgMagicGlow 6s ease-in-out 1.7s infinite}
  .energy-hero h1 em::before{animation:rgSpark 2.8s ease-in-out 1.8s infinite}
  .energy-hero h1 em::after{animation:rgSpark 3.4s ease-in-out 3.1s infinite}
}
@media (prefers-reduced-motion:reduce){
  .energy-hero h1 em::before,.energy-hero h1 em::after{opacity:1}
}
.energy-hero h1 span{text-shadow:none;filter:drop-shadow(0 3px 0 #2a2019) drop-shadow(0 0 18px #f7f1ea2e)}