/*! 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}



/* Styles
------------------------------------------------------------------------------------------------- */
html
{
	box-sizing: border-box;
}

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

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

/* Links
--------------------------------------------------------------------------- */
a,
a:visited
{
	color: #215f9a;
	text-decoration: none;
}

a:hover,
a:focus,
a:active { 
color: #9AC0F0; }

/* Silbentrennung
-------------------------------------------------- */
body
{
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}


/* Fonts
------------------------------------------------------------------------------------------------- */
/* open-sans-300 - latin */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
	src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v15-latin-300-.eot') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300.svg.html') format('svg'); /* Legacy iOS */
	font-display: swap;
}

/* open-sans-regular - latin */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
	font-display: swap;
}

/* open-sans-600 - latin */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
	src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
	font-display: swap;
}

/* Iconfont
-------------------------------------------------- */

@font-face {
	font-family: 'iconfont';
	src:  url('../fonts/iconfont.eot?uo9m63');
	src:  url('../fonts/iconfont.eot?uo9m63#iefix') format('embedded-opentype'),
    url('../fonts/iconfont.ttf?uo9m63') format('truetype'),
    url('../fonts/iconfont.woff?uo9m63') format('woff'),
    url('../fonts/iconfont.svg?uo9m63#iconfont') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.mobilemenu a::after,
a::before,
a.external::before,
.zurueck a::before,
.weiter a::after,
.up a::after,
.booknav .next a::after,
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-right: .1em;
  width: 1em;
  text-align: center;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main a::before,
main a.external::before,
main .zurueck a::before,
main .weiter a::after
{
  margin-right: .35em;
}

main .weiter a::after,
main .up a::after,
main .booknav .next a::after
{
  margin-left: .35em;
}

a.scrolltotop::before
{
	margin: 1em .25em;
}

.icon-email:before {
  content: "\e90a";
}
.icon-close:before {
  content: "\e900";
}
.icon-document-new-window:before {
  content: "\e901";
}
.icon-document:before {
  content: "\e902";
}
.icon-down:before {
  content: "\e903";
}
.icon-left:before {
  content: "\e904";
}
.icon-link-external-new-window:before {
  content: "\e905";
}
.icon-link-external:before {
  content: "\e906";
}
.icon-menu:before {
  content: "\e907";
}
.icon-right:before {
  content: "\e908";
}
.icon-up:before {
  content: "\e909";
}

/* Icons
-------------------------------------------------- */
.mobilemenu a::after { content: '\e907'; }
a::before { content: '\e908'; }
a.external::before { content: '\e906'; }
a.new-window::before { content: '\e905'; }
a.external.new-window::before { content: '\e905'; }

/* keine Icons
-------------------------------------------------- */
header a::before,
nav a::before,
a.scroll::before,
.wdauth a::before
{
	display: none !important;
}

/* Schriftarten 
--------------------------------------------------------------------------- */

body { font-family: 'Open Sans', sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6
{
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
}

.logo a
{
	font-family: 'Open Sans', sans-serif;
}


/* Schriftgröße
-------------------------------------------------- */

body 
{ 
	font-size: 1rem;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

/* Schriftgröße
-------------------------------------------------- */

h1 
{ 
	font-size: 1.8em; 
}

h2
{
	font-size: 1.4em;
}

h3
{
	font-size: 1.2em;
}

/* Farben
------------------------------------------------------------------------------------------------- 

*/

.farbe
{
	color: #215f9a;
}

body
{
	background-color: #fff;
}

header
{
	background-color: #fff;
}

h1,
h2,
h3
{
	color: #215f9a;
}

.datenschutzerklaerung h2,
.datenschutzerklaerung h4 
{
	color: #000;
}



footer
{
	color: #fff;
}


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

body
{
	
}

.wrapper
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
}

header
{
	position: sticky;
	z-index: 999;
	top: 0;
	width: 100%;
	border-bottom: 1px solid #DADAEB;

}

header .inner
{
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	display: grid;
	grid-template-columns: 1fr 100px;
	grid-auto-rows: max-content;
}
	
@media only screen and (min-width: 900px ) {

	header .inner
	{
		grid-template-columns: 1fr 1fr;
		padding: 10px;
	}

}

.header-illustration
{
	grid-row: 1;
	grid-column: 1 / 3;
	background-image: url(../media/header-illustration.jpg);
	background-size: cover;
	margin-bottom: 10px;
}

.logo
{
	font-size: 1.5em;
	grid-row: 2;
	display: flex; 
	justify-content: left; 
	align-items: center;
	padding-left: 10px;
	hyphens: none;
}

@media only screen and (min-width: 500px ) {

	.logo
	{
		font-size: 2em;
	}

	
}

.nav-container
{
	grid-column: 1 / 3;
	justify-content: left; 
	align-items: center;
}

@media only screen and (min-width: 900px ) {

	.logo
	{
		padding-left: 0;
	}
	
.nav-container
	{
		grid-column: 2 / 3;
	}
	
}

main
{
	margin: 2em 0 5em 0;
}

footer
{
	 background-color: #215f9a;
}

footer .inner
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
}

/* Elemente
-------------------------------------------------- */


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

h1 
{ 

}

h2
{
	margin: 1.5em 0 0.5em 0;
}

h3
{
	margin: 2em 0 0 0;
}

main h1 + h3 { margin-top: 0; }
main h2 + h3 { margin-top: 0; }

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

figure
{
	margin: 0;
}

figcaption
{
	font-size: .8em;
}

figure img
{
	width: 100%
}

figure.border img
{
	border: 1px solid #ccc;
}



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

.mobilemenu
{
	font-size: 25px;
	padding: 10px;
	text-align: right;
}

@media only screen and (max-width: 900px){
	.hideit
	{
		height: auto;
		max-height: 0px;
		transition: max-height .5s;
	}
	
	nav-container.hideit
	{
		height: auto;
		max-height: 0px;
		transition: max-height .5s;
	}
}

@media only screen and (min-width: 900px)
{
	.menu 
	{ 
		padding: 0 0 0 0;
	}
	
	.mobilemenu { display: none; }
		
}

nav { 
	background-color: #fff; 
	width: 100%;
	height: auto;
	max-height: 600px;
	overflow: hidden; 
	transition: max-height 2s;
}
	
nav ul
{
	margin: 0 auto;
	padding: 0;
	
}
	
@media only screen and (min-width: 900px)
{	
	nav ul
	{
		display: flex;
		justify-content: flex-end;
		list-style: none;
		flex-direction: row;
	}
}

nav li
{
	background-color: #F6F6F6;
	border-top: 1px solid #DADAEB;
}

@media only screen and (min-width: 900px)
{
	nav li
	{
		background-color: #fff;
		border-top: none;
	}
}

nav li:hover
{
	background-color: #FFF;	
}


nav a,
nav a:visited
{
	color: #215f9a;
	font-size: 1.5em;
	line-height: 2em;
	text-decoration: none;
	padding: 0 1em 0 10px;
}

@media only screen and (min-width: 900px)
{
	nav a,
	nav a:visited
	{
		padding: 0 0 0 1em;
	}
}


.home nav .home,
.projekte nav .projekte,
.projekt nav .projekte,
.ueber nav .ueber,
.kontakt nav .kontakt
{ color: #000; }

nav a:hover,
nav a:focus,
nav a:active { 
	
	color: #333; 
}


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

/* Projekt
-------------------------------------------------- */

@media only screen and (min-width: 900px)
{
	.container
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
}

.text
{
	grid-column: 1/2;
	
}

.text > p,
.text > h2
{
	margin-top: 0;
}


.projektdaten
{
	width: auto;
}

/* 
-------------------------------------------------- 
@media (hover: none) {
	
.thumbnail-overlay
	{
   	 background-color: rgba(255,255,255,0);
   	 display: block !important;
	}

	.media-box-title
	{
		color: #fff !important;
	}

}


  
/* Footer
--------------------------------------------------------------------------- */
footer
{
	font-size: 14px;
}

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

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

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


/* up
-------------------------------------------------- */

.up { font-size: 12px; }

.scroll { display: none; }

a.scroll,
a.scroll:visited
{
	color: #aaa;
	padding: 6px 0 6px 0;
	text-decoration: none;
}

a.scroll:hover,
a.scroll:focus,
a.scroll:active { color: #ccc; }


/* Servicemenü
-------------------------------------------------- */

.nav-service
{
	font-size: 14px;
	width: 12em;
	min-width: 100px;
	margin: 0 10px 0 auto;
	white-space: nowrap; /* keine Silbentrennung */
	-webkit-hyphens: none; 
	-ms-hyphens: none; 
	hyphens: none;
}

.nav-service ul 
{ 
	padding: 0; 
	list-style: none;
}

/* Webdesign
--------------------------------------------------------------------------- */

.wdauth
{
	max-width: 1200px;
	margin: 0 auto;
	background-color: fff;
	font-size: 10px;
	line-height: 1.25;
	text-align: right;
	padding: 0 2em;
}

.wdauth a,
.wdauth a:visited
{
	color: #bbb;
	text-decoration: none;
}

.wdauth a:hover,
.wdauth a:focus,
.wdauth a:active { color: #999; }



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

.hidden {
    display: none !important;
}

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

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

.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

.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; }
}


@media only screen and (max-width: 50em)
{

}