@charset "UTF-8";
/*
Theme Name: Misfit mit Intro
Author: das parsmedia Team
Author URI: http://parsmedia.info/
Description:
Version: 1.0.0
*/

@charset "UTF-8";

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('./fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('./fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* ===============================================================================
	html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
	v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark ====================== */
	
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0; padding:0; border:0; outline:0;
	font-size:100%; /* Correct text resizing oddly in IE6/7 when body font-size is set using em units */
	vertical-align:baseline;
	background:transparent; }

input{
	-web-kit-border-radius: 0;
	border-radius: 0;
}
	
/* =============================================================================
	HTML5 BOILERPLATE ======================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* Corrects block display not defined in IE6/7/8/9 & FF3 */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* Corrects inline-block display not defined in IE6/7/8/9 & FF3 */
audio:not([controls]) { display:none; height:0; } /* Prevents modern browsers from displaying 'audio' without controls; Remove excess height in iOS5 devices */
[hidden] { display: none; } /* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4; Known issue: no IE6 support */

html {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%; }


button, input, select, textarea {
	font: 100% sans-serif; /* Correct font-size not inheriting in all browsers */
	margin: 0; /* Remove margins in FF3/4 S5 Chrome */
	vertical-align: baseline; *vertical-align: middle; } /* Define consistent vertical alignment display in all browsers */

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

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

/* Display hand cursor for clickable form elements, Allow styling of clickable form elements in iOS & Correct inner spacing displayed oddly in IE7 (doesn't effect IE6): */
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *width:auto; *overflow: visible; }

button[disabled], input[disabled] { cursor: default; } /* Re-set default cursor for disabled elements */

/* Consistent box sizing and appearance: */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

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

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

/* Remove text-shadow in selection highlight: */
::-moz-selection { background: gray; color: #fff; text-shadow: none; }
::selection      { background: gray; color: #fff; text-shadow: none; }

img { -ms-interpolation-mode: bicubic; /* Improve image quality when scaled in IE7 */
	vertical-align: middle; } /* Remove the gap between images and borders on image containers */

svg:not(:root) { overflow: hidden; } /* Correct overflow not hidden in IE9 */

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

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } /* Correct color not inheriting in IE6/7/8/9 & alignment displayed oddly in IE6/7 */

/* tables still need cellspacing="0" in the markup */
table { border-collapse: collapse; border-spacing: 0; }
td, td img { vertical-align: top; }

/* =============================================================================
	TYPOGRAPHIE ============================================================== */

ul, ol { margin: 0 0 1em; padding: 0 0 0 1.5em; }
ol { list-style-type: decimal; }

nav ul, nav ol { padding:0; margin:0; list-style: none; list-style-image: none; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor:help; }

b, strong { font-weight: bold; }

blockquote, q { quotes:none; margin: 1em 40px; }

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

del { text-decoration: line-through; }

dfn, i, em { font-style: italic; margin-right:.2em; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #111; margin: 1em 0; padding: 0; }

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

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* #DE0027eclare monospace font family */

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

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* =============================================================================
   Non-Semantic Helper Classes =============================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none; 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; }

/* Optisch verstecken (auch von Screenreader), aber behalte den Platz im Layout */
.invisible { visibility: hidden; }

/* Der glorreiche CLEARFIX: Aktualisiert, um einen Einsturz der Außenabstände in Kind-Elementen zu verhindern: j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix:before { clear: both; }
.clearfix { zoom: 1; } /* Clearfix-Fix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

.no-click { cursor: default; }

/*
//  =====================================================================
//  Shortcuts ===========================================================

// 	Allgemeines Styling 	[AS]
//	Text Styling 			[TEXT]
//	#masthead 				[HEAD]
//	Hauptmenu 				[NAV]
//	#content 				[CONT]
//	#footer 				[FOOT]

//  =====================================================================
//  Allgemeines Styling ============================================[AS]=
*/

*, *:after, *:before {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	height: 100%;
	width: 100%;
	overflow-x: hidden;	
}

body {
	height: 100%;
	padding: 2em 0;
	
	color: #646567;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.7;
	
	background: url('images/hintergrund.jpg') center center no-repeat fixed;
	background-size: cover;
}

/*
//  =====================================================================
//  Text Styling =================================================[TEXT]=

//  ##### ##### #   # #####
//    #   #      # #    #  
//    #   ###     #     #  
//    #   #      # #    #  
//    #   ##### #   #   #  
*/

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 1em;
	font-size: 1.25em;
	font-weight: 400;
}

p + h1,
address + h1,
p + h2,
address + h2,
p + h3,
address + h3,
p + h4,
address + h4,
p + h5,
address + h5,
p + h6,
address + h6 {
	margin-top: 2em;
}

address {
	font-style: normal;
}

h1 {
	font-size: 1.7rem;
	line-height: 1.8rem;
	margin: 0;
}

h2 {
	color: #383838;
	text-transform: uppercase;
	font-size:1.5rem;
}

h3 {
	color: #383838;
	font-size: 1.125rem;
}

h4 {
	color: #383838;
	font-size: 1rem;
}

.block h2 {
	margin-bottom: 0;
}
.block.double-width h2 {
	margin-bottom: 1em;
}

p, 
address {
	font-size: 1em;
	margin-bottom: 1em;
}

p:last-of-type {
	margin-bottom: 0;
}

.like-a,
a {
	color: #383838;
	border-bottom: 1px dotted;
	text-decoration: none;
	
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.like-a:hover,
a:hover {
	border-bottom-color: transparent;
}

a.button {
	display: inline-block;
	padding: 0.25em 3em 0.25em 0.5em;
	border: 1px solid;
	margin-top: 3em;
	position: relative;
}

a.button:after {
	content: '';
	
	display: block;
	height: 1.7em;
	width: 1.7em;
	
	position: absolute;
	top: 0.25em;
	right: 0.25em;
	
	background: url('graphics/icon-link.png') no-repeat center center;
	background-size: contain;
}

.ie a.button:after {
	background-image: url('graphics/icon-link-ie.png');
}

table {
	margin-bottom: 1em;
}

th,
td {
	font-size: 1em;
	padding-right: 16px;
	padding-right: 1rem;
}

th {
	text-align: left;
	font-weight: 400;
}

td + td:before {
	content: '|';
	margin-left: -8px;
	margin-left: -0.5rem;
	margin-right: 8px;
	margin-right: 0.5rem;
}

@media screen and (max-width: 479px) {
	tr {
		display: block;
		margin-bottom: 1em;
	}
	
	th,
	td {
		display: block;
		width: 100%;
	}
	
	td + td:before {
		content: none;
	}
}

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

hr {
	border-color: currentColor;
}

.missing {
	color: red;
}

/*
//  =====================================================================
//  Content Styling ==============================================[CONT]=

//   ###   ###  #   # ##### ##### #   # ##### 
//  #   # #   # ##  #   #   #     ##  #   #   
//  #     #   # # # #   #   ###   # # #   #   
//  #   # #   # #  ##   #   #     #  ##   #   
//   ###   ###  #   #   #   ##### #   #   #   
*/

article {
	display: block;
	height: 100%;
	
	text-align: center;
}

@media screen and (min-width: 1273px) {
	article:before {
		content: '';
		
		display: inline-block;
		vertical-align: middle;
		width: 0px;
		height: 100%;
	}
}

.logo {
	width: calc( 100% + 4rem );
	margin: -2rem 0 2rem -2rem;
}

@media screen and (min-width: 640px) {
	.logo {
		width: calc( 100% + 6rem );
		margin: -3rem 0 3rem -3rem;
	}
}

.logo a {
	border: 0;
	display: block;
}

.logo img {
	width: 100%;
	border-radius: calc( 1rem - 1px ) calc( 1rem - 1px ) 0 0;
}

.logo-text {
	width: 12rem;
	height: auto;
	margin-bottom: 1rem;
}

.block {
	display: inline-block;
	vertical-align: middle;
	width: 94%;
	max-width: 600px;
	padding: 2em;
	margin: 2em auto;
	
	position: relative;
	
	background: white;
	border-radius: 1em;
	box-shadow: 0 0 10px 0 rgba( 0, 0, 0, .3 );
	text-align: left;
}

@media screen and (min-width: 1200px) {
	.block {
		margin: 2em 1em;
	}
}

.ie .block {
	max-width: 536px;
}

.block.double-width {
	max-width: 1232px;
	max-width: -webkit-calc( 1200px + 2em );
	max-width: -moz-calc( 1200px + 2em );
	max-width: calc( 1200px + 2em );
}

.ie .block.double-width {
	max-width: 1168px;
}

@media screen and (min-width: 640px) {
	.block {
		padding: 3em;
	}

	.ie .block {
		max-width: 504px;
	}

	.ie .block.double-width {
		max-width: 1136px;
	}
}

.infobox {
	display: flex;
	grid-gap: 1rem;
	align-items: center;
	border-bottom: 0;
}

.infobox span span {
	border-bottom: 1px dotted;
}

.impressum {
	position: absolute;
	top: 100%;
	margin-top: 1em;
	right: 0;
	
	display: table;
	padding: .25rem 1rem;
	color: #383838;
	background: white;
	border: 0;
	border-radius: .5rem;
	box-shadow: 0 0 10px 0 rgba( 0, 0, 0, .3 );
}

#impressum {
	display: block;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	
	-webkit-transition: opacity 0.4s ease;
	-moz-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
}

#impressum:target{
	max-height: 9999em;
	opacity: 1;
}

.ie #impressum {
	max-height: 9999em;
	opacity: 1;
}

.passi {
	background-color:#76b72b;
	margin: -3rem -3rem 0 -3rem;
	color: white;
	padding: 1rem;
	border-radius: 1em 1em 0 0;
	text-align: center;
}

@media screen and (max-width: 639px) {
	.passi {
		margin: -2rem -2rem 0 -2rem;
	}
}