#uebersicht {
	display: none;
}
.inhalte {
	display: grid;
	grid-template-rows: 2em auto 3em;
	grid-template-areas:  
	"thema"
	"infos"
	"ausw_button";
	text-align: left;
	font-size: 1em;
	padding: 0.3em 0 0.3em 0;
}
.fortschrittsliste {
	display: grid;
	grid-template-rows: 2em auto 3em;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:  
	"thema fort"
	"infos infos"
	"ausw_button ausw_button";
	text-align: left;
	font-size: 1em;
	padding: 0.3em 0 0.3em 0;
}
.inhalte .thema, .fortschrittsliste .thema {
	grid-area: thema;
	color: darkred;
	font-size: 1.3em;
	font-weight: bolder;
	text-align: left;
}
.inhalte .thema img, .fortschrittsliste .thema img {
	display: none;
}
.inhalte .infos, .fortschrittsliste .infos {
	grid-area: infos;
}
.fortschrittsliste .fort {
	grid-area: fort;
}
.inhalte .ausw_button, .fortschrittsliste .ausw_button {
	grid-area: ausw_button;
	border-bottom: 1px solid #a4ceef;
	text-align: right;
	margin: 0.4em 0.4em 0 0;
}
.inhalte ul li, .fortschrittsliste ul li {
	list-style: disc;
	margin-left: 1em;
}
.inhalte input, .fortschrittsliste input {
	background-color: lightgreen;
	color: black;
	border: 2px solid darkgreen;
	padding: 0.2em 0.4em 0.2em 0.4em;
	border-radius: 0.3em;
	font-size: 1em;
}
.inhalte input:hover, .fortschrittsliste input:hover {
	color: white;
	background-color: darkgreen;
	border: 2px solid lightgreen;
	cursor: pointer;
	border-radius: 0.3em;
}
@media all and (min-width: 1024px) {
	#uebersicht {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 2em auto;
		grid-template-areas:  
		"ueber1 ueber2 ueber2 ueber2 ueber2 ueber2 ueber2 ueber2 ueber3 ueber4";
		text-align: left;
		font-size: 1em;
	}
	.inhalte {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:  
		"thema infos infos infos infos infos infos infos infos ausw_button";
		text-align: left;
		font-size: 1em;
		border-top: 1px solid #a4ceef;
		padding: 0.3em 0 0.3em 0;
	}
	.fortschrittsliste {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas:  
		"thema infos infos infos infos infos infos infos fort ausw_button";
		text-align: left;
		font-size: 1em;
		border-top: 1px solid #a4ceef;
		padding: 0.3em 0 0.3em 0;
	}
	#uebersicht #ueber1, #uebersicht #ueber2, #uebersicht #ueber3 {
		font-size: 1.3em;
		font-weight: bolder;
		text-align: left;
	}
	#uebersicht #ueber1 {
		grid-area: ueber1;
		text-align: center;
	}
	#uebersicht #ueber2 {
		grid-area: ueber2;
	}
	#uebersicht #ueber3 {
		grid-area: ueber3;
		text-align: center;
	}
	#uebersicht #ueber4 {
		grid-area: ueber4;
	}
	.inhalte .thema, .fortschrittsliste .thema {
		grid-area: thema;
		color: darkred;
		font-size: 1.3em;
		font-weight: bolder;
		text-align: center;
	}
	.inhalte .thema img, .fortschrittsliste .thema img {
		width: 2em;
		display: inline;
	}
	.inhalte .infos, .fortschrittsliste .infos {
		grid-area: infos;
	}
	.fortschrittsliste .fort {
		grid-area: fort;
		text-align: center;
	}
	.inhalte .ausw_button, .fortschrittsliste .ausw_button {
		grid-area: ausw_button;
		border: 0;
		text-align: center;
		padding: 0;
		font-size: 1em;
	}
	.inhalte h1, .fortschrittsliste h1 {
		color: green;
		font-size: 1.2em;
	}
	.inhalte input, .fortschrittsliste input {
		font-size: 1em;
		margin-top: 0.9em;
	}
	.inhalte .mw20, .fortschrittsliste .mw20 {
		min-width: 7em;
	}
	.inhalte .mw20 input, .fortschrittsliste .mw20 input{
		min-width: 7em;
	}
}