@import 'roboto.css';
@import 'vars.css';

html {
	font-size: 20px;
}
body {
	font-size: 16px;
	line-height: 1;
	font-weight: 300;
	font-family: 'Roboto';
}
h1 {
	font-size: 28px;
	line-height: 1.1;
	font-weight: 400;
	text-align: center;
	margin: 1rem 0 0 0;
}
h2 {
	font-size: 24px;
	line-height: 1;	
	font-weight: 200;
	text-align: center;
	margin: 0 auto;
}
h3 {
	font-size: 22px;
	line-height: 1.1;
	font-weight: 400;
	margin: 0 0 2rem 0;
}
p, ol, ul {
	font-size: 1em;
	line-height: 1.5;
	margin: 0; 
}
p.isSubline {
	font-size: 10px;
	line-height: 1.5;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: .5em;
}
p.isSublineMixed {
	font-size: 10px;
	line-height: 1.5;
	font-weight: 500;
	margin-bottom: .5em;
}
p.isS,
ul.isS,
ol.isS {
	font-size: 14px;
}
p.isEinLeicht,
ol.isEinLeicht,
ul.isEinLeicht {
	margin-left: .5em;
}
p.isEinGanz,
ol.isEinGanz,
ul.isEinGanz {
	margin-left: 1em;
}
p.isEinEinEinhalb,
ol.isEinEinEinhalb,
ul.isEinEinEinhalb {
	margin-left: 1.5em;
}
p.isEinStarkEm,
ol.isEinStarkEm,
ul.isEinStarkEm {
	margin-left: 2em;
}
p.isEinStark,
ol.isEinStark,
ul.isEinStark {
	margin-left: 2rem;
}
p.isHalb,
ol.isHalb,
ul.isHalb,
h3.isHalb {
	margin-bottom: .5em;
}
p.isGanz,
ol.isGanz,
ul.isGanz,
h3.isGanz {
	margin-bottom: 1em;
}
p.isEinEinhalb,
ol.isEinEinhalb,
ul.isEinEinhalb,
h3.isEinEinhalb {
	margin-bottom: 1.5em;
}
h3,
p.isDoppeltEm,
ol.isDoppeltEm,
ul.isDoppeltEm,
h3.isDoppeltEm {
	margin-bottom: 2em;
}
h3,
p.isDoppelt,
ol.isDoppelt,
ul.isDoppelt,
h3.isDoppelt {
	margin-bottom: 2rem;
}
p.isClaim {
	font-size: 18px;
}
ul {
	padding-left: calc(1em + 1rem);
	list-style: none;
}
ul li {
}
ul li:before {
	content: '•';
	width: 1em;
	display: inline-block;
	margin-left: -1em;
}
ol {
	padding-left: calc(1em + 1rem);
}
ol li {
}
a {
	color: inherit;
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}
a.button {
	font-size: 14px;
	line-height: 1;
}
a:hover {
	opacity: .5;
}
b, strong {
	font-weight: 500;
}
table {
	width: 100%;
	font-size: 14px;
}
tbody td {
	border-top: 1px solid var(--isLightGrey);
}
th {
	color: #000;
	font-family: Roboto;
	font-style: normal;
	font-weight: 300;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: left;
	padding: 1em 0;
	vertical-align: top;
	font-size: 12px;
}
th:first-child {
	font-weight: 500; 
}
td {
	color: #000;
	font-family: Roboto;
	font-style: normal;
	font-weight: 300;
	line-height: 1.3;
	padding: 1em 0;
	vertical-align: top;
}
td:first-child {
	font-weight: 500;
	padding-right: 2em;
}

/* ----- RESPONSIVE ----- */
@media only screen and (min-width: 1024px) {
	html {
		font-size: 40px;
	}
	body {
		font-size: 20px;
	}	
	h1 {
		font-size: 48px;
	}
	h2 {
		font-size: 34px;
		text-align: left;
	}
	h3 {
		font-size: 27px;
	}
	p.isClaim {
		font-size: 26px;
	}
	p.isSubline,
	p.isSublineMixed {
		font-size: 12px;
	}
	p.isS,
	ol.isS,
	ul.isS {
		font-size: 18px;
	}
	a.button {
		font-size: 20px;
	}
	th {
		font-size: 14px;
	}
	table {
		font-size: 16px;
	}
}
@media only screen and (min-width: 1280px) {
	h2 {
		font-size: 44px; 
		text-align: left;
	}
	h3 {
		font-size: 30px;
	}
	table {
		font-size: 17px;
	}
}
@media only screen and (min-width: 1480px) {
	h2 {
		font-size: 50px; 
	}
	h3 {
		font-size: 33px;
	}
	table {
		font-size: 18px;
	}
}

/* -------------------- First & Last Child -------------------- */
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, ul:first-child, ol:first-child, form:first-child, hr:first-child, table:first-child {
    margin-top: 0;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, form:last-child, hr:last-child, table:last-child {
    margin-bottom: 0;
}