html {
  box-sizing: border-box;
  background: #d5d5d5;
}

*, ::before, ::after {
  box-sizing: inherit;
}

body {
	max-width: 75%;
	margin: auto;
	background: #fff;
	color: #333;
	font: normal 1em Arial, sans-serif;
}

iframe {
	overflow: hidden; !important;
	align-content: center;
}

/* ======  HEADER ====== */

header {
	position: relative;
	margin: 2em  0  0 0;
  	background: #bbd144;
	background-size: contain;
	padding: 0 0 0.5em;
}

header a h1,
header a p {			/*Die Angaben für h1 müssen mit einem genauen Selektor
  überschrieben werden. */
	color: white;
	border-left: 0;
    display: table;		/* Überschriften und Absätze sind sonst immer 100% breit,
    durch display:table und display: inline-block; für das Elternelement a.ribbon
    wird das Banner nur so breit wie nötig. */
}

.ribbon {
	display: inline-block;
	position: relative;
	margin: 2em 0 2em -1.5em;
	padding: 0.5em 1em;
	background: #8a2be2;
	box-shadow: 0px 1px 3px rgba(0,0,0,.8);
}

.ribbon::before{
	display: block;
	width: 1.5em;
	height: 0;
	position: absolute;
	bottom: -1.5em;
	left: 0em;
	content: "";
	border-bottom: 1.5em solid transparent;
	border-right: 1.5em solid rgb(0, 80, 116);
}

/* ====== CONTENT ====== */

main {
	padding: 1em;
	align-content: center;
	justify-content: center;
}

h1,
h2 {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	padding-left: 1em;
	color: #666;
	text-transform: uppercase;
	border-left:5px solid #4e68AD;
}

p {
	text-align: left;
	line-height: 1.6em;
	padding: 20px 0px
}

a 	{
	color: #4e7a92;
	outline: none;
	text-decoration: none;
}
a:hover, 			/* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
a:focus {
	color: white;
	text-decoration: none;
	background-color: #4e7a92;
}

a.more	{
	float: right;
	font-weight: bold;
}

a.more:after{
	content:" \2192 ";
	font-size:1.2em;
	font-weight:bold;
}