Vorlage:Styles-Startseiten.css

/*** Formatierungen für Alle ***/


.spgrid {
    background-color:white;
    color: #222;
    margin: 0em 0;
    border: 0;
    }

.spgrid td {
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.1em;
    line-height:1.4;
    }

.spgrid .Leerzeile {
  border-left: 0; 
  border-right: 0; 
  background: white;
  }


.spgrid tr {
	display: grid;
	grid-template-columns: 50% 50%;
	width: 100%;
}

/*** Ende Formatierungen für Alle ***/

/*** Formatierungen Standard (=Monitor) ***/

.spgrid tr > td:nth-child(1) {
	padding: 15px;
	grid-column: 1 / 2;
	grid-row: 1;
	background-color: #eaecf0;
	border: 1px solid #a2a9b1;
}

.spgrid tr > td:nth-child(2) {
	padding: 15px;
	grid-column: 2 / 3;
	grid-row: 1;
	background-color: #eaecf0;
	border: 1px solid #a2a9b1;
}

.spgrid tr > td:nth-child(3) {
	padding: 15px;
	grid-column: 1 / 2;
	grid-row: 2;
	background-color: #f8f9fa;
	border: 1px solid #a2a9b1;
}

.spgrid tr > td:nth-child(4) {
	padding: 15px;
	grid-column: 2 / 3;
	grid-row: 2;
	background-color: #f8f9fa;
	border: 1px solid #a2a9b1;
}

/*** Ende Formatierungen Standard ***/


/*** Formatierungen für Breakpoint xs ***/

@media (max-width:576px) {

.spgrid tr > td:nth-child(1) {
	padding: 15px;
	grid-column: 1 / 3;
	grid-row: 1;
	background-color: #eaecf0;
	border: 1px solid #a2a9b1;
}

.spgrid tr > td:nth-child(2) {
	padding: 15px;
	grid-column: 1 / 3;
	grid-row: 3;
	background-color: #eaecf0;
	border: 1px solid #a2a9b1;
}

.spgrid tr > td:nth-child(3) {
	padding: 15px;
	grid-column: 1 / 3;
	grid-row: 2;
	background-color: #f8f9fa;
	border: 1px solid #a2a9b1;
}

.spgrid tr > td:nth-child(4) {
	padding: 15px;
	grid-column: 1 / 3;
	grid-row: 4;
	background-color: #f8f9fa;
	border: 1px solid #a2a9b1;
}


} /*** Ende Formatierungen für Breakpoint xs ***/