type: custom:stack-in-card
cards:
  - type: gauge
    entity: sensor.helper_max_co2
    name: Luftqualität
    needle: true
    min: 0
    max: 3000
    segments:
      - from: 0
        color: green
      - from: 800
        color: orange
      - from: 1200
        color: red
    card_mod:
      style:
        ha-gauge:
          $: |
            svg.text > .value-text {
              font-size: 3em !important;
            }
            svg {
              height: 3.1em;
            }
        .: |
          ha-card {
            height: 100% !important;
          }
          .name {
            font-size: 0.7em !important;
          }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Luftqualität
          timeout: 20000
          content:
            type: vertical-stack
            cards:
              - type: horizontal-stack
                title: Untergeschoss
                cards:
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;                      
                    }
                    ha-card .name {
                      font-size: 0.7em;
                    }
              - type: horizontal-stack
                title: Erdgeschoss
                cards:
                  - type: gauge
                    entity: sensor.house_ground_floor_family_living_room_ceiling_co2
                    name: Wohnzimmer
                    needle: true
                    min: 0
                    max: 2000
                    segments:
                      - from: 0
                        color: green
                      - from: 800
                        color: orange
                      - from: 1200
                        color: red
                    card_mod:
                      style:
                        ha-gauge:
                          $: |
                            svg.text > .value-text {
                              font-size: 3em !important;
                            }
                            svg {
                              height: 3.1em;
                            }
                        .: |
                          ha-card {
                            height: 100% !important;
                          }
                          .name {
                            font-size: 0.7em !important;
                          }
                  - type: gauge
                    entity: sensor.esphome_eg_bath_co2
                    name: Elternbad
                    needle: true
                    min: 0
                    max: 2000
                    segments:
                      - from: 0
                        color: green
                      - from: 800
                        color: orange
                      - from: 1200
                        color: red
                    card_mod:
                      style:
                        ha-gauge:
                          $: |
                            svg.text > .value-text {
                              font-size: 3em !important;
                            }
                            svg {
                              height: 3.1em;
                            }
                        .: |
                          ha-card {
                            height: 100% !important;
                          }
                          .name {
                            font-size: 0.7em !important;
                          }
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important;                      
                    }
                    ha-card .name {
                      font-size: 0.7em;
                    }
              - type: horizontal-stack
                title: Obergeschoss
                cards:
                  - type: gauge
                    entity: sensor.house_first_floor_parents_ceiling_co2
                    name: Elternschlafzimmer
                    needle: true
                    min: 0
                    max: 2000
                    segments:
                      - from: 0
                        color: green
                      - from: 800
                        color: orange
                      - from: 1200
                        color: red
                    card_mod:
                      style:
                        ha-gauge:
                          $: |
                            svg.text > .value-text {
                              font-size: 3em !important;
                            }
                            svg {
                              height: 3.1em;
                            }
                        .: |
                          ha-card {
                            height: 100% !important;
                          }
                          .name {
                            font-size: 0.7em !important;
                          }
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                  - type: markdown
                    content: " "
                card_mod:
                  style: |
                    ha-card {
                      height: 100% !important; 
                    }                    
                    ha-card .name {
                      font-size: 0.7em;
                    }
            card_mod:
              style: |
                ha-card {
                  height: 100% !important; 
                }                    
                ha-card .name {
                  font-size: 0.7em;
                }