/* Sonnenmünze (Logo, Variante E „Lichtkegel“, Rand R2 „glühend“, Tempo ruhig) – bewegte Fassung für Webseiten.
   Einbinden:  <link rel="stylesheet" href="sonnenmuenze.css">
               <span class="sonnenmuenze" style="--s:110px" aria-hidden="true">
                 <span class="sm-kegel"></span><span class="sm-kegel sm-zwei"></span><span class="sm-glut"></span>
                 <span class="sm-muenze"><span class="sm-seite"><b>€</b></span><span class="sm-seite sm-hinten"><b>€</b></span></span>
               </span>
   --s = Durchmesser der Münze; Strahlen und Glühen wachsen mit. Wer „weniger Bewegung“ eingestellt hat, sieht sie still. */
.sonnenmuenze { --s:110px; --dauer:10s; position:relative; display:inline-flex; align-items:center; justify-content:center;
                width:calc(var(--s) * 3); height:calc(var(--s) * 3); flex:none; }
.sonnenmuenze .sm-muenze { width:var(--s); height:var(--s); position:relative; transform-style:preserve-3d; animation:sm-drehen var(--dauer) linear infinite; z-index:3; }
.sonnenmuenze .sm-seite { position:absolute; inset:0; border-radius:50%; backface-visibility:hidden; overflow:hidden; display:flex; align-items:center; justify-content:center;
                          background:radial-gradient(circle at 34% 28%, #fffbe6 0, #ffe27a 22%, #f6bf2e 52%, #dd920f 82%, #b56f06 100%);
                          box-shadow:inset 0 0 calc(var(--s) * .12) calc(var(--s) * .03) rgba(255,250,215,.95), 0 0 calc(var(--s) * .18) calc(var(--s) * .06) rgba(255,236,160,.95), 0 0 calc(var(--s) * .5) calc(var(--s) * .12) rgba(255,190,50,.6); }   /* R2: glühender Rand */
.sonnenmuenze .sm-hinten { transform:rotateY(180deg); }
.sonnenmuenze .sm-seite b { font:800 calc(var(--s) * .5)/1 Georgia,"Times New Roman",serif; color:#a8640a; text-shadow:0 1px 0 #ffec9e, 0 -1px 1px rgba(120,60,0,.5); position:relative; z-index:1; margin-left:calc(var(--s) * -.02); }
.sonnenmuenze .sm-seite::after { content:""; position:absolute; inset:-30%; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(255,255,255,0) 58%);
                                 animation:sm-glanz calc(var(--dauer) / 4) ease-in-out infinite; z-index:2; mix-blend-mode:screen; }
.sonnenmuenze .sm-glut { position:absolute; width:calc(var(--s) * 2.2); height:calc(var(--s) * 2.2); border-radius:50%; z-index:1;
                         background:radial-gradient(circle closest-side, rgba(255,255,235,1) 0, rgba(255,230,140,.95) 20%, rgba(255,196,60,.6) 42%, rgba(255,170,40,.22) 72%, rgba(255,160,40,0) 100%);
                         animation:sm-atmen 3s ease-in-out infinite; }
.sonnenmuenze .sm-kegel { position:absolute; width:calc(var(--s) * 3); height:calc(var(--s) * 3); border-radius:50%; z-index:0; filter:blur(calc(var(--s) * .065));
                          background:repeating-conic-gradient(from 0deg, rgba(255,214,90,0) 0deg, rgba(255,214,90,.55) 7deg, rgba(255,214,90,0) 15deg, rgba(255,214,90,0) 30deg);
                          -webkit-mask:radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 40%, transparent 70%); mask:radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 40%, transparent 70%);
                          animation:sm-kreisen 26s linear infinite; }
.sonnenmuenze .sm-zwei { width:calc(var(--s) * 2.7); height:calc(var(--s) * 2.7); opacity:.7; animation:sm-kreisenR 38s linear infinite;
                         background:repeating-conic-gradient(from 11deg, rgba(255,240,170,0) 0deg, rgba(255,240,170,.6) 4deg, rgba(255,240,170,0) 9deg, rgba(255,240,170,0) 24deg); }
/* klein (z. B. im Menü): nur Münze und Glühen, ohne Strahlen */
.sonnenmuenze.sm-klein { width:calc(var(--s) * 1.5); height:calc(var(--s) * 1.5); }
.sonnenmuenze.sm-klein .sm-kegel { display:none; }
.sonnenmuenze.sm-klein .sm-glut { width:calc(var(--s) * 1.5); height:calc(var(--s) * 1.5); }

/* vier Umdrehungen, jede um eine andere Achse (senkrecht, waagrecht, zwei Diagonalen), dazwischen eine Pause */
@keyframes sm-drehen {
  0%     { transform:rotate3d(0,1,0,0deg);   animation-timing-function:cubic-bezier(.5,0,.3,1); }
  16%    { transform:rotate3d(0,1,0,360deg); }
  24.9%  { transform:rotate3d(0,1,0,360deg); }
  25%    { transform:rotate3d(1,0,0,0deg);   animation-timing-function:cubic-bezier(.5,0,.3,1); }
  41%    { transform:rotate3d(1,0,0,360deg); }
  49.9%  { transform:rotate3d(1,0,0,360deg); }
  50%    { transform:rotate3d(1,1,0,0deg);   animation-timing-function:cubic-bezier(.5,0,.3,1); }
  66%    { transform:rotate3d(1,1,0,360deg); }
  74.9%  { transform:rotate3d(1,1,0,360deg); }
  75%    { transform:rotate3d(1,-1,0,0deg);  animation-timing-function:cubic-bezier(.5,0,.3,1); }
  91%, 100% { transform:rotate3d(1,-1,0,360deg); }
}
@keyframes sm-glanz { 0%, 18% { transform:translateX(-70%); } 40%, 100% { transform:translateX(70%); } }
@keyframes sm-atmen { 0%, 100% { transform:scale(.94); opacity:.88; } 50% { transform:scale(1.06); opacity:1; } }
@keyframes sm-kreisen { to { transform:rotate(360deg); } }
@keyframes sm-kreisenR { to { transform:rotate(-360deg); } }
@media (prefers-reduced-motion:reduce) { .sonnenmuenze * { animation:none !important; } }