/* CSS Document */
/* Tabelle mit Tabellenkopf allgemeines CSS */

.srsPlan table {
	border-collapse: collapse;
}
.srsPlan td, th {
	/*padding: 1em; testweise raus*/
}
.srsPlan th:first-child {
	padding-left: .5em;
}
.srsPlan th:last-child, td:last-child {
	padding-right: .5em;
}
.srsPlan thead th {
	border-bottom: medium solid lightblue;
}
.srsPlan tbody th {
	font-weight: normal;
	text-align: left;
}
.srsPlan th a {
	background: url(pdf.png) no-repeat left center;
	padding: 15px 5px 15px 40px;
}
.srsPlan td {
	text-align: center;
}
.srsPlan td:nth-child(3) {
	text-align: left;
	/*text-align: right; original*/
}
.srsPlan td:nth-child(4) {
	/*color: red;original
	font-weight: bold;original*/
}
.srsPlan td.paid {
	color: green;
	font-weight: normal;
}

/* Anpassung für schmale und sehr schmale Viewports */

@media screen and (max-width: 42em) {
.srsPlan table, tbody, tr {
		display: block;
	}
.srsPlan thead {
		display: none;
	}
.srsPlan tr:first-child {
		border-top: medium solid lightblue;
	}
.srsPlan tr {
		border-bottom: medium solid lightblue;
		padding: 0.5em 0.5em 0.5em;
	}
.srsPlan th::before {
		content: " ";
	}
.srsPlan td:nth-child(1)::before {
		content: "Datum: ";
		min-width: 50%;		
	}
.srsPlan td:nth-child(2)::before {
		content: "Zeit: ";
		min-width: 50%;		
	}
.srsPlan td:nth-child(3)::before {
		content: "Heim: ";
		min-width: 50%;
	}
.srsPlan td:nth-child(4)::before {
		content: "Gast: ";
		min-width: 50%;
	}
.srsPlan td:nth-child(5)::before {
		content: "Matches: ";
		min-width: 50%;
	}
	.srsPlan td:nth-child(6)::before {
		content: "Saetze: ";
		min-width: 50%;
	}
.srsPlan td.paid + td::before {
		content: " ";
	}
.srsPlan tbody th {
		display: block;
		font-weight: bold;
	}
.srsPlan th a {
		font-weight: normal;
	}
.srsPlan td {
		display: inline-block;
		min-width: 35%;
		padding: 0.5em 0.5em;
		text-align: left;
	}
.srsPlan td:nth-child(3) {
		text-align: left;
	}
}
@media screen and (max-width: 33em) {
	td {
		display: block;
	}
	tr {
		padding: .5em .5em 1em;
	}
}