<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="farbBalkenAcht"></div></div>
        <div class="farbe"><div class="farbBalkenNeun"></div></div>
      </div>
      <div class="inhaltsBox">
        <div class="labelBox">U-Wert [W/(m²K)] / Beschreibung</div>
        <div class="textZeileEins">≤ 0,15 / Gasbeton-Blockstein 30 cm mit 16 cm PUR/PIR-Hartschaum (hocheffiziente Dämmung mit WLG 0,028)</div>
        <div class="textZeileZwei">≤ 0,20 / Gasbeton-Blockstein 30 cm mit 14 cm mineralischer Außendämung (WLG 0,035)</div>
        <div class="textZeileDrei">≤ 0,24 / Gasbeton-Blockstein 30 cm mit 12 cm mineralischer Außendämung (WLG 0,04)</div>
        <div class="textZeileVier">≤ 0,35 / Gasbeton-Blockstein 30 cm mit 10 cm mineralischer Außendämung (WLG 0,04)</div>
        <div class="textZeileFuenf">≤ 0,50 / Gasbeton-Blockstein 30 cm mit 5 cm mineralischer Innendämung (WLG 0,04)</div>
        <div class="textZeileAcht">≤ 0,80 / Gasbeton-Blockstein 30 cm, Dämmputz</div>
        <div class="textZeileNeun">> 0,80 / Gasbeton-Blockstein 30 cm</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;
}

.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-8 gap-3 ml-3 pb-3;
}

.farbBox {
  @apply grid grid-rows-8 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;
}

.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>