/* css 1 19-05-06 */
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab:700');
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, img, strong, dl, dt, dd, ol, ul, li,
form, label, button, table, tbody, tfoot, thead, tr, th, td,
fieldset, form, input, textarea,
article, aside, canvas, details, footer, header, hgroup, address,
menu, nav, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-weight: normal;
box-sizing: border-box; -moz-box-sizing:border-box; 
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
ol, ul { list-style: none; }
blockquote { quotes:none; }
blockquote:before, blockquote:after,
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline:1; text-decoration: underline; outline-color: #fafafa; }
::selection{background: #fafafa;color: #212121;text-shadow: none;}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

body, html {
	height: 100%; width: 100%;
}
body {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-weight: 400;
    line-height: 1.5;
    background: #212121;
    color: #fafafa;
}

h1, h2, h3, header {
	font-family: "Roboto Slab", "Hoefler Text", "Times New Roman", serif;
	font-weight: 700;
    line-height: 1.2;
	text-transform: uppercase;
	position: relative;
	padding: 1em 0 0.4em 0;
}
h1 {
	font-size: 2em;
	margin-top: 1em;
}
h2 { font-size: 1.5em; }
/*
a {
	color: inherit;
	text-decoration: underline;
	-webkit-tap-highlight-color: #FF8308;
}
a:hover { color: #FF8308; }
a:active { color: #D0021B; }
*/
p { margin-bottom: 0.4em; }

a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 0% 2px;
	transition: background-size cubic-bezier(0,.5,0,1) 0.3s;
	-webkit-tap-highlight-color: #FF8308;
}

a:hover, a:focus {
	text-decoration: none;
	background-size: 100% 2px;
	color: #FF8308;
}
a:active { color: #D0021B; }


img {
    color: #fff;
    max-width: 100%;
}
/* ---   bausteine   --- */
.page {
	width: 100%;
	padding: 2em;
}
header, article {
	width: 100%;
	max-width: 60em;
	position: relative;
	margin: 1em auto;
}

header {
	padding-top: 2.5em;
}

/* --- main --- */

.does {
	padding-left: 35.7%;
}
.keks {
	margin-top: 6em;
	padding-left: 35.7%;
	font-size: 70%;
}
.coach {
	padding-right: 64.3%
}

@media (min-width: 1285px) {
	p { font-size: 1.3em; }
}
@media (max-width: 766px) {
	.does, .coach, keks {
		padding: 0;
		width: 100%;
	}
	h1 { font-size: 1.5em;}
	h2 { font-size: 1.2em}
}


a, header, footer, div[role="main"], div[role="related"] {
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	-ms-transition:all 0.2s linear;
	transition:all 0.2s linear;
}