<style>
/* CSS ist super komprimiert */
.DivKerze{  --kerzengröße:40px;   width:var(--kerzengröße);  height:calc(var(--kerzengröße) * 2.5);  margin:var(--kerzengröße) auto 20px auto;  position:relative;  display:inline-block}.DivKerze *,.DivKerze *:before,.DivKerze *:after{  position:absolute;  content:""}.Kerze{  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 0 rgba(0,0,0,0.4),inset -20px 0 50px 0 rgba(0,0,0,0.4);  background:#190f02;  background:linear-gradient(#e48825,#e78e0e,#833c03,#4c1a03 50%,#1c0900);   background:linear-gradient(#f44409,#f73309,#ee2209,#ff1103 50%,#fc0009)}.Kerze:before{  box-sizing:border-box;  left:0;  width:100%;  height:calc(var(--kerzengröße) / 3.75);  border-radius:50%;  border:2px solid #d47401;  border:2px solid #d40001;  background:#b86409;  background:radial-gradient(#ffef80,#b86409 60%);  background:radial-gradient(#eaa121,#8e4901 45%,#b86409 80%);   background:radial-gradient(#ff4480,#dd8809 60%);   background:radial-gradient(#e44421,#8e0001 45%,#b82209 80%)}.Kerze:after{  width:calc(var(--kerzengröße) / 4.412);  height:calc(var(--kerzengröße) / 15);  left:50%;  transform:translateX(-50%);  border-radius:50%;  top:calc(var(--kerzengröße) / 10.714);  box-shadow:0 0 20px 0 rgba(0,0,0,0.5);  background:radial-gradient(rgba(0,0,0,0.6),transparent 45%)}.Docht{  width:calc(var(--kerzengröße) / 25);  height:calc(var(--kerzengröße) / 4.17);  top:calc(var(--kerzengröße) * (-0.11333) );  left:50%;  z-index:1;  border-radius:40% 40% 5% 5%;  transform:translateX(-50%);  background:#121212;  background:-webkit-gradient(linear,left top,left bottom,from(#d6994a),color-stop(#4b232c),color-stop(#121212),color-stop(black),color-stop(90%,#e8bb31));  background:linear-gradient(#d6994a,#4b232c,#121212,black,#e8bb31 90%)}.Flamme{  width:calc(var(--kerzengröße) / 6.25);  height:calc(var(--kerzengröße) / 1.25);  left:50%;  transform-origin:50% 100%;  transform:translateX(-50%);  bottom:100%;  border-radius:50% 50% 20% 20%;  background:rgba(255,255,255,1);  background:-webkit-gradient(linear,left top,left bottom,color-stop(80%,white),to(transparent));  background:linear-gradient(white 80%,transparent);  animation:moveFlame 6s linear infinite,enlargeFlame 5s linear infinite}.Flamme:before{  left:0;  width:100%;  height:100%;  border-radius:50% 50% 20% 20%;  box-shadow:0 0 15px 0 rgba(247,93,0,.4),0 -6px 4px 0 rgba(247,128,0,.7)}@keyframes moveFlame{  0%,100%{    transform:translateX(-50%) rotate(-2deg)}  50%{    transform:translateX(-50%) rotate(2deg)}}@keyframes enlargeFlame{  0%,100%{    height:calc(var(--kerzengröße) / 1.25)}  50%{    height:calc(var(--kerzengröße) / 1.07143)}}.Leuchten{  width:calc(var(--kerzengröße) / 5.7692);  height:calc(var(--kerzengröße) / 2.5);  border-radius:50% 50% 35% 35%;  left:50%;  top:calc(var(--kerzengröße) * (-0.32) );  transform:translateX(-50%);  background:rgba(0,133,255,.7);  box-shadow:0 -40px 30px 0 #dc8a0c,0 40px 50px 0 #dc8a0c,inset 3px 0 2px 0 rgba(0,133,255,.6),inset -3px 0 2px 0 rgba(0,133,255,.6)}.Leuchten:before{  width:70%;  height:60%;  left:50%;  transform:translateX(-50%);  bottom:0;  border-radius:50%;  background:rgba(0,0,0,0.35)}.Flackern{  width:calc(var(--kerzengröße) / 1.5);  height:calc(var(--kerzengröße) / 0.83333); left:50%; top:-55%; transform:translateX(-50%); border-radius:50%; background:#ff6000; filter:blur(60px); animation:blinkIt .1s infinite}@-webkit-keyframes blinkIt{ 50%{ opacity:.8}}@keyframes blinkIt{ 50%{ opacity:.8}}
</style> 
 

  <div class="DivKerze">
          <div class="Kerze"  style="height:45px">
            <div class="Flackern"></div>
            <div class="Docht"></div>
            <div class="Leuchten"></div>
            <div class="Flamme"></div>
          </div>
        </div> 
 
 <div class="DivKerze">
          <div class="Kerze"  style="height:55px">
            <div class="Flackern"></div>
            <div class="Docht"></div>
             <div class="Leuchten"></div> 
            <div class="Flamme"></div> 
          </div>
        </div>
 
 <div class="DivKerze">
          <div class="Kerze"  style="height:65px">
               <div class="Flackern"></div> 
            <div class="Docht"></div>
              <div class="Leuchten"></div> 
             <div class="Flamme"></div> 
          </div>
        </div>
 
  <div class="DivKerze">
          <div class="Kerze">
           <!--   <div class="Flackern"></div> -->
            <div class="Docht"></div>
           <!--   <div class="Leuchten"></div> -->
         <!--    <div class="Flamme"></div> -->
          </div>
        </div> 
<!--   Schöner Zweig mit Lichtern unter den Kerzen -->
      <img src="//files.homepagemodules.de/b920350/a_52_c4a34906.png" style="max-width:265px; margin-top:-70px;">