
.grid-box {
    width: 100vh;
    height: 100vh;
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows:30px 150px 30px 150px 30px 150px 30px 150px;
    gap: 10px;
}
/**   Erster Block   *****/
.box-11 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 1 / 2;
    grid-column: 1 / 5;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;
}
.box-21 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
.box-22 {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.box-23 {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
}
.box-24 {
    grid-row: 2 / 3;
    grid-column: 4 / 5;
}
.box-25 {
    grid-row: 2 / 3;
    grid-column: 5 / 6;
}
/**   Zweiter Block   *****/
.box-31 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-32 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-33 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 3 / 4;
    grid-column: 3 / 4;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-34 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 3 / 4;
    grid-column: 4 / 5;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-41 {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
}
.box-42 {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
}
.box-43 {
    grid-row: 4 / 5;
    grid-column: 3 / 4;
}
.box-44 {
    grid-row: 4 / 5;
    grid-column: 4 / 5;
}
/**   Dritter Block   *****/
.box-51 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 5 / 6;
    grid-column: 1 / 5;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-61 {
    grid-row: 6 / 7;
    grid-column: 1 / 2;
}
.box-62 {
    grid-row: 6 / 7;
    grid-column: 2 / 3;
}
.box-63 {
    grid-row: 6 / 7;
    grid-column: 3 / 4;
}
.box-64 {
    grid-row: 6 / 7;
    grid-column: 4 / 5;
}
/**   Vierter Block   *****/
.box-71 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 7 / 8;
    grid-column: 1 / 2;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-72 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 7 / 8;
    grid-column: 2 / 3;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-73 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 7 / 8;
    grid-column: 3 / 4;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-74 {
    color: var(--schwarzfarbe);
    background: var(--goldrotfarbe);
    grid-row: 7 / 8;
    grid-column: 4 / 5;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;    
}
.box-81 {
    grid-row: 8 / 9;
    grid-column: 1 / 2;
}
.box-82 {
    grid-row: 8 / 9;
    grid-column: 2 / 3;
}
.box-83 {
    grid-row: 8 / 9;
    grid-column: 3 / 4;
}
.box-84 {
    grid-row: 8 / 9;
    grid-column: 4 / 5;
}
/**   Footer Block   *****/
.box-91 {
    background: var(--schwarzfarbe);
    color: var(--gelbfarbe);
    grid-row: 9 / 10;
    grid-column: 1 / 5;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;
}    