<div class="bauteilBox">
    <div class="farbBox">
      <div class="labelBox">Farbklasse</div>
        <div class="farbe"><div class="farbBalkenEins"></div></div>
        <div class="farbe"><div class="farbBalkenZwei"></div></div>
        <div class="farbe"><div class="farbBalkenDrei"></div></div>
        <div class="farbe"><div class="farbBalkenVier"></div></div>
        <div class="farbe"><div class="farbBalkenFuenf"></div></div>
        <div class="farbe"><div class="farbBalkenSechs"></div></div>
        <div class="farbe"><div class="farbBalkenSieben"></div></div>
        <div class="farbe"><div class="farbBalkenAcht"></div></div>
        <div class="farbe"><div class="farbBalkenNeun"></div></div>
      </div>
      <div class="inhaltsBox">
        <div class="labelBox">Effizienzzahl / Beschreibung</div>
        <div class="textZeileEins">&#060; 0,4 / Hohe Effizienz / überwiegend erneuerbare Energieträger</div>
        <div class="textZeileZwei">&#060; 0,7 / Hohe Effizienz / erneuerbare und fossile Energieträger</div>
        <div class="textZeileDrei">&#060; 1,0 / Moderne Wärmeerzeuger mit fossilen Energieträgern und zusätzlich erneuerbaren Energien</div>
        <div class="textZeileVier">&#060; 1,1 / Moderne Wärmeerzeuger mit fossilen Energieträgern</div>
        <div class="textZeileFuenf">&#060; 1,2 / Wärmeerzeuger mit fossilen Energieträgern</div>
        <div class="textZeileSechs">&#060; 1,3 / Mindestanforderung an neue Heizkessel</div>
        <div class="textZeileSieben">&#060; 1,5 / Nicht mehr zeitgemäße Technik</div>
        <div class="textZeileAcht">&#060; 1,6 / Ineffiziente Wärmeerzeuger</div>
        <div class="textZeileNeun">> 1,6 / Ineffiziente Wärmeerzeuger mit sehr hohen Verlusten</div>
      </div>
  </div>
  
<style lang="scss">

.bauteilBox {
  @apply grid gap-2 items-stretch p-4 mt-8;
  grid-template-columns: 1fr 5fr; /* 1/6 for farbBox and 5/6 for inhaltsBox */
}

.farbe {
  @apply flex justify-center items-center;
}

.labelBox {
  @apply flex justify-start items-center text-lg font-bold;
}

.farbBalkenEins {
  @apply flex w-full bg-effizienzFarbe-1 rounded-3xl h-6;
}

.farbBalkenZwei {
  @apply flex w-full bg-effizienzFarbe-2 rounded-3xl h-6;
}

.farbBalkenDrei {
  @apply flex w-full bg-effizienzFarbe-3 rounded-3xl h-6;
}

.farbBalkenVier {
  @apply flex w-full bg-effizienzFarbe-4 rounded-3xl h-6;
}

.farbBalkenFuenf {
  @apply flex w-full bg-effizienzFarbe-5 rounded-3xl h-6;
}

.farbBalkenSechs {
  @apply flex w-full bg-effizienzFarbe-6 rounded-3xl h-6;
}

.farbBalkenSieben {
  @apply flex w-full bg-effizienzFarbe-7 rounded-3xl h-6;
}

.farbBalkenAcht {
  @apply flex w-full bg-effizienzFarbe-8 rounded-3xl h-6;
}

.farbBalkenNeun {
  @apply flex w-full bg-effizienzFarbe-9 rounded-3xl h-6;
}

.inhaltsBox {
  @apply grid grid-rows-10 gap-3 ml-3 pb-3;
}

.farbBox {
  @apply grid grid-rows-10 gap-3 pb-3;
}

.textZeileEins {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-1;
}

.textZeileZwei {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-2;
}

.textZeileDrei {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-3;
}

.textZeileVier {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-4;
}

.textZeileFuenf {
  @apply flex justify-start items-center bg-white p-1 border-2 border-effizienzFarbe-5;
}

.textZeileSechs {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-6;
}

.textZeileSieben {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-7;
}

.textZeileAcht {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-8;
}

.textZeileNeun {
  @apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-9;
}

</style>