<style>
.DivKerze {
  --kerzengröße: 40px;     /* Größe der Kerze: 30px bis 50px */
  --KerzenFarbe: #f40009;  /* Rot: #f40009; //  Lila: #800080; // Weiß: #f5f5f5; */
}
 
.DivKerze {width: var(--kerzengröße); height: calc(var(--kerzengröße)*2.5); margin: var(--kerzengröße) calc(var(--kerzengröße)/12) 0 calc(var(--kerzengröße)/12); position: relative; display: inline-block; vertical-align: top; }.DivKerze *,.DivKerze *:before,.DivKerze *:after {position: absolute;content: ""} .Kerze {background: linear-gradient(var(--KerzenFarbe), var(--KerzenFarbe), var(--KerzenFarbe), var(--KerzenFarbe) 50%, var(--KerzenFarbe));bottom: 0;width: var(--kerzengröße);height: calc(var(--kerzengröße)*2);border-radius: var(--kerzengröße)/calc(var(--kerzengröße)/3.75);box-shadow: inset 20px -30px 50px rgba(0, 0, 0, .4), inset -20px 0 50px rgba(0, 0, 0, .4)} .Kerze:before {background: radial-gradient(var(--KerzenFarbe), #8e0001 45%, #b82209 80%);left: 0;width: 100%;height: calc(var(--kerzengröße)/3.75);border-radius: 50%;border: 2px solid var(--KerzenFarbe);box-sizing: border-box;} .Kerze:after {background: radial-gradient(rgba(0, 0, 0, .6), transparent 45%);width: calc(var(--kerzengröße)/4.4);height: calc(var(--kerzengröße)/15);left: 50%;top: calc(var(--kerzengröße)/10.7);transform: translateX(-50%);border-radius: 50%;box-shadow: 0 0 20px rgba(0, 0, 0, .5);}
.Docht {
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
  width: calc(var(--kerzengröße)/25);
 
  /* height: calc(var(--kerzengröße)/4.17); */
          height: calc(var(--kerzengröße)/3.0);
 
  top: calc(var(--kerzengröße)*-0.11);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 40% 40% 5% 5%;
  z-index: 1
}
      
.Flamme {
  background: linear-gradient(white 80%, transparent);
 
  /*width: calc(var(--kerzengröße)/6.25); */
          width: calc(var(--kerzengröße)/4.0);
 
  height: calc(var(--kerzengröße)/1.25);
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border-radius: 50% 50% 20% 20%;
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite
}
      
.Flamme:before {
  margin: 0 0 0 calc(var(--kerzengröße) / -9);
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 15px rgba(247,93,0,.4), 0 -6px 4px rgba(247,128,0,.7);
}
 
/* Leuchten */
.Leuchten {
  background: rgba(0,133,255,.7);
  width: calc(var(--kerzengröße)/5.77);
  height: calc(var(--kerzengröße)/2.5);
  left: 50%;
  top: calc(var(--kerzengröße)*-0.32);
  transform: translateX(-50%);
  border-radius: 50% 50% 35% 35%;
  box-shadow: 0 -40px 30px #dc8a0c,0 40px 50px #dc8a0c,inset 3px 0 2px rgba(0,133,255,.6),inset -3px 0 2px rgba(0,133,255,.6);
}
.Leuchten:before {
  background: rgba(0,0,0,.35);
  width: 70%;
  height: 60%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50%;
}
 
/* Flackern */
.Flackern {
  background: #ff6000;
  /* width: calc(var(--kerzengröße)/1.5); */
          width: calc(var(--kerzengröße)/1.2);
 
  /* height: calc(var(--kerzengröße)/0.83); */
          height: calc(var(--kerzengröße)/0.5);
  left: 50%;
  top: -55%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(60px);
  animation: blinkIt .1s infinite;
}
 
/* Animationen */
@keyframes moveFlame {0%,100%{transform:translateX(-50%) rotate(-5deg);}50%{transform:translateX(-50%) rotate(5deg);}}
@keyframes enlargeFlame {0%,100%{height:calc(var(--kerzengröße)/1.25);}50%{height:calc(var(--kerzengröße)/1.07);}}
@keyframes blinkIt {50%{opacity:.7;}}
</style>