@CHARSET "UTF-8";

html, body { /*Hintergrundbild*/
	background: url(bilder/hintergrund-raufaser.gif) right top;
}

h1 {
	color: red;
	background-color: black;
}

h1 {
	font-size: 20pt; /*tt*/
	font-family: times, sans serif;
	font-weight: lighter;
	text-indent: 2.5em;
}

ul {
	color: yellow;
	background-color: green;
}

ol {
	border: blue 5px solid;
}

o1 {
	line-height: 2.5
}

#box1 {
	box-sizing: content-box;
	width: 300px;
	height: 50px;
	padding: 30px;
	margin: 50px 20px; /* Abstand der Gesamtbox vom Rand*/
	border: 20px solid #666;
	background-color: limegreen;
}

.textmarkerblue {
	background-color: blue;
}

#navi {
	float: left;
	width: 20%;
	background-color: thistle
}

#inhalt {
	margin: 0 10em 0 13em; /* 3-spaltig*/
	background-color: lightblue;
}

#seitenbereich {
	width: 780px;
	margin: 0 0 0 0;
}

#fusszeile {
	clear: both;
	background-color: lightskyblue;
}

#infokasten {
	float: right;
	margin: 0 0 0 0;
	background-color: yellowgreen;
}

#navsteu ul {
	list-style: none; /* keine Aufzählungspunkte */
	background-color: white;
}

a { /* angeklickt oder nicht */
	padding-left: 40px;
	background-repeat: no-repeat;
}

a:link {
	background-color: #00FF00;
}

a:visited {
	background-color: red;
}

#navsteu2 ul {
	list-style: none; /* Steuerung horizontal */
}

#navsteu2 li {
	float: left;
}

#inlineblock {
	display: inline-block;
	background-color: yellow;
	text-align: left;
	height: 30px;
	width: 300px;
}

#rechts { /* Bild nach rechts */
	float: right
}

#boxabspos { /*Positionierung absolut*/
	background-color: hsl(270, 100%, 50%);
	width: 25px;
	height: 17px;
	position: absolute;
	top: 100px;
	left: 500px;
	width: 25px;
}

#fussbereich {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: yellow;
}

#bereichcalc1, #bereichcalc2 {
	float: left;
	border: 5px solid orange;
	background-color: silver;
	width: calc(50% -20px);
	box-sizing: border-box;
}

.bildmitunterschrift {
	position: relative;
}

.bildmitunterschrift img {
	display: block;
}

.bildmitunterschrift span {
	background-color: hsla(0, 0%, 100%, 0.5);
	position: absolute;
	bottom: 0;
	width: 320px;
	line-height: 2em;
	text-align: center;
}

#bereichflex {
	font-size: 5em;
	display: flex;
}

#bereichflex p:nth-child(1) {
	background-color: red;
	flex: 1;
}

#bereichflex p:nth-child(2) {
	background-color: orange;
	flex: 4;
}

#bereichflex p:nth-child(3) {
	background-color: limegreen;
	flex: 2;
}

#wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

header {
	background-color: deepskyblue;
}

#mehrspaltig {
	background-color: silver;
	flex: 1;
	display: flex;
	flex-direction: row;
}

nav {
	background-color: darkgray;
	flex: 1;
}

article {
	background-color: orange;
	flex: 5;
}

aside {
	background-color: gray;
	flex: 1;
}

footer {
	background-color: limegreen;
}