/* Hintergrund */
body {
	background-color: #c7dae3; 
	margin: 0 0 0 0;
	text-align: center;
}
/* Sticky footer */
html, body {
    height: 100%;
    margin: 0;
}
/* Zentrieren der Webseite */
#center { 
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;  /* Sticky footer */ 
    top: 0px;
    text-align: left; 
}
/* Balken hinter Logo und Navigation */
#balk {
	position: fixed;
	background-color: #ffffff;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 110px;
    z-index: 10;
    overflow: visible;
    box-shadow: 0px 0px 10px 5px #477290;
}
/* Animation des Balkens beim Scrollen */
body.scrolldown #balk {
    height: 50px;
    transition: height .8s;
}
/* Logo Blog */
#bglogo {
    position: fixed;  
 	left: 10%;   	
    top: 10px;
 	border: 0px;
 	padding-top: 0%;
 	padding-bottom: 0%;
 	padding-left: 1%;
 	padding-right: 1%;
 	z-index: 11;
}
#bglogo img {
    width: 195px;
    height: auto;
/*    filter:drop-shadow(-5px 5px 3px #F38F1D)   Schlagschatten hinter freigestellten Objekten (x, y, Weichzeichnen, Farbe*/
}
/* Animation des Logos beim Scrollen */
body.scrolldown #bglogo img {
    width: 80px;
    transition: width .8s;
}
/* Content*/
#content {
    position: relative;
    text-align: center;
 	width: 100%;
 	height: auto;
 	z-index: 1;
	padding-bottom: 145px; /* Sticky footer: Höhe Footer 50 + margin-top 105 von ersten Div + margin bottom letztes Div 30*/
} 
@media only screen and (min-width: 40em) {
/* Div Slideshow Index */
.containerslide {
    position: relative;
    background-color: #e8f0f3;
    margin-top: 110px;
    width: 100%;
    height: auto; 
    padding-top: 55px;  
    }
.slide {
    position: relative; 
    background-color: #e8f0f3;   
    width: 100%;
    left: 0%;
    height: 0;
    padding-bottom: calc(700/1700 * 100%); /* Berechnung Höhe mittels Seitenverhältnis der Bilder */
    overflow: hidden;
    display: block; 
    text-align: left;
/*  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);  */
    z-index: 2; 
    }
.slide > div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;          /* benötigt um Text im div zu zentrieren (slidetext) */
    align-items: center;    /* benötigt um Text im div zu zentrieren (slidetext) */
    justify-content: center;  /* benötigt um Text im div zu zentrieren (slidetext) */
    background-size: cover;  
    -moz-background-size: cover;
    animation-name: slide;
    animation-duration: 35s; /* In Abhängigkeit Anzahl Bilder, 5s je Bild */
    animation-iteration-count: infinite;
    opacity: 0;
    visibility: hidden; /* wird benötigt für die Links, damit der jeweilige Link "aktiv" ist und nicht verdeckt wird */
    }
.slide > div:nth-child(2) {
    animation-delay: 5s;
    }
.slide > div:nth-child(3) {
    animation-delay: 10s;
    }
.slide > div:nth-child(4) {
    animation-delay: 15s;
    }
.slide > div:nth-child(5) {
    animation-delay: 20s;
    }
.slide > div:nth-child(6) {
    animation-delay: 25s;
    }
.slide > div:nth-child(7) {
    animation-delay: 30s;
    }
/* Festlegung Animationsschritte */
@keyframes slide {
    0%      { opacity: 0; visibility: hidden; }  /** fadeIn beginnt **/
	11.11%  { opacity: 1; visibility: visible;}  /** Bild steht                **/
	33.33%  { opacity: 1; visibility: visible;}  /** Bild bleibt zwei Sekunden **/
	44.44%  { opacity: 0; visibility: hidden;}  /** fadeOut beendet           **/
	50% {transform: scale(1.0);} 
	100%    { opacity: 0; visibility: hidden; }
    }
/* Style und Lage des Textes */
.slidetext {
/*  background: rgba(255, 255, 255, 0.3) !important; /* Hintergrundfarbe mit Transparenz */
    font-family: Calibri, Arial;
    font-size: calc(25px + (45 - 25) * ((100vw - 320px) / (1600 - 320)));
    font-weight: bolder;
    line-height: 2.0;
    color: #ffffff;
    width: 80%;
    transform: scale(1,1);  /* Änderung Schrifthöhe */
	letter-spacing: 0.03em;
/*  border-style: solid;
    border-color: #ffffff;
    border-width: thin;  */  
    padding-top: 0.7%;
    padding-bottom: 0.7%;
    text-shadow:  0.05em 0.05em 0.1em #474747;
    } 
.buchstabe {
    color: #ffffff;
    font-size: calc(45px + (65 - 45) * ((100vw - 320px) / (1600 - 320)));
    text-shadow:  0.05em 0.05em 0.1em #474747;
    vertical-align: middle;
    }
} 
@media only screen and (max-width: 40em) {
.slide > div {
    text-decoration: none;
    display: none;
    }
}
/* div Index */
#divindex {     
    position: relative;
    background-color: #e8f0f3;
    text-align: center;  
    width: 90%;
 	height: auto;
 	margin-top: 160px;
 	margin-bottom: 0px;
 	padding-top: 5%;
 	padding-bottom: 1%;
 	padding-left: 5%;
 	padding-right: 5%;
 	z-index: 2;
} 
@media only screen and (min-width: 40em) {
#divindex {
    position: relative;
    background-color: #e8f0f3;
    text-align: center;
    width: 90%;
 	height: auto;
 	margin-top: 0px;
 	padding-top: 5%;
 	padding-bottom: 5%;
 	padding-left: 5%;
 	padding-right: 5%;
 	z-index: 2;
    }
}
.table {
    display: table;
    border-collapse: separate;
    border-spacing: 5vw;  
}
.tablerow {
    display: table-row;
}
.tablecellone, .tablecelltwo {
    display: table-cell;
    width: 50%;
    text-align: center;
    box-shadow: -4px 0px 4px -4px rgba(0,0,0,0.3), 4px 0px 4px -4px rgba(0,0,0,0.3);
    padding-top: 3%;
 	padding-bottom: 5%;
 	padding-left: 4%;
 	padding-right: 4%;	
}
@media only screen and (max-width: 40em) {
.tablecelltwo {
    display: none;
    }  
.table {
    display: table;
    border-collapse: separate;
    border-spacing: 8vw;
    }    
}
.pictable img  {
    width: 100%;
    height: auto;
    padding: 0; 
    border-radius: 10px;
} 
.lineorangeindex {
    display: inline-block;
    margin-left: 8%;
    margin-right: 8%;
    margin-top: 7%;
    margin-bottom: 5%;
    padding: 2%;
    width: auto; 
    border-left: medium solid #F38F1D;
    border-right: medium solid #F38F1D;
}
.lineorange {
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 0.3%;
    padding-bottom: 0.3%;
    width: auto;
    border-left: medium solid #F38F1D;
    border-right: medium solid #F38F1D;
}
/* Div Über */
#divueber {
    position: relative;
    background-color:#e8f0f3; 
    text-align: left;
    white-space: normal;
    left: 0%;
    width: 70%;
 	height: auto;  	
    margin-top: 160px;
 	margin-bottom: 0px;
 	padding-top: 7%;
 	padding-bottom: 7%;
 	padding-left: 15%;
 	padding-right: 15%;
 	z-index: 2; 	
}
/* Div Beiträge*/
#divbeitrag {
    position: relative;
    background-color:#e8f0f3; 
    text-align: left;
    white-space: normal;
    left: 0%;
    width: 70%;
 	height: auto;
 	padding-top: 7%;
 	padding-bottom: 7%;
 	padding-left: 15%;
 	padding-right: 15%;
 	z-index: 2; 
}
.social {
    position: relative;
    background-color:#e8f0f3;
    text-align: center;
    width: 81%;    
    height: auto;
    padding-left: 17%;
 	padding-right: 2%;
    padding-bottom: 2%;
    z-index: 2;
}
.picbeitraghead {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 110px;
    left: 0%;
    z-index: 2; 
}
.picbeitraghead img{
    display: block;
    width: 100%;
    height: auto;
/*  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3); */
}
hr.vertical {
    width: calc(2px + (5 - 2) * ((100vw - 320px) / (1600 - 320)));
    height: 90px;
    color: #ffffff;
    background-color: #ffffff;
    text-shadow:  0.05em 0.05em 0.1em #474747;
}  
.picbeitraghead span{
    position: absolute; 
    font-family: Calibri, Arial;
    font-size: calc(25px + (45 - 25) * ((100vw - 320px) / (1600 - 320)));
    font-weight: bolder;
    line-height: 1.5;
    color: #ffffff;
    width: 90%;
    transform: scale(1,1);  /* Änderung Schrifthöhe */
	letter-spacing: 0.03em;
/*  border-style: solid;
    border-color: #ffffff;
    border-width: 4px;*/ 
    padding-top: 0.7%;
    padding-bottom: 0.7%;
    bottom: 38%;
    left: 5%;
    text-shadow:  0.05em 0.05em 0.1em #474747;    
}     
@media only screen and (max-width: 40em) {
    .picbeitraghead span{
    display: none;
    }
}
.picbeitrag {
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 3%;
 	padding-bottom: 1%;
 	padding-left: 3%;
 	padding-right: 3%;
 	/* Transform-Effekte mit Javascript*/
 	transition: all 1s;
    opacity: 0.1;
}
/* Transform-Effekte mit Javascript*/
.transform {
    opacity: 1.0;
}
.picbeitrag img{
    width: 100%;
    height: auto;
 	border-radius: 10px;
} 
@media only screen and (min-width: 60em) {
.picbeitrag img{
    width: 77%;
    height: auto;
 	border-radius: 10px;
/* 	box-shadow: -5px 0px 5px -5px rgba(0,0,0,0.8), 5px 0px 5px -5px rgba(0,0,0,0.8); */
 	box-shadow: 1px 1px 10px grey;
    }
}
@media only screen and (min-width: 80em) {
.picbeitrag img{
    width: 50%;
    height: auto;
 	border-radius: 10px;
/* 	box-shadow: -5px 0px 5px -5px rgba(0,0,0,0.8), 5px 0px 5px -5px rgba(0,0,0,0.8); */
 	box-shadow: 1px 1px 10px grey;
    }
}
.picbeitragsumgre img {
    width: 64px;
    height: auto;
    vertical-align: top;
    padding-right: 1.5%;
    filter:drop-shadow(0px 0px 6px #008000)
}
.picbeitragsumred img {
    width: 64px;
    height: auto;
    vertical-align: top;
    padding-right: 1.5%;
    filter:drop-shadow(0px 0px 6px #ff0000)
}
.tablebeitrag {
    display: table;
    border-collapse: separate;
    border-spacing: 2vw 3vw;
}
.tablerowbeitrag {
    display: table-row;
}
.tablecellbeitragone {
    display: table-cell;
    text-align: left;
    width: 5%;
    padding-right: 2%;    
}
.tablecellbeitragtwo {
    display: table-cell;
    text-align: left;
    width:95%;
    padding-right: 2%;
}
/* Div Gartenbilder*/
#divgartenbilder {
    position: relative;
    background-color:#e8f0f3; 
    text-align: left;
    white-space: normal;
    margin-top: 160px;
    width: 70%;
 	height: auto;
 	padding-top: 7%;
 	padding-bottom: 2%;
 	padding-left: 15%;
 	padding-right: 15%;
 	z-index: 2;
}
.picgartenbilder {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 2%;
    left: 0%;
    z-index: 3;
}
.conttimeline {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(700/1250 * 100%); /* Berechnung Höhe mittels Seitenverhältnis der Bilder */
    margin-top: 4.2em;
    }
.pictimeline {
    position: absolute;
    width: 70%;
    height: auto;
    margin-left: 15%;
    z-index: 3;  
}
.pictimeline img {
    width: 100%;
    height: auto;
    border-style: solid;
    border-color: #ffffff;
    border-width: 2px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0px 0px 10px #aaaaaa;
}
.datetimeline{
    position: absolute;
    font-family: Calibri, Arial;
    font-size: calc(25px + (49 - 25) * ((100vw - 320px) / (1600 - 320)));
    font-weight: bolder;
    line-height: 1.5;
    color: #F38F1D;
    width: 0%;
    overflow: hidden;
    top: 2%;
    left: 6%;
    text-shadow:  0.05em 0.05em 0.1em #474747;
    z-index: 4;
    transition: all 1.5s;
}
/* Transform-Effekte mit Javascript*/
.transformtimeline {
    width: 60%;
}
.deftimeline {
    position: relative;
    background-color: #c7dae3;
    color: #000000;
    width: 66%;
    height: auto;
    left: 15%;
    bottom: 2.6vw;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-style: solid;
    border-color: #ffffff;
    border-width: 2px;
    box-shadow: 0px 5px 10px #aaaaaa;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 5;
}
.dottimeline {
    position: absolute;
    left: 49%;
    margin-top: -1.5vw;
    z-index: 6;
}
.timeline {
    position: relative;
    width: 0.5em;
    height: 0.5em;
    margin-bottom: 0.9em;
    background-color: #F38F1D;
    box-shadow: 1px 1px 3px #aaaaaa;
    border-radius: 0.5em;
}
/* Div Impressum, Datenschutz*/
#divimprdat {
    position: relative;
    background-color:#e8f0f3;
    text-align: left;
    white-space: normal;
    left: 0%;
    width: 70%;
 	height: auto;
 	margin-top: 160px;
 	margin-bottom: 0px;
 	padding-top: 6%;
 	padding-bottom: 7%;
 	padding-left: 15%;
 	padding-right: 15%;
 	z-index: 2;
}
/* Div Kontakt*/
#divkontmail {
    position: relative;
    background-color: #e8f0f3;
    text-align: left;
    white-space: normal;
    left: 0%;
    width: 70%;
 	height: auto;
 	margin-top: 160px;
 	margin-bottom: 0px;
 	padding-top: 6%;
 	padding-bottom: 7%;
 	padding-left: 15%;
 	padding-right: 15%;
    z-index: 2;
}
/* Fussbereich */
#footer {
    position: relative;
    font-family: Calibri, Arial;
    font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
    line-height: 2.0;
    color: #888888;
    background-color: #c7dae3;               
    left: 0%;
    width: 86%;
    height: 50px; /* Sticky footer */
    padding-top: 15px;
    padding-bottom: 15px;      
    padding-left: 7%;
    padding-right: 7%;
    margin-top: -80px; /*  Sticky footer */
    clear: both;           
    z-index: 10;
    box-shadow: 0px 0px 10px 1px #477290;   
}
.footercont{
    text-align: left; 
    float: left; 
    width: 60%;    
}
.footerre{
    text-align: right; 
    float: right; 
    width: 40%; 
    color: #000000;
}
.blume img {
    width: 42px;
    height: auto;
    vertical-align: middle;
    padding-left: 2%;
}
/* Navigation Burgermenue */
#navham {
    position: fixed;
    font-family: Calibri, Arial;
    color: #232323;
    top: 43px;
    right: 5%;
    width: 8%;
    z-index: 11;
    -webkit-user-select: none;
    user-select: none;
}
/* Animation der Navigation beim Scrollen */
body.scrolldown #navham {
    top: 15px;
    transition: top .8s;
}
#navham a {
    text-decoration: none;
    color: #232323;
}  
#navham input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;  
    cursor: pointer;  
    opacity: 0; /* Ausblenden */
    z-index: 12; /* und über den Hamburger legen */  
    -webkit-touch-callout: none;
}
/*Optik Strichmenü*/
#navham span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background-color: #232323;
    border-radius: 3px;  
    z-index: 5;  
    transform-origin: 4px 0px;  
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
} 
/*Ankerpunkt Drehung für 1. Span*/
#navham span:first-child {
    transform-origin: 0% 0%;
}
/*Ankerpunkt Drehung für 2. Span*/
#navham span:nth-last-child(2) {
    transform-origin: 0% 100%;
}
/*Drehen des 1. Span und Verschiebung mit translate (x,y)*/
#navham input:checked ~ span {
    opacity: 1.0;
    transform: rotate(45deg) translate(-2px, -1px);
    background-color: #232323;
}
/*Opacity 0 für 3. Span*/
#navham input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
/*Drehen des 2. Span und Verschiebung mit translate (x,y)*/
#navham input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}
/*Position Menu etc*/
#navhammenu {
    position: absolute;
    margin-top: 49px;
    width: 50vw;
    height: auto; 
    background-color: #ffffff;
    padding-left: 25%;
    padding-right: 3%;
    padding-top: 10%;
    padding-bottom: 15%;
    margin-left: 37px;
    list-style-type: none;
    text-align: left;
    -webkit-font-smoothing: antialiased; /* um flackern in Safari zu unterbinden */
    opacity: 0.0;
    display: none;
    transition: opacity 1.0s;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);  
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    box-shadow: -4px 0px 10px -4px rgba(0, 0, 0, 0.4), 4px 0px 10px -4px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}
/* Animation der Navigation beim Scrollen */
body.scrolldown #navhammenu {
    margin-top: 18px;
    transition: top 3.8s;
}
/*CSS für die Links im Menu*/
#navhammenu li {
    font-family: Calibri, Arial;
	font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1600 - 320))); 
    color: #000000; 
    padding-bottom: 1%;
}
#navhammenu a:link {
	color: #000000;
	text-decoration: none;
}
#navhammenu a:hover {
	color: #F38F1D;
	text-decoration: none;
}
#navhammenu a:visited {
	color: #000000;
	text-decoration: none;
}
/*Einblenden des Menus */
#navham input:checked ~ ul {
    opacity: 1.0;
    transition: opacity 1.0s;
    display: block; 
}
.navhambeitrag {
	padding-left: 5%;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #F38F1D;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
#footer a:link {
	color: #888888;
	text-decoration: none;
	margin-right: 2.5%;
}
#footer a:hover {
	color: #F38F1D;
	text-decoration: none;
	margin-right: 2.5%;
}
#footer a:visited {
	color: #888888;
	text-decoration: none;
	margin-right: 2.5%;
}
.button a:link {
	color: #ffffff;
	text-decoration: none;
}
.button a:hover {
	color: #477290;
	text-decoration: none;
}
.button a:visited {
	color: #ffffff;
	text-decoration: none;
}
.slide a:link {
	color: #ffffff;
	text-decoration: none;
}
.slide a:hover {
	color: #ffffff;
	text-decoration: none;
}
.slide a:visited {
	color: #ffffff;
	text-decoration: none;
}
.textlink a:link {
	color: #F38F1D;
	text-decoration: none;
}
.textlink a:hover {
	color: #477290;
	text-decoration: none;
}
.textlink a:visited {
	color: #F38F1D;
	text-decoration: none;
}
/* Text Standardgröße */
.textSt {
	font-family: Calibri, Arial;
	font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320)));
	line-height: 1.6;
	font-weight: normal;
}
/* Text Standardgröße rechtlicher Text, Kommentare etc. */
.textSt2 {
	font-family: Calibri, Arial;
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
	line-height: 1.6;
	font-weight: normal;
}
/* Text Orange */
.textorange {
	color: #F38F1D;
	font-weight: bold;
}
/* Überschrift */
.ueberschrift {
	font-family: Calibri, Arial;
	font-weight: bold;
	font-size: calc(21px + (25 - 21) * ((100vw - 320px) / (1600 - 320)));
	line-height: 1.0;
 	height: auto;
 	white-space: normal;
}
/* Überschrift Thema */
.ueberschriftthema {
	font-family: Calibri, Arial;
	font-weight: bolder;
	color: #000000;
    font-size: calc(27px + (33 - 27) * ((100vw - 320px) / (1600 - 320)));
	line-height: 1.0;
	text-align: center;
	transform: scale(1,1);  /* Änderung Schrifthöhe */
	letter-spacing: 0.05em;
}
/* Überschrift */
.ueberschriftklein {
	font-family: Calibri, Arial;
	font-weight: bold;
	font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
	line-height: 1.0;
 	height: auto;
 	white-space: normal;
}
/* Trennstrich */
.trenn {
	color:#F38F1D;  
}
/* Links im Text */
.button {
    display: inline;
	border-width: 1.5px;
	background-color: #F38F1D;
    font-family: Calibri, Arial;
	font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));  /* Schriftgröße responsive zwischen 12 und 16px und 320px-1600px Bildschirm */
	text-align: center;
    padding-top: 7px;
 	padding-bottom: 7px;
 	padding-left: 10px;
 	padding-right: 10px;
 	border-radius: 7px 7px 7px 7px;	
}
/* Formular, Formularfelder */
.form input, textarea {
    display: inline;
    text-align: center;
    border: none;
    background-color: #ffffff;
    border-left: 1px solid #477290;
	border-bottom: 1px solid #477290;
	border-right: 1px solid #477290;
	border-top: 1px solid #477290;
	border-width: 1.5px;
    font-family: Calibri, Arial;
	font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
	text-align: left;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 1%;
	padding-bottom: 1%;
 	border-radius: 10px 10px 10px 10px;
}
/* Formularfelder */
.form {
    border: none;
    font-family: Calibri, Arial;
	font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
	line-height: 2.0;
	text-align: left;
    padding-top: 1%;
 	padding-bottom: 1%;
 	padding-left: 2%;
 	padding-right: 10%;
 	margin-left: 10%;
}
/* Button Submit */
input.buttonstyle {
	width:40%;
	height:auto;
	color: #477290;
	text-align: center;
	border-left: 2px solid #477290;
	border-bottom: 2px solid #477290;
	border-right: 2px solid #477290;
	border-top: 2px solid #477290;
 	background-color: transparent;
}
/* Suggest Search */
@media only screen and (max-width: 40em) {
#autocompletecont {
    display: none;
}
}
@media only screen and (min-width: 40em) {
#autocompletecont {
    position: fixed;
    width: 19%;
 	left: 66%;
    top: 37px;
 	border: 0px;
 	font-family: Calibri, Arial;
    font-size: calc(12px + (15 - 12) * ((100vw - 320px) / (1600 - 320)));
    text-align: left;
 	z-index: 11;
}
body.scrolldown #autocompletecont {
    position: fixed;
    width: 19%;
 	left: 66%;
    top: 8px;
 	border: 0px;
 	font-family: Calibri, Arial;
    font-size: calc(12px + (15 - 12) * ((100vw - 320px) / (1600 - 320)));
 	z-index: 11;
    transition: top 0.8s;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  width: 57%;
}
input#myInput {
  border: 2px solid #dedede;
  background-color: transparent;
  padding: 7px;
  outline: none;
  border-radius: 5px;
 /* box-shadow: 1px 1px 4px #A0A0B0; */
}
input#myInput[type=text] {
  background-color: transparent;
  width: 100%;
}
input#myInput[type=submit] {
  background-color: transparent;
  color: #ffffff;
}
.autocomplete-items {
  position: absolute;
  z-index: 11;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  width: 200px;
  left: 0;
  right: 0;
  margin-top: 10px;  
  box-shadow: 1px 1px 4px #A0A0B0;
}
.autocomplete-items div {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 3px;
  padding-bottom: 2px;
  cursor: pointer;
  background-color: #ffffff;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #ffffff;
  color: #F38F1D;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: #ffffff !important;
  color: #F38F1D;
}
.autocompletebut {
  background-color: transparent;
  width: 35px;
  overflow: visible;
  height: auto;
  border: 0;
  z-index: 6; 
  cursor: pointer;
  margin-left: 13px;
  margin-bottom: 3px;
  vertical-align: middle; 
}
.autocompletebut img{
  background-color: transparent;
  width: 24px;
  height: auto;
  float: left; 
}
#myInput {
  color: #888888;
}
}

/* Title eines Elements, für jeden Tag anwendbar Beispiel: <span class="title" data-title="Ein Vorgarten befindet sich vor dem Haus"><strong>Vorgarten</strong></span> */
.title {
    cursor: pointer;
}
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;     
}
/* Box für den Title-Text */
[data-title]:after {
    content: attr(data-title);
  	/* position for title view box */
  	position: absolute;
  	bottom: 1.6em;  	
    left: 100%;
    z-index: 99999;
    visibility: hidden;
    white-space: nowrap;
  	/* stilization */
    background-color: #ffffff;
    color: #000000;
    font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
    padding: 1px 5px 2px 5px;
    opacity: 0;
    border: 2px solid #dedede;
    box-shadow: 1px 1px 4px #477290;   
}
[data-title] {
    position: relative;
}



/* nicht aktiv  */
/* Parent legt divs übereinander, das div-parent muss mit relative die anderen Divs umschliessen, diese mit absolute positionieren */
#parent {
    position: relative;
    }