@charset "UTF-8";

/* RESET
========================================================================================================================*/

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-overflow-scrolling:touch;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:16px;
	font:inherit;
	vertical-align:baseline;
}

html {
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	text-size-adjust:100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
	display:block;
}

img {
	border:0;
	outline:none;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}



/* SCHRIFTGRÖßEN
================================================================================================================

Standard-Schriftgröße 100% => 16px		(Zielgröße in px / 16px * 100 = %) 

font-size:300%;						(48px)
font-size:293.75%;			(47px)
font-size:287.5%;				(46px)
font-size:281.25%;			(45px)
font-size:275%;						(44px)
font-size:268,75%;			(43px)
font-size:262.5%;				(42px)
font-size:256.25%;			(41px)
font-size:250%;						(40px)
font-size:243.75%;			(39px)
font-size:237.5%;				(38px)
font-size:231.25%;			(37px)
font-size:225%;						(36px)
font-size:218.75%;			(35px)
font-size:212.5%;				(34px)
font-size:206.25%;			(33px)
font-size:200%;						(32px)
font-size:193.75%;			(31px)
font-size:187.5%;				(30px)
font-size:181.25%;			(29px)
font-size:175%;						(28px)
font-size:168,75%;			(27px)
font-size:162.5%;				(26px)
font-size:156.25%;			(25px)
font-size:150%;						(24px)
font-size:143.75%;			(23px)
font-size:137.5%;				(22px)
font-size:131.25%;			(21px)
font-size:125%;						(20px)
font-size:118.75%;			(19px)
font-size:112.5%;				(18px)
font-size:106.25%;			(17px)

font-size:100%;						(16px)

font-size:93.75%;				(15px)
font-size:87.5%;					(14px)
font-size:81.25%;				(13px)
font-size:75%;							(12px)
font-size:68.75%;				(11px)
font-size:62.5%;					(10px)
font-size:56.25%;				  (9px)
font-size:50%;							  (8px)
font-size:43.75%;		  	  (7px)
font-size:37.5%;					  (6px)
font-size:31.25%;				  (5px)



/* ÜBERSCHRIFTEN
================================================================================================================

Zielwert in px / im body festgelegten Wert in px = Wert in em



/* BILDER FLEXIBEL
================================================================================================================

img {
	max-width:100%;
	height:auto;
}



/* BILDER IM KONTEXT
================================================================================================================

Bildbreite in px / Spaltenbreite in px * 100 = %)

.image {
	float:left / right;
	max-width:%;
	margin:% % % %;
}



/* MARGINS
================================================================================================================

Zielwert in px / Spaltenbreite in px * 100 = %



/* VIDEOS (über HTML5 direkt eingebunden)
================================================================================================================

embed, object, video {
	max-width:100%;
	height:auto;
}

/* VIDEOS (über iframe eingebunden - CSS)
================================================================================================================

.video-container {
	position:relative;
	height:0;
	padding-bottom:56.25%;
	padding-top:30px;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* VIDEOS (über jquery.fitvids.js eingebunden => https://github.com/davatron5000/FitVids.js)
================================================================================================================

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
 $(document).ready(function(){
	 // Target your .container, .wrapper, .post, etc.
	 $(".videocontainer").fitVids();
  });
</script>



/* VIEWPORT META-TAG
================================================================================================================

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">



/* RESPONSIVE DESIGN FÜR MOBILE GERÄTE
================================================================================================================

<meta name="viewport" content="width=device-width, initial-scale=1.0">