@charset "utf-8";/* © 2016 eckblick GbR */

@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic } 

@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic } 

@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic }

@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic }

@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal } 
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic }

html { font-family: "Open Sans", "Helvetica Neue", sans-serif; font-weight: 400 } 

html, body, #page {width:100%}
html {height:100%; min-height:100vh; min-height:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-family: "Open Sans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"}
html, body {background-size:103.33%; background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed; }
body, #page {display:block; margin:0}
body {cursor:default; line-height:1.2; position:absolute}
#page {position:relative; display:inline-block;}
.clear {clear:both; content:""}
header, main, footer, nav, figure, article, aside, details, section, summary {position:relative; float:left; display:block}
header, main, footer, nav {width:100%}
audio, canvas, video {display:inline-block}
nav .container, header .container, main .container, footer .container {display:block; margin:auto}
nav .container { text-align:center;}
figure {background-position:center; background-repeat:no-repeat}
.container {position:relative}
main .container {min-height:480px; min-height:60vh;}
footer .container {min-height:90px; }
p {-moz-hyphens:auto; -o-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; display:block; float:left; line-height:1.25; margin-bottom:32px}
* p:last-child {margin-bottom:8px}
p:empty {display:none}
hr {-moz-box-sizing:content-box; box-sizing:content-box; height:0px; border-bottom:0.67px solid #d7d7d7; margin-top:-1.67px; margin-bottom:14px}
textarea, textarea:active, textarea:focus, input, input:active, input:focus, button, .button, button:active, button:focus {outline:none; border:none; line-height:1.2}
input, select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {display:block; vertical-align:middle; width:98%; padding:12px 1%; line-height:1.2}
input:focus, select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus {line-height:1.2}
input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, input:-moz-placeholder, select:-moz-placeholder, textarea:-moz-placeholder, input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="datetime"]:-moz-placeholder, input[type="date"]:-moz-placeholder, input[type="month"]:-moz-placeholder, input[type="time"]:-moz-placeholder, input[type="week"]:-moz-placeholder, input[type="number"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="url"]:-moz-placeholder, input[type="search"]:-moz-placeholder, input[type="tel"]:-moz-placeholder, input[type="color"]:-moz-placeholder, input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="color"]::-moz-placeholder, input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="month"]:-ms-input-placeholder, input[type="time"]:-ms-input-placeholder, input[type="week"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="color"]:-ms-input-placeholder {color:rgba(180,180,180,1.00); line-height:1.2}
button, input, select, textarea {font-family:inherit; margin:6px 0; line-height:1.2}
button, select, option, .button {cursor:pointer}
button, .button, input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance:button; cursor:pointer}
button[disabled] {cursor:default; opacity:0.67}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box; padding:0}
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-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0}
textarea {overflow:auto; vertical-align:top; resize:none}
label {display:block}
table {width:100%; border-collapse:collapse; border-spacing:0}
th, td {padding:4px; text-align:left}
table th:empty, table td:empty {border:none}
p, blockquote, pre, ol, ul, form, table, th, td, caption, hr {margin:0; padding:0}
blockquote, q {quotes:none}
blockquote:after, blockquote:before, q:after, q:before {content:""}
ul, ol, blockquote, p, table, pre {margin-bottom:20px}
ul, ol {list-style: none outside none; margin-left:48px}
li > ul, li > ol {margin-bottom:0}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a, h8 a, h9 a {display:inline; color:inherit;}
h1 {font-size:200%}
h2 {font-size:167%}
h3 {font-size:140%}
h4 {font-size:120%}
h5 {font-size:110%}
h6, h7, h8, h9, h10, h11, h12 {font-size:100%}
a, a:visited, a:focus, a:active, a:hover {text-decoration:none; outline:0}
img {border:0; -ms-interpolation-mode:bicubic; vertical-align:middle; max-width:100%; height:auto; image-rendering: optimizequality}
img[width], img[height] {max-width:100%; height:auto; margin: 0 auto}
* {border:0px; margin:0; padding:0; list-style:none; outline:0 none}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box}
b, strong {font-weight:bold}
small, .small { font-weight: 400; }
a img {opacity:0.90; border:medium none; vertical-align:middle}
a img:hover	{opacity:1.00}
.desktopOnly {display:block; visibility:visible}
nav 						{width:100%;}
nav ul, footer ul 			{padding:0; margin:0; position:relative}
nav ul li, footer ul li 	{list-style:none;}
nav ul li a, footer ul li a {text-decoration:none;display:block;font-size:1.05em;}
/* Hauptpunkte */
nav .container					{max-width:1280px !important;}
nav .container ul 				{margin:auto; float:none; display:flex; flex-direction:row; flex-wrap:nowrap;
								 justify-content:center; align-items:center; align-content:center; width:100%}
nav .container ul li 			{display:inline-block; text-align:center}
nav .container ul li a 			{padding:14px 22px; display:block}
/* Unterpunkte */
nav .container ul li ul 		{visibility:hidden; position:absolute; left:0; width:100%; display:flex; justify-content:center; z-index:999;}
nav .container ul li ul 		{background-image:url(pic/logo-nav.svg); background-position:center left; background-repeat:no-repeat; background-size:11%; }
nav .container ul li ul.actual  {visibility:visible;}
nav .container ul li ul li 		{flex:0 0 0; order:1;}
nav .container ul li ul li a 	{padding:28px 10px 10px 10px;}

footer ul li 				{align-self:auto;display:inline-block;text-align:center;}
footer ul li a 				{padding: 13px 13px;}
footer ul li ul li a 		{padding: 4px 13px;}

ul li ul, ul li ul   { 	-webkit-transition: visibility 100ms ease-out 100ms;
						-moz-transition: visibility 100ms ease-out 100ms;
						-o-transition: visibility 100ms ease-out 100ms;
						transition: visibility 100ms ease-out 100ms;   }


footer ul {text-align:right; float:right}
div#mNav {display:none}

ul.breadcrumb 					{ display:block; float:left; position:relative; margin-top:8px; }

ul.breadcrumb li  				{ background-image:url(pic/right.svg);
								  background-repeat:no-repeat;
								  background-position:right center }

ul.breadcrumb li:first-child 	{ background-image: url(pic/homeright.svg) !important }
ul.breadcrumb li:first-child a 	{ color:rgba(255,255,255,0.00) !important }

ul.breadcrumb li:last-child 	{ background-image:none }
ul.breadcrumb li a 				{ padding: 4px 13px }


nav a 											{ color:inherit }
nav ul li ul li a,
footer ul li ul li a							{ font-size:90% }
footer ul li a, footer a, ul.breadcrumb li a 	{ color:inherit; opacity:0.54; }
footer ul li a:hover, footer a:hover,
ul.breadcrumb li a:hover,
nav a.actual, footer ul li a.actual	   			{ opacity:0.87; }


div.MAILpopup { 
	text-align:center; 
	display:block !important; 
	position:fixed !important;
	background:rgba(0,0,0,0.9);
	color:rgba(255,255,255,1.00);
	font-size:120%;
	width:100%;
	height:0px;
	left:0px;
	top:0px !important;
	margin:0px;
	line-height:36px;
	z-index:1;
	opacity:0;
	overflow:hidden;
	-webkit-animation-name:mailinfo;
	-webkit-animation-duration:3s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction:normal;
	-webkit-animation-play-state:running;
	animation-name:mailinfo;
	animation-duration:3s;
	animation-timing-function:linear;
	animation-delay:0s;
	animation-iteration-count: 1;
	animation-direction:normal;
	animation-play-state:running }

@-webkit-keyframes mailinfo { 
	0% 	{opacity:0} 
	10% 	{opacity:0; z-index:999; height:48px}	
	30% 	{opacity:1} 
	90% 	{opacity:1; z-index:999; height:48px} 
	100% 	{opacity:0; height:0px; z-index:1 }
}
@keyframes mailinfo{ 
	0% 	{opacity:0} 
	10% 	{opacity:0; z-index:999; height:48px}	
	30% 	{opacity:1} 
	90% 	{opacity:1; z-index:999; height:48px} 
	100% 	{opacity:0; height:0px; z-index:1 }
}


div#googleMapFrame 					{ min-width:256px; min-height:256px; max-width:100%; }
input, textarea, a.button, button  	{ -webkit-border-radius: 0px; border-radius: 0px; } /* Apple FIX */
input[type="submit"],input[type="button"], .button, a.button, button  	{ -webkit-border-radius: 20px; border-radius: 20px; } /* Apple FIX */

input.button, button, .button  { min-width:112px; width:100%; padding:12px 20px 12px 20px !important; background:rgb(188,188,188); color:inherit;
font-size:100%; font-weight:400 !important; display:block; text-align:center !important; -webkit-box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.45); box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.45); }
input.button:hover, button:hover, .button:hover {-webkit-box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.57); box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.57);}

button.speichern, .button.speichern 				{ background: #8bc34a; color:#fff; }
button.speichern:hover, .button.speichern:hover 	{ background: #33691e; color:#fff; }

button.erase, .button.erase 						{ background: #f44336; color:#fff; 
	
	min-width: 12px !important;
	font-size: 0px !important;
	min-height: 43px;
	width: 43px !important;
	border-radius: 21px;
	background-image: url(material/ic_delete_forever_white_18px.svg);  
	background-size:28px; background-position: center; background-repeat: no-repeat;
	padding:0px 0px 0px 0px !important;
	box-sizing:border-box !important;



}
button.erase:hover, .button.erase:hover				{ background: #b71c1c; color:#fff; background-image: url(material/ic_delete_sweep_white_24px.svg); 
	background-size:28px; background-position: center; background-repeat: no-repeat; }

button.edit, .button.edit 							{ background: rgba(0,159,227,0.8); color:#fff; }
button.edit:hover, .button.edit:hover				{ background: rgba(0,159,227,1); color:#fff; }

button.new, .button.new 							{ background: #009688; color:#fff; }
button.new:hover, .button.new:hover					{ background: #004d40; color:#fff; }

button.back, .button.back 							{ background: #2196f3; color:#fff; }
button.back:hover, .button.back:hover  				{ background: #424242; color:#fff; }



/* Input Styling - Google Material Design */

div.group { position:relative; margin-bottom:45px; width:95%; margin:0px 2.5% 32px 2.5%; display:block; float:left; }
div.group.half { width:45%; }

/* Input, Select & Textarea */
div.group input,
div.group textarea   { font-size:18px; padding:10px 10px 10px 5px; display:block; width:100%; border:none; border-bottom:1px solid #bdbdbd; margin:0px 0px 0px 0px;}

div.group select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 18px; width: 100% }
div.group select::-ms-expand { display:none; }
.lt-ie10 div.group select { background-image: none; }
div.group select {
  width:100%;
  border: 0px solid #bdbdbd;
  border-bottom:1px solid #bdbdbd;
  padding:10px 10px 7px 5px;
  background: transparent;
  margin:0px 0px 0px 0px;}
div.group select option { background:white; border:0px solid #fff; outline: 0px none rgba(255,255,255,0.00); line-height:18px; padding-left:18px; }
div.group select option:first-child {  }

div.group textarea { min-height: 192px; }
div.group input:focus, div.group textarea:focus, div.group select:focus { outline:none; }

/* LABEL */
div.group label  { 	  color:#999; font-size:16px; width: 100%; font-weight:normal; position:absolute;
					  pointer-events:none; /* left:5px; top:10px; */
		padding: 3px 5px;
		box-sizing: border-box; top:-20.5px;
					  transition:0.2s ease all;
					  -moz-transition:0.2s ease all;
					  -webkit-transition:0.2s ease all; }

div.group.required label  { font-size:18px; left:5px; top:10px; }
div.group.search label  { font-size:0px; right:5px; left: auto; top:10px; width: 32px; height: 32px; background-image: url('material/ic_search_black_18px.svg'); background-size: 32px; display: block !important; opacity: 0.2;}
div.group.search input:focus ~ label {display: none !important;}


/* active state */
div.group select:focus ~ label,
div.group.required select:valid ~ label,
div.group textarea:focus ~ label,
div.group.required textarea:valid ~ label,
div.group input:focus ~ label,
div.group.required input:valid ~ label  {
	  	top:-20.5px;
	  	font-size:12px;
	  	color: rgba(255,255,255,0.75);
		background: rgba(0,159,227,0.8);
		left:0px; border-top-right-radius: 12px;
	
}

div.group textarea ~ label,
div.group input ~ label,
div.group select ~ label  { color:#999; top:-18px; font-size:14px; }


/* BOTTOM BARS ================================= */
div.group span.bar
{ position:relative; display:block; width:100%; }
div.group span.bar:before,
div.group span.bar:after 	{
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background: rgba(0,159,227,1);
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all; }
div.group span.bar:before { left:50%;  }
div.group span.bar:after  { right:50%; }
/* active state */
div.group input:focus ~ .bar:before,
div.group input:focus ~ .bar:after,
div.group textarea:focus ~ .bar:before,
div.group textarea:focus ~ .bar:after {  width:50%; }


div.group input:focus,
div.group input:focus,
div.group textarea:focus,
div.group textarea:focus { color: rgba(255,255,255,1); background: rgba(0,159,227,0.8); }




/* HIGHLIGHTER ================================== */
div.group span.highlight {
  position:absolute;
  height:60%;
  width:50%;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5; }
/* active state */
div.group input:focus ~ .highlight,
div.group textarea:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease; }
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from  { background: rgba(0,159,227,1); }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
  from  { background: rgba(0,159,227,1); }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
  from  { background: rgba(0,159,227,1); }
  to 	{ width:0; background:transparent; }
}

@media
only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1),
only screen and (max-width: 765px) { div.group.half { width:95%; } div.group.half:nth-child(2) { margin-top:0px; } } /* Einspaltenlayout Umstellung */