h1 {
	font-family: sans-serif;
	font-size: 1.5rem;
	letter-spacing: 1px;
	text-align: center;
}

table {
	border-collapse: collapse;
	border: 2px solid rgb(100, 100, 100);
	width: 100%;
	letter-spacing: 1px;
	font-family: sans-serif;
	font-size: 2.5rem;
}

footer {
	font-family: sans-serif;
	font-size: .7rem;
	text-align: center;
}

tfoot {
	font-weight: bold;
}

td,
th {
	padding: 6px; 
	border: 1px solid #ccc;
	text-align: left;
	width: 1% !important;
}

th {
	background: #333; 
	color: white; 
	font-weight: bold; 
}

tr:nth-of-type(odd) { 
	background: #eee; 
}

input {
	text-align: center;
	font-size: 2.5rem;
}

input[type=button] {
	width: 35px;
	height: 50px;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

input[type=reset] {
	width: 100%;
	height: 100px;
}

.plus,
.minus {
	border: 2px solid black; 
}

.plus {
	background-color: green;
}

.minus {
	background-color: red;
}

.anzahl {
	width: 50px;
}

.groesse,
.preis,
.menge,
.summe {
	width: 90px;
}

.summe,
.preis,
.gpreis,
.gesamt,
.menge {
	/*font-size: 1.2rem;*/
	text-align: center;	
	white-space: nowrap;
}

.kosten {
	width: 90px;
}

.son {
	width: 98%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
@media 
only screen and (orientation: portrait)  {

	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 25%; 
	}
	
	td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 30%;
		font-weight: bold;
		padding-right: 10px; 
		white-space: nowrap;
		text-align: left;
	}
	td.gesamt,
	td.gpreis {
		text-align: right;
		font-weight: bold;
	}
	
	td:nth-of-type(1):before { content: "Größe"; }
	td:nth-of-type(2):before { content: "Art"; }
	td:nth-of-type(3):before { content: "Preis"; }
	td:nth-of-type(4):before { content: "Menge"; }
	td:nth-of-type(5):before { content: "Summe"; }
	td.gheader { display: none; }
	td.gesamt:before { content: "Gesamt"; }
	td.gpreis:before { content: "Endbetrag"; }
}
*/