/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}



/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html
{
	box-sizing: border-box;
	color: #222;
	font-size: 1em;
	line-height: 1.4;
}

*, *:before, *:after {
  box-sizing: inherit;
}

::-moz-selection
{
	background: #b3d4fc;
	text-shadow: none;
}

::selection
{
	background: #b3d4fc;
	text-shadow: none;
}

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

audio,
canvas,
iframe,
img,
svg,
video { vertical-align: middle; }

fieldset
{
	border: 0;
	margin: 0;
	padding: 0;
}

textarea { resize: vertical; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Links
------------------------------------------------------------------------------------------------- */

a,
a:visited
{
	color: #f08002;
	text-decoration: none;
}

a:hover,
a:focus,
a:active { opacity: 0.5; }


/* Grid12
--------------------------------------------------------------------------- */

.grid-container
{
	width: 100%;
	padding: 0 2em;
}

.row:before, 
.row:after
{
	clear: both;
	content: "";
	display: table;
}

[class*='col-']
{
	float: left;
	min-height: 1px;
	width: 8.33333333333%;
	padding: 5px;
}

.col-1 { width: 8.33333333333%; }
.col-2 { width: 16.6666666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333333333%; }
.col-5 { width: 41.6666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333333333%; }
.col-8 { width: 66.6666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333333333%; }
.col-11 { width: 91.6666666667%; }
.col-12 { width: 100%; }

.right
{
	float: right;
	margin-left: 10px;
}

.center
{
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.gap
{
	margin-right: 10px;
}


.grid-container .test
{
	background-color: #FFDCBB;
	color: #fff;
	height: 100px;
}

/* Fonts
-------------------------------------------------- */

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v29-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}



/* Schriften
------------------------------------------------------------------------------------------------- */
body
{
	font: 1.2em/1.6 Roboto, Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-weight: 300;
}

nav
{
	font-weight: 400;
}


h1,
h2,
h3
{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

strong
{
	font-weight: 400;
}


footer
{
	font-size: .9em;
}

/* Farben
------------------------------------------------------------------------------------------------- 
Blau Text: #405f72
Blau dunkel: #44677c 
Blau hell: #66acd5
Orange: #f08002
*/

body
{
	background-color: #fff;
}

header, 
footer
{
	background-color: #fff;
	color: #405f72;
}

main
{
	color: #405f72;
}

h1,
h2,
h3
{
	color: #66acd5;
}


/* Layout
------------------------------------------------------------------------------------------------- */

body
{
	padding: 0 5px 50px 5px;
	margin: 0;
}

#wrapper
{
	background: #fff;
	margin: 0 auto;
	width: auto;
	max-width: 1000px;
}

header
{
	padding-top: 75px;
}

#logo
{
	text-align: right;
	padding: 15px 0;
}

#logo img
{
	max-width: 200px;
	margin-right: 2em;
}

.illustration
{
	padding: 0 2em;
}

.illustration img
{
	height: 100%;
	width: 100%;
}

main
{
	display: block;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	box-shadow: 0 20px 10px -10px #ccc inset;
	padding: 0 0 10vh 0;
}

footer
{
	padding: 5px 10px 10px 10px;
	box-shadow: 0 20px 10px -10px #ccc inset;
}

/* Headlines
--------------------------------------------------------------------------- */

h1 
{ 
	font-size: 1.8em; 
	margin: 1em 0 .75em 0;
	text-transform: uppercase;
}

h1.nv
{
	text-transform: none !important;
}

h1.space
{
	margin-top: 2em;
}

h2
{
	font-size: 1.4em;
	margin: 1.5em 0 0.5em 0;
}

#impressum h2,
#datenschutz h2
{
	font-size: 1.2em;
	margin: 1.5em 0 0.5em 0;
}

h3
{
	font-size: 1.2em;
	margin: 2em 0 0 0;
}

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

/* Navigation
--------------------------------------------------------------------------- */

nav 
{ 
	background-image: linear-gradient(90deg, #66acd5, #44677c);
	color: #fff; 
	padding-left: 2em;
}

nav span
{
	padding: 0 .5em;
}

nav ul
{
	margin: 0 auto;
}

nav ul { padding: 0; }
nav li { display: inline; }

nav a,
nav a:visited
{
	color: #fff;
	line-height: 2em;
	text-decoration: none;
	text-transform: uppercase;	
}

#willen-it nav .willen-it,
#schwerpunkte nav .schwerpunkte,
#impressum nav .impressum,
#datenschutz nav .datenschutz,
nav a:hover,
nav a:focus,
nav a:active 
{ 
	color: #f08002; 
	opacity: 1; 
}

/* Main
--------------------------------------------------------------------------- */

p.liste
{
	margin-bottom: 0 !important;
}

.liste
{
	margin-top: 0;padding-left: 0;
	list-style-type: none;
}

.zuschlaege
{
	width: 100%;
}

.zuschlaege .col2
{
	text-align: right;
}

#wdauth
{
	margin-top: 3em;
}

#wdauth a,
#wdauth a:visited
{
	color: #405f72;
}

/* Footer
--------------------------------------------------------------------------- */

footer a,
footer a:visited
{
	color: #44677c;
	padding: 6px 0 6px 0;
	text-decoration: none;
}

footer a:hover,
footer a:focus,
footer a:active { color: #66acd5; }

footer .tel,
footer a[href^="tel"]:link,
footer a[href^="tel"]:visited
{
    color: #f08002 !important;
}

/* Footer
-------------------------------------------------- */

/* MS IE11
-------------------------------------------------- */
#footer .logo
{
    width: 70px;
    float: left;
    padding: 1em;
}

#footer .col1,
#footer .col2
{
    float: left;
    padding: .5em;
}

/* 
-------------------------------------------------- */
@supports (display: grid) {
    #footer
    {
        padding: 1.5em 2em;
        margin-bottom: 3em;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 70px 35% 35%;
    }

    #footer .logo
    {
        align-self: start;
        -ms-grid-column-align: center;
        float: none;
        padding: 0;
    }

    #footer .col1,
    #footer .col2
    {
        align-self: start;
        -ms-grid-column-align: center;
        float: none;
    }
}

/* 768px
--------------------------------------------------------------------------- */

@media only screen and (max-width: 768px)
{
	.col-1 { width: 33.33%; }
	.col-2 { width: 50%; }
	.col-3 { width: 50%; }
	.col-4 { width: 100%; }
	.col-5 { width: 100%; }
	.col-6 { width: 100%; }
	.col-7 { width: 100%; }
	.col-8 { width: 100%; }
	.col-9 { width: 100%; }
	.col-10 { width: 100%; }
	.col-11 { width: 100%; }
	.col-12 { width: 100%; }
	
	nav a,
	nav a:visited { padding: 0.5em 0.5em; }
		
	main
	{
		box-shadow: 0 10px 5px -5px #ccc inset;
	}
	
	footer
	{
		box-shadow: 0 10px 5px -5px #ccc inset;
	}
}

/* 600
--------------------------------------------------------------------------- */
@media only screen and (max-width: 600px)
{
	.grid-container
	{
		width: 100%;
		padding: 0 1.01em;
	}
	
	#logo img
	{
		margin-right: 1em;
	}
	
	.illustration
	{
		padding: 0 1em;
	}

	.col-1 { width: 50%; }
	.col-2 { width: 100%; }
	.col-3 { width: 100%; }
	.col-4 { width: 100%; }
	.col-5 { width: 100%; }
	.col-6 { width: 100%; }
	
	nav 
	{ 
		width: 100% !important;
		padding-left: 1em; 
	}
	
	nav ul { width: 100% !important; }
	
	nav li
	{
		float: none !important;
		display: block !important;
		width: 100% !important;
		padding: 0;
	}
	
	nav span
	{
		display: none;
	}
	
	h1 
	{ 
		font-size: 1.3em; 
		margin: 1em 0 0 0;
	}

	h2
	{
		font-size: 1.2em;
		margin: 1.5em 0 0.5em 0;
	}

	h3
	{
		font-size: 1em;
		margin: 2em 0 0 0;
	}
	
	#footer
    {
        padding: 1.5em 1em;
    }
	
	@supports (display: grid) {
    	#footer
    	{
      	  grid-template-columns: 20% 80%;
   	 	}

    	#footer .logo
    	{
			align-self: start;
			-ms-grid-column-align: center;
		}

		#footer .col2
		{
			grid-column-start: 2;
		}
	}
}

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

.hidden
{
	display: none !important;
	visibility: hidden;
}

.visuallyhidden
{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus
{
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible { visibility: hidden; }

.clearfix:before,
.clearfix:after
{
	content: " ";
	display: table;
}

.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.nowrap { white-space: nowrap; }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print
{
	*,
	*:before,
	*:after
	{
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	
	a,
	a:visited { text-decoration: underline; }
	a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	a[href^="#"]:after,
	a[href^="javascript:"]:after { content: ""; }

	pre,
	blockquote
	{
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead { display: table-header-group; }
	tr,
	img { page-break-inside: avoid; }
	img { max-width: 100% !important; }

	p,
	h2,
	h3
	{
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 { page-break-after: avoid; }
}