Vorlage:Styles-Startseiten.css

/*** 	Bei Verwendung dieses css-Styles dürfen keine Tabellenüberschriften mit »!« formatiert werden
	Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/


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


.spgrid {
	background-color:white;
	color: #222;
	margin: 1em 0em;
	width: 100%;
	}

.spgrid td {
	background-color: #f8f9fa;
	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%;
	}
.spgrid .colspan2 {
	border-right: 0!important;
	}

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

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

table { border: 0; }

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

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

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

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


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

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



/*** Ende Formatierungen Standard ***/


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

@media (max-width:576px) {

table { border: 0; }

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

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

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

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

.spgrid .colspan2 {
	border-right: 1px solid #a2a9b1;
	}

.spgrid .frei {
	display: none;
	}

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