/*     Retix mit Grid *******************************************************************************  */


img {
    max-width: 100%;        /* respons image */
    height: auto;
}





.welcome {
    display: grid;
    grid-template-columns: 5% repeat(10, 1fr) 5%;       /* 12 Spalten */
    grid-template-rows: 300px 300px 300px 300px 300px;                      /* 5 Zeilen */
    grid-row-gap: 2em;
    grid-column-gap: 1em;
    justify-items: stretch;
    align-items: stretch;
    background-image: url("/images/thermo_44444.jpg");
    background-attachment: fixed;
    background-position: right;
    background-repeat:   no-repeat;
    background-size: contain;
    padding-top: 2rem;
    }



/*
.imp-1 {
    background-color: rgba(230, 230, 230, 0.7);
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 1;
    grid-column-end: 1;
    border: 1px black solid;
    padding: 15px;

}
*/


/*

.imp-1 {
    display: grid;
    background-color: rgba(230, 230, 230, 0.7);
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    border: 1px black solid;
    padding: 15px;

}

.imp-2 {
    background-color: rgba(230, 230, 230, 0.7);
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 1;
    grid-column-end: 2;
    border: 1px black solid;
    padding: 15px;

}
*/

/*  für Impressum   */

/*

1. Create the main grid container, grid item, and subgrid items

<div class="main-grid-container">
    <div class="grid-item">
        <div class="subgrid-item"></div>
        <div class="subgrid-item"></div>
    </div>
</div>

.main-grid-container {
    display: grid;
}

2. Make grid item a grid container

.grid-item {
    display: grid;
}

3. Establish a subgrid

Create a subgrid inside the grid item turning it into a grid container.
If you already have a working knowledge of CSS Grid, the only new syntax you'll need to learn to use subgrid is the subgrid value
added to the grid track properties:

.grid-item {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

This way, instead of explicitly defining column and row tracks,
subgrid is established and grid definition is inherited from the .main-grid-container.
You can also create a columns-only or rows-only subgrid, and specify the grid track in the dimension that is not using subgrid.




*/

/*

.welcome {
    display: grid;
    grid-template-columns: 5% 9% 9% 9% 9% 9% 9% 9% 9% 9% 9% 5%;
    grid-template-rows: 300px 300px 300px 300px 300px;
    grid-gap: 20px;
    justify-items: stretch;
    align-items: stretch;
    background-image: url("/images/thermo_4.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-attachment: fixed;
    }




.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 2 / 4 / 3 / 5; }
.div2 { grid-area: 2 / 4 / 3 / 5; }
.div3 { grid-area: 2 / 4 / 3 / 5; }
.div4 { grid-area: 2 / 4 / 3 / 5; }
.div5 { grid-area: 2 / 4 / 3 / 5; }
.div6 { grid-area: 2 / 4 / 3 / 5; }

*/


.welcome-0 {
                                                        /*  */
    background-color: rgba(220, 220, 220, 0.8);
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 1;
    grid-column-end: 10;
    border-left: 7px blue solid;
    border-right: 2px green solid;
    padding: 15px;
    background: linear-gradient(-90deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.8) 50%, rgba(220,220,220,0.8) 100%);
         }

.wel-0 {
                                                        /*  */
    background-color: rgba(220, 220, 220, 0.8);
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 1;
    grid-column-end: 11;
    border-left: 11px black solid;
    border-right: 2px black solid;
    padding: 15px;
    /*
    background: rgb(250,250,250, 0.9);
    */
    background: linear-gradient(-90deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.8) 50%, rgba(220,220,220,0.8) 100%);
         }



.wel-1 {
                                                        /*  */
    background-color: rgba(220, 220, 220, 0.8);
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: 12;

    border-right: 2px red solid;

    padding: 0px;
    position: relative;
    background: linear-gradient(-90deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.8) 50%, rgba(220,220,220,0.8) 100%);
         }

.wel-2 {
                                                        /*  */
    background-color: rgba(230, 230, 230, 0.9);
    grid-row-start: 3;
    grid-column-start: 3;
    grid-row-end: 3;
    grid-column-end: 11;
    border-left: 7px yellow solid;
    border-right: 2px blue solid;
    padding: 15px;
        position: relative;
    background: linear-gradient(-90deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.8) 50%, rgba(220,220,220,0.8) 100%);
         }

.wel-3 {
                                                        /*  */
    background-color: rgba(230, 230, 230, 0.9);
    grid-row-start: 4;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 10;
    border-left: 7px green solid;
    border-right: 2px black solid;
    padding: 15px;
        position: relative;
    background: linear-gradient(-90deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.8) 50%, rgba(220,220,220,0.8) 100%);
         }

.wel-4 {
                                                        /*  */
    background-color: rgba(230, 230, 230, 0.7);
    grid-row-start: 5;
    grid-column-start: 3;
    grid-row-end: 5;
    grid-column-end: 12;
        /*
    border-left: 5px blue solid;

    border-right: 2px green solid;
    padding: 15px;

    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(210,210,210,0.8) 50%, rgba(170,170,170,0.8) 100%);
    */
        }

.welcome-4 {
                                                        /*  */
    background-color: rgba(230, 230, 230, 0.9);
    grid-row-start: 5;
    grid-column-start: 3;
    grid-row-end: 5;
    grid-column-end: 12;
    border-left: 7px saddlebrown solid;
    border-right: 5px red solid;
    padding: 15px;
        position: relative;
    background: rgb(230,230,230,0.9);
    background: linear-gradient(-90deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.8) 50%, rgba(220,220,220,0.8) 100%);
         }



.impress {
    display: grid;
    grid-template-columns: 50% 50%;                       /*  2 Spalten  */
    grid-template-rows: 200px;                      /* 1 Zeile */
    grid-gap: 0px;
    justify-items: stretch;
    align-items: stretch;
    border: 0px;
    padding-top: 50px;
}

.imp_sub1 {
    display: grid;
    background-color: rgba(230, 230, 230, 0);
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 1;
    grid-column-end: 1;
    border: 0px;
    padding: 15px;
}

.imp_sub11 {
    background-color: rgba(230, 230, 230, 0.5);
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 1;
    grid-column-end: 1;
    border: 1px black solid;
    padding: 15px;
}



.imp_sub2 {
    background-color: rgba(230, 230, 230, 0.6);
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 1;
    grid-column-end: 2;
    border: 0px;
    padding: 15px;
}


.dependance {
    display: flex;
    flex-wrap: wrap;
}

.flex-item1 {

    flex-grow: 1;
    flex-shrink: 1;
}

.flex-item2 {

    flex-grow: 1;
    flex-shrink: 1;
}

.flex-item3 {

    flex-grow: 1;
    flex-shrink: 1;
}

.flex-item4 {
    flex-grow: 1;
    flex-shrink:  1;
}



.bordertest {
    display: grid;
    grid-template-columns: 5px repeat(5, 1fr) 5px;       /* 7 Spalten */
    /*
    grid-template-rows: 5px repeat(4, 72px) 5px;
    */
    grid-template-rows: 5px repeat(4, minmax(72px, auto)) 5px;
    background-color: rgba(230, 230, 230, 0);
}

.border1 {
    background-color: rgba(230, 230, 230, 0.1);
    grid-column: 1 / 7;
    grid-row: 1 / 6;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.subborder1 {
    background-color: rgba(0,0,255,  1);
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}


.subborder2 {
    background-color: rgba(255,0,0, 1);
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}


.subborder3 {
    background-color: rgba(0, 255,0,  1);
    grid-column: 7 / 7;
    grid-row: 1 / 3;
}


.subborder4 {
    background-color: rgba(100,100,100, 1);
    grid-column: 6 / 7;
    grid-row: 1 / 2;
}

.bordercontent  {
    grid-column: 2 / 7;
    grid-row: 2 / 6;
    background-color: rgba(230, 230, 230, 0.1);
    padding: 15px;
}


.subbordercent {
    background-color: rgba(100,200,50, 1);
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.subborder5 {
    background-color: rgba(150, 70, 255,  1);
    grid-column: 5 / 7;
    grid-row: 6 / 7;
}


.subborder6 {
    background-color: rgba(255,0,0, 1);
    grid-row: 5 / 6;
    grid-column: 7 / 8;
}

.borderecklo {
    background-color: rgba(100,200,50,1);
    grid-row: 1 / 2;
    grid-column: 1 / 2;

}

.bordereckru {
    background-color: rgba(100,200,50,1);
    grid-row: 6 / 7;
    grid-column: 7 / 8;


}






/*   ++++++++++++++++  subgrid  row and col   ++++++   declaration   +++++++++++++   */


.grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
    display: grid;
    grid-column: 2 / 7;
    grid-row: 2 / 4;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.subitem {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
}

/*   +++++++++++++++     Anwendung     ++++++++++++   */

<div class="grid">
    <div class="item">
        <div class="subitem"></div>
    </div>
</div>


/*  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++    */