@charset "UTF-8";

@-ms-viewport { /*viewport metatag von apple wird nicht von MS und W3C empfohlen*/
	width: extended-to-zoom;
	zoom:1.0;
	}
	
/*
=============================================================================
   HTML5 display definitions
   ========================================================================== */
   
*, *:before, *:after {
	box-sizing: border-box;
	}
	
/*:root { font-size: 16px; }   default 
@media (max-width: 640px){ :root { font-size: 14px; } } 
@media (max-width: 767px){ :root { font-size: 16px; } } 
@media (min-width: 768px){ :root { font-size: 1.6vw; } } 
@media (min-width:1280px){ :root { font-size: 18px; } }
*/

:root { font-size:16px;} /* sets the browserdefault up to 16px */

@media screen and (min-width: 360px) {
  :root {
   /* font-size: -webkit-calc(13px + 4 * ((100vw - 320px) / 1046));
	font-size: calc(13px + 4 * ((100vw - 320px) / 1046));*/
	font-size: -webkit-calc(14px + (22 - 14) * ((100vw - 360px) / (1280 - 360) ));
	font-size: calc(14px + (22 - 14) * ((100vw - 360px) / (1280 - 360) ));
/*14px is the minimum font-size and 22px is the maximum. 360px is the start of the viewport range and1280px is where it should stop scaling*/
  }
}


/**
 * 1. Correct text resizing oddly in IE6/7 when body font-size is using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 * 3. Force vertical scrollbar in non-IE
 * 4. Set default font family 
 */
html { 
	font-size: 100.1%; /* 1*/
	  -webkit-text-size-adjust: 100%; /* 2 */
	  -ms-text-size-adjust: 100.1%; /* 2 */
	font-family: sans-serif; /* 4 */
	text-align:center; /* center the container in IE Browser */
	background-color: transparent;
	}

 body {
	position:relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0.5 ); /* Remove tap highlight  on iOS */
	-webkit-animation: bugfix infinite 1s; 
	}
	
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  	display: block;
	}

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

/**
 * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3
 * 2. Normalize vertical alignment of progress in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
	display: inline-block; /* 1 */
	*display: inline;
	vertical-align: baseline; /* 2 */
	 *zoom: 1;
	}
canvas	 { 
	-ms-touch-action: double-tap-zoom;
	 touch-action: double-tap-zoom; 
	 }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
	display: none;
	height: 0;
	}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden], template {
  	display: none;
	}

/* =============================================================================
   Typography
   ========================================================================== */
   
h1,h2,h3,h4,h5,h6 { font-weight:normal; font-style:normal; vertical-align:baseline; line-height:125%; } 

h1 {
	font-size: 32px; /* Pixel-Fallback für old Browser, muss wie im css üblich oberhalb stehen*/
	font-size: 2rem; /* unit similar to em but relative only to the root element html */
/*  margin: 0.67em 0; */
}
h2 {
	font-size: 22px; 
	font-size: 1.375rem; /* 24/16  */
	margin:0.5rem 0;
}
h3 {
	font-size: 18px; 
	font-size: 1.25rem; /* 20/16  */
	font-weight: 400; 
	font-style:italic;
	margin:0.5rem 0;
}
h4 {
    font-size: 16px; 
	font-size: 1rem;
	}
h5 {
    font-size: 14px; 
	font-size: 0.875rem;
	}
h6 {
	font-size: 12px; 
    font-size: 0.75rem;
	}
a, b, big, dd, del, dl, dt, li,
mark, ol, output, p, strong,
table,  td, th,  tr, ul {
	font-size: 16px;
	font-size: 1.0rem;
	font-weight: normal; 
	line-height:150%;
	}

h4, mark, ol, p, b, big, strong, figcaption, li, small,
table, td, tr, ul {
	-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto;
    hyphens: auto;
	}
	
 /**
 * Address inconsistent and variable font size in all browsers.
 */
figcaption, small {
	font-size: 75%;
	font-weight: lighter;
	line-height: 100%;
	}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	}
sup {
	top: -0.5em;
	}
sub {
	bottom: -0.25em;
	}
	
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome
 * Makes browsers agree. IE + Opera = font-weight: bold. Gecko + WebKit = font-weight: bolder
 */
b, strong {
  font-weight: bold;
}

address, caption, cite, code, dfn, th, var {
	font-style:normal;
	font-weight:normal;
	}

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr,acronym { border:0;}
abbr[title] { border-bottom: 1px dotted; }

blockquote { margin: 1em 40px; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn { font-style: italic; }

/**
 * Address differences between Firefox and other browsers.
 */
hr { 
	display: block; 
	height: 1px; 
	border-top: 1px solid #ccc; 
	margin: 1em 0; 
		-moz-box-sizing: content-box;
   box-sizing: content-box;
   }

ins { background: #ff9; color: #000; text-decoration: none; }

/**
 * Address styling not present in IE 8/9.
 */
mark { background: #ff0; color: #000; }

/** 
 *Redeclare monospace font family
 * Address odd `em`-unit font size rendering in all browsers.
 */
pre, code, kbd, samp { 
	font-family: monospace, serif; 
	font-family: 'courier new', monospace;
	font-size: 1em; 
	}

/**
 * Contain overflow in all browsers
 * Improve readability of pre-formatted text in all browsers 
 */
pre { 
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word;  
	overflow: auto;
	}

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

textarea { resize: vertical; }

/* ==========================================================================
   Links
   ========================================================================== */

a, button, input, select, textarea, lable, summary {
/* killing the 300-350ms touch delay on mobile Browser */
		-webkit-overflow-scrolling: touch;	 
		-ms-touch-action: manipulation;
	touch-action: manipulation;
	}

/* --- follow a-style has to maintain list of order --- */
a { 
	cursor: pointer; 
	white-space:nowrap;
	background-color: transparent; /* Remove the gray background color from active links in IE 10 */
	}    
a:link, a:visited { 
		-webkit-transition: all .1s ease-in-out;
		-moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;  
	}
	 
a:focus, a:hover, a:active  {  
	outline:0; 
	}

a[download] {
  	font-weight: normal;
	}
	
a img { 
  border:none; /* removes blueborder if it is a hyperlink */
}
/*
 * Remove text-shadow in selection highlight
 * These selection declarations have to be separate
  * Customize the background color to match your design.
 */
::-moz-selection {
    background-color: transparent; 
    text-shadow: none;
	}
::selection { 
	text-shadow: none; 
	background-color: transparent; 
	color: highlighttext; 
	}

/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Improve image quality when scaled in IE7
 * 2. Remove the gap between images and borders on image containers in IE 8/9/10
 */
img { 
	-ms-interpolation-mode: bicubic;
	vertical-align: middle; 
	max-width:100%;
	height:auto;
	}

/* For IE9. Without, occasionally draws shapes outside the boundaries of <svg> rectangle */
  overflow: hidden; 
svg:not(:root) { overflow: hidden; }

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
 figure { margin: 0; }

/* =============================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

 td, caption, th {
  padding: 0;
  font-weight: normal;
  vertical-align: top;
}

/* =============================================================================
   Forms
   ========================================================================== */

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
  * 2. Correct text not wrapping in Firefox 3.
 * 3. Remove padding so people aren't caught out if they zero out fieldsets.
 * 4. Correct alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 3*/
   white-space: normal; /* 2 */
  *margin-left: -7px; /* 4 */
  }

/**
 * 1. Correct font size not being inherited in all browsers.
 * 1b. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
    font-size: 100%; /* 1 */
	color: inherit; /* 1b */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
  vertical-align: baseline; 
  *vertical-align: middle;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in the UA stylesheet.
 */
button,
select {
  text-transform: none;
   line-height: normal;
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */
button, input { line-height: normal; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type`input` and others.
  * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 */
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
      *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
  * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
 * Remove inner padding and border in Firefox 4+
 */
button::-moz-focus-inner, 
input::-moz-focus-inner { 
	border: 0; padding: 0; 
	}

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9/10/11
 * 2. Allow only vertical resizing
 */
textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/*--------------------------------
 Functional Styles (Required)
---------------------------------*/

/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

/* Nicolas Gallagher micro clearfix 
*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
	*,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
		color:black !important; /* black prints faster */
		background:transparent !important;
		box-shadow:none !important; 
		text-shadow:none !important;
		filter:none !important;
		}
		
	  	@page { margin: 0.5cm; }
		a, a:visited { text-decoration: underline; }
		a[href]:after { content: " (" attr(href) ")"; }
		abbr[title]:after { content: " (" attr(title) ")"; }
		
 	/*
     * Don't show links for images, or javascript/internal links
     */		
		a[href^="javascript:"]:after, 
		a[href^="#"]:after { 
		content: ""; 
		} 
		[href].print-href:after, .print-href a[href]:not(:empty):not([href^="#"]):after {
		content:" (" attr(href) ")";
		font-weight:normal; 
	  }
		pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
		table, thead { display: table-header-group; }  /* h5bp.com/t */
		tr, img { page-break-inside: avoid; }
		p, h2, h3 { orphans: 3; widows: 3; }
		h2, h3 { page-break-after: avoid; }
		
	  audio, video, img, pre, tr, blockquote { page-break-inside: avoid }
	  audio, video, img { max-width:100% !important }
  }