/* übergreifend */
html{
	background-color: #282828;
	background-image:url("/Medien/webbg-1.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
}
body{
	width:1080px;
	margin:auto;
	display:grid;
	grid-template-rows:auto;
	grid-gap:1em;
	grid-template-columns:1fr;
}
h1{
	font-size:1.25em;
	font-weight: normal;
	margin:0;
	padding:0.5em 2em;
	border-bottom:2px solid #8eec41;
	color:#8eec41;
	background-color:#535353;
}
article{
	padding:0.25em 1.5em;
}
a{
	color:#535353;
	font-weight:bold;
	text-decoration:none;
}
a:hover{
	color:#8eec41;
}
/* Header */
#header{
	width:100%;
	display:grid;
	grid-template-columns:1fr 3fr;
	grid-template-rows:auto 1fr;
	position: -webkit-sticky; /* Safari */
  position: sticky;
  top: -14em;
	z-index: 750;
}
#logo{
	grid-column:1/2;
	grid-row:1/3;
	background:#fff;
	width:17.8em;
	color:#672f1c;
	text-align:center;
	font-weight:bold;
	font-family:arial;
	line-height:1.7em;
}
#logo img{
	height:14.8em;
	width:14.8em;
	display:block;
	object-fit:cover;
	margin:auto;
}
#logo:after {
	content:'\A Tischlerei Widl';
	font-size:2em;
}
/* Header Inhalt */
#headcontent{
	position:relative;
}
#headcontent img{
	display:block;
	width:100%;
	height:14em;
	object-fit:cover;
}
.headertext{
	position:absolute;
	right:0em;
/*	top:6em; */
	bottom:0em;
	color:#535353;
	background-color:#8eec41;
	padding:0.5em;
	font-size:1.1em;
}
.headertext:hover{
	color:#fff;
}
/* Navigation */
#navbar{
	z-index:1000;
	background-color:#fff;
	position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
#navbar span{
	margin-left:0.5em;
}
#navbar ul{
	margin:0;
	padding:0;
	list-style:none;
}
#navbar ul li{
	position:relative;
	float:left;
}
#navbar a{
	line-height:1.8em;
	padding:1em;
	display:block;
	background-color:#fff;
	color:#535353;
	text-decoration:none;
	cursor:pointer;
	transition: background-color ease 0.8s;
	-webkit-transition:background-color ease 0.8s;
}
#navbar a:hover{
	background-color:#535353;
	color:#8eec41;
}
#navbar ul li ul{
	z-index:1001;
	width:100%;
	min-width:150px;
	position:absolute;
	display:none;
}
#navbar ul li ul li{
	float:none;
}
#navbar ul li ul li a{
	background-color:#535353;
	color:#fff;
}
/* responsive dropdown */
[id^=drop] {
	display:none;
}
.toggle{
	display:none;
}
/* Hauptteil Startseite*/
#home-body{
	display:grid;
	grid-template-columns:2.5fr 1fr;
	align-items: start;
	grid-gap:1em;
}
#home-content{
	display:grid;
	grid-gap:1em;
	grid-template-columns:1fr;
}
.textblock{
	background-color:#fff;
}
#home-sidebar{
	display:grid;
	grid-gap:1em;
	grid-template-columns:1fr;
	position: -webkit-sticky;
	position:sticky;
	top:4.8em;
	z-index:500;
}
#daten{
	margin-top:0.75em;
}
.kontaktformbutton{
	display:block;
	padding:1em;
	background-color:#8eec41;
	color:#535353;
	text-align:center;
}
.kontaktformbutton:hover{
	color:#535353;
	background-color:#b6ff7b;
}
.kontaktformular{
	padding-left:20%;
}
.textlink{
	padding:0.5em;
	background-color:#535353;
	color:#8eec41;
	font-weight:normal;
	}
.textlink:hover{
	background-color:#696969;
	padding:1em;
	}
.pageup{
	padding:0.5em;
	background-color:#8eec41;
	color:#535353;
}
.pageup:hover{
	color:#535353;
	background-color:#b6ff7b;
}
/* Fußzeile */
#footer{
	width:100%;
	text-align:center;
	padding:1em 0 1em 0;
	background-color:#535353;
}
#footer a{
	color:#fff;
	text-decoration:none;
}
#footer a:hover{
	color:#8eec41;
}