.button2{
	display:inline-block;
	margin:20px;
	text-decoration:none;
	font-family:Arial;
	font-size:16px;
	border:2px solid #bb1111;
	border-radius:5px;
	color:#bb1111;
	background-color:#DCDCDC;
	padding:3px 7px;
}
.button2:hover{
	color:#fff;
	background-color:#bb1111;
}
.button3{
	display:inline-block;
	margin:20px;
	text-decoration:none;
	font-family:Arial;
	font-size:16px;
	border:2px solid #bb1111;
	border-radius:5px;
	color:#696969;
	background-color:#C0E9B5;
	padding:3px 7px;
}
.button3:hover{
	color:#696969;
	background-color:#C0E9B5;
	text-decoration:none;
}
.tooltip {
	color: #c32e04;
	text-decoration: underline;
	cursor: help;
}

[data-tooltip] {
	position: relative;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s;
	display: block;
	position: absolute;
	bottom: 3em;
	left: -6em;
	width: 15em;
	padding: 0.5em;
	z-index: 100;
	color: #000;
	background-color: #ffebe6;
	border: solid 1px #c32e04;
	border-radius: 0.5em;
}
/* erzeugt ein Dreieck */

[data-tooltip]::before {
	content: "";
	position: absolute;
	display: block;
	opacity: 0;
	transition: opacity 0.5s;
	bottom: 1.2em;
	left: auto;
	right: 0;
	border-width: 2em 1em 0;
	border-style: solid;
	border-color: #c32e04 transparent;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
	opacity: 1;
}