:root {
	--co-01: navy;
	--co-02: yellow;
	--co-03: #f0e68c;
	--co-04: orange;
	--co-05: #add8e6;
	--co-06: #5f9ea0;
	--ab-05: 5px;
}

* {
margin: 0;
padding: 0;
font-size: 1em;
line-height: 1.5rem;
}


/*
*	{
	margin: 3px;
	padding: 3px;
	border: 1px dotted black;
	background-image: url(b.png);
	
}
*/


.list {
	border-bottom: 1px solid #9999cc;
	height: 2.5rem;
	background-color: InactiveBorder;
	margin: 0px;
	padding: 5px;
	display: flex;
	justify-content: space-between;
}

.list:first-child {
	border-top: 1px solid #9999cc;
}

.list:nth-child(2n) {
	background-color: ButtonFace;
}
.list:hover {
	background-color: #ccffff;
}

.list_l	{
/*	border: 1px dotted red;*/
}

.list_r	{
/*	border: 1px dotted red;*/
}



a.button-r	{
/*	float: right;	*/
	background-color: #ccffcc;
	padding:  5px 10px;
}

a.button-t	{
	display: block;
	background-color: none;
	border: none;
	padding:  0px 10px;
}


pre.i {
	font-style: italic;
}


#grundkopf, #grundfuss, #grundmitt {
	border: 0px solid black;
}

.back {
	background-color: #2f4f4f;
}

.infolay {
	padding: 15px;
	text-align: center;
	font-size: smaller;
}

.wid {
	min-width: 150px;
	max-width: 850px;
	margin: auto;
	padding: 5px;
	background-color: none;
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
}

#grundmitt .wid {
	min-width: 150px;
	max-width: 850px;
/*	margin: auto;*/
	padding: 5px;
/*	background-color: #dcdcdc;*/
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
}

.side {
	flex-basis: 200px;	
	flex-shrink: 1;
	background-color: none;
}

	.main {
		background-color: none;
		flex-basis: 600px;
		min-width: 300px;
		flex-shrink:	1;
	}

	.aaa {
		color: yellow;
		text-align: center;
		line-height: -0;
		font-size: 3rem;
		margin: 10px;
		padding: 25px;
		height: 20px;
	}
	

	
.art	{
	/*	border: 5px solid #e6aebc;*/
	background-color: #d2eaf1;
	margin: 0px;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 0px 0px 6px -3px #696969;
}


@media only screen and (max-width: 580px) {
  .side {
  	flex-basis: 180px;	
	flex-grow: 1;
  }
}

@media only screen and (max-width: 900px) {
  .wid {
	margin: 0 15px 0 15px;
  }
}
  
@media only screen and (max-width: 600px) {
  .wid {
	margin: 0px 5px 0px 5px;
  }
}

@media only screen and (max-width: 500px) {
  .wid {
	margin: 0px 1px 0px 1px;
  }
}

div#nav {
	background-color: var(--co-05);
	border-bottom: 2px solid red;
}

div#navo {
	background-color: var(--co-06);
	border-bottom: 2px solid #00fa9a;
}

a {
line-height: 2em;
}

a {
text-decoration: none;
	color: maroon;
	margin: 3px;
	background-color: InactiveCaption;
	border: 1px solid maroon;
	padding: 3px;
	border-radius: 5px;
}

a.on {
	background-color: #ffb0b0;
}

a.off {
	background-color: #a8ffa9;
}


a:hover {
	color: InactiveCaption;
	background-color: maroon;
}
/*
<div id="grundkopf"> <div class="back">	<div class="wid">	<div class="aaaaa">
*/

div#grundkopf div.back div.wid div.aaaaa {
	text-align: center;
}

	.alert {
		background-color: #2f4f4f;
		font-weight: 500;
		text-align: center;
		color: #dcdcdc;
		margin: 15px;
		padding: 15px;
		z-index: 99;
	}