@charset "utf-8";

/* INDEX.PHP */
* {
	margin: 0;
	box-sizing: border-box;
}

body {
	font-family: "Lucida Sans", sans-serif;
}

.grid-container {
	display: grid;
	grid-template-areas:					
		'bild bild bild bild bild bild bild bild bild info info info'
		'btn1 btn1 btn1 btn1 btn2 btn2 btn2 btn2 btn3 btn3 btn3 btn3'
		'btn4 btn4 btn4 btn4 btn5 btn5 btn5 btn5 btn6 btn6 btn6 btn6'
		'btn7 btn7 btn7 btn7 btn8 btn8 btn8 btn8 btn9 btn9 btn9 btn9'
		'impr impr impr dats dats dats kont kont kont admn admn admn';					
	gap: 10px;
	background-color: white;
	padding: 10px;
}

.grid-container > div {
	padding: 0px; /* vorher 10 */
	font-size: 16px;
}

.item1 {
	grid-area: bild;
}

.item1_alt {
	grid-area: bild;
	background-image: url('Bilder/kopf.jpg');
	background-size: auto;
	background-repeat: no-repeat;
}

.item2 {
	grid-area: info;
	/* border: 1px solid blue; */
}

.item2 ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.item2 li {
	padding: 8px;
	margin-bottom: 7px;
	border: 2px solid red;
	background-color: #fbfbef;
	text-align: center;
	color: black;
	font-size: 20px;
}

.item6 {
	grid-area: btn1;
	background-color: #8258fa;
	text-align: center;
	color: black;
}

.item6 > p,
.item7 > p,
.item8 > p,
.item9 > p,
.item10 > p,
.item11 > p,
.item12 > p,
.item13 > p,
.item14 > p {
	font-size: 50px;
	padding: 10px;
}

.item6:hover {				
	background-color: green;
	cursor: pointer;
}

.item7 {
	grid-area: btn2;				
	background-color: #8258fa;
	text-align: center;
	color: black;
}			

.item7:hover {				
	background-color: green;
	cursor: pointer;	
}

.item8 {
	grid-area: btn3;
	background-color: #8258fa;
	text-align: center;
	color: black;				
}			

.item8:hover {				
	background-color: green;
	cursor: pointer;
}

.item9 {
	grid-area: btn4;
	background-color: #8258fa;
	text-align: center;
	color: black;
}

.item9:hover {				
	background-color: green;
	cursor: pointer;
}

.item10 {
	grid-area: btn5;
	background-color: #8258fa;
	text-align: center;
	color: black;
}

.item10:hover {				
	background-color: green;
	cursor: pointer;
}

.item11 {
	grid-area: btn6;
	background-color: #8258fa;
	text-align: center;
	color: black;
}

.item11:hover {				
	background-color: green;
	cursor: pointer;
}

.item12 {
	grid-area: btn7;
	background-color: #8258fa;
	text-align: center;
	color: black;
}

.item12:hover {				
	background-color: green;
	cursor: pointer;
}

.item13 {
	grid-area: btn8;
	background-color: #8258fa;
	text-align: center;
	color: black;
}

.item13:hover {				
	background-color: green;
	cursor: pointer;
}

.item14 {
	grid-area: btn9;
	background-color: #8258fa;
	text-align: center;
	color: black;
	
	pointer-events: none;
	cursor: default;
	color: gray;
}

.item14:hover {				
	background-color: green;
	cursor: pointer;
}

.item15 {
	grid-area: impr;
	background-color: black;
	text-align: center;
	color: white;
}

.item15:hover {				
	color: red;
}

.item15 > p,
.item16 > p,
.item17 > p,
.item18 > p {
	font-size: 25px;
	padding: 10px;
}

.item16 {
	grid-area: dats;
	background-color: black;
	text-align: center;
	color: white;
}

.item16:hover {				
	color: red;
}

.item17 {
	grid-area: kont;
	background-color: black;
	text-align: center;
	color: white;
}

.item17:hover {				
	color: red;
}

.item18 {
	grid-area: admn;
	background-color: black;
	text-align: center;
	color: white;
}

.item18:hover {				
	color: red;
}

@media only screen and (max-width: 600px) {
	.item1 {grid-area: 1 / span 12;}
	.item2 {grid-area: 2 / span 12;}				
	.item6 {grid-area: 6 / span 12;}
	.item7 {grid-area: 7 / span 12;}
	.item8 {grid-area: 8 / span 12;}
	.item9 {grid-area: 9 / span 12;}
	.item10 {grid-area: 10 / span 12;}
	.item11 {grid-area: 11 / span 12;}
	.item12 {grid-area: 12 / span 12;}
	.item13 {grid-area: 13 / span 12;}
	.item14 {grid-area: 14 / span 12;}
	.item15 {grid-area: 15 / span 12;}
	.item16 {grid-area: 16 / span 12;}
	.item17 {grid-area: 17 / span 12;}
	.item18 {grid-area: 18 / span 12;}
}

img {
	width: 100%;
	height: auto;
}