* {
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(to bottom, rgba(150, 200, 255, 1), transparent);
  background-repeat: repeat-x repeat; 
/**  background-image: url('../DSC_4168.jpg');
  background-size: 100% auto;
  background-attachment: fixed;  **/
  font-family: "Tempus sans ITC";
  background-color: white;
}

#wrapper {
  width: 1020px;
  margin: 0 auto;
}

#kopfbereich {
  position: relative;
  width: 994px;
  margin: 0 auto;
  background-color: white transparent;
  color: black;
}

#container {
  width: 1020px;
  margin: 0px auto;
}

#navibereich {
  float: left;
  width: 195px;
  background-color: black transparent;
  color: white;
}

#navibereich ul {
  list-style-type: none;
  width: 195px;
}

#navibereich ul li a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  text-transform: uppercase;
}

#navibereich ul li a.active {
  color: rgba(255, 255, 255, 1);
}

#navibereich ul.steps li.step:hover > #navibereich ul li a{
  color: rgba(0, 0, 0, 1);
}

#textbereich {
  float: left;
  width: 745px;
  color: black;
  padding: 10px 40px;
  border-radius: .3125rem;
  box-shadow: 0px 0px 3px black;
  background-color: white;
}

#fussbereich {
/**  background-image: url('http://www.hansliegl.de/schildkroeten.jpg');  **/
  background-color: white;
  font-family: Tahoma, Arial;
  height: 10em;
  margin-top: 1em;
}

#fussbereich p {
  background-color: white;
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
}

a.button {
  text-decoration: none;
  color: white;
  padding: 0.5em;
  border-radius: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  background-color: rgba(0, 0, 255, 0.6);
  border: 1px solid #777;
}

a.button:hover {
  box-shadow: 0px 0px 3px white inset; 
}

a.button:active {
  box-shadow: 0px 0px 3px black inset;
}

a.imprint {
  background-color: white transparent;
  color: rgba(0, 0, 0, 0.7);
  font-size: 4em;
  text-decoration: none;
  transition: color ease-in-out .5s, text-shadow ease-in-out .5s;
}

a.imprint:hover {
  cursor: pointer;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.5);
  transition: color ease-in-out .5s, text-shadow ease-in-out .5s;
}

a.imprint span {
  opacity: 0;
  position: absolute;
  padding: 0.5em;
  text-decoration: none;
  border: none;
  background-color: white;
  box-shadow: 2px 2px 3px grey, 1px 1px 2px white inset;
  margin-left: 1em;
  transition: opacity .5s ease .1s;
  visibility: hidden;
  color: #203748;
  border-radius: 0px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  max-width: 300px;
  font-style: normal;
  line-height: 1.5em;
  margin-top: 2.5em;
}

a.imprint:hover > span {
  opacity: 1;
  visibility: visible;
}

p {
  margin-top:1em;
}

#navibereich ul li.step, #navibereich ul.steps li.step{
display:inline-block;
position:relative;
padding:1em 2em 1em 3em;
vertical-align:top;
background-color:#FFF;
color:#888;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

#navibereich ul li.step:after, #navibereich ul.steps li.step:after{
position:absolute;
z-index:2;
content:'';
top:.41em;
right:-1.1em;
border:medium none;
background-color:#FFF;
width:2.2em;
height:2.2em;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-box-shadow:-1px -1px 0 0 rgba(0,0,0,.15)inset;
box-shadow:-1px -1px 0 0 rgba(0,0,0,.15)inset;
}

#navibereich ul.steps li.step, #navibereich ul.steps li.step, #navibereich ul.steps li.step:after{
-webkit-transition:background-color .3s ease,opacity .3s ease,color .3s ease,-webkit-box-shadow .3s ease;
-moz-transition:background-color .3s ease,opacity .3s ease,color .3s ease,box-shadow .3s ease;
transition:background-color .3s ease,opacity .3s ease,color .3s ease,box-shadow .3s ease;
}

#navibereich ul.vertical.steps{
overflow:visible;
}

#navibereich ul.vertical.steps li.step{
display:block;
border-radius:0;
padding:1em;
width:195px;
}

#navibereich ul.vertical.steps li.step:first-child{
padding:1em;
border-radius:0;
border-top-left-radius:.3125rem;
border-top-right-radius:.3125rem;
}

#navibereich ul.vertical.steps li.active.step:first-child{
border-top-right-radius:0;
}

#navibereich ul.vertical.steps li.step:last-child{
border-radius:0;
border-bottom-left-radius:.3125rem;
border-bottom-right-radius:.3125rem;
}

#navibereich ul.vertical.steps li.active.step:last-child{
border-bottom-right-radius:0;
}

#navibereich ul.vertical.steps li.step:after{
display:none;
}

#navibereich ul.vertical.steps li.active.step:after{
display:block;
}

#navibereich ul.vertical.steps li.two.line.step{
line-height:1.3;
}

#navibereich ul.vertical.steps li.two.line.active.step:after{
position:absolute;
z-index:2;
content:'';
top:0;
right:-1.45em;
background-color:transparent;
border-bottom:2.35em solid transparent;
border-left:1.55em solid #555;
border-top:2.35em solid transparent;
width:0;
height:0;
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
transform:none;
}

#navibereich ul.steps{
cursor:pointer;
display:inline-block;
overflow:hidden;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);
box-shadow:0 0 0 1px rgba(0,0,0,.1);
line-height:1;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border-radius:.3125rem;
background-color: white;
}

#navibereich ul.steps li.step:first-child{
padding-left:1.35em;
border-radius:.3125em 0 0 .3125em;
}

#navibereich ul.steps li.step:last-child{
border-radius:0 .3125em .3125em 0;
}

#navibereich ul.steps li.step:only-child{
border-radius:.3125em;
}

#navibereich ul.steps li.step:last-child{
margin-right:0;
}

#navibereich ul.steps li.step:last-child:after{
display:none;
}

#navibereich ul.steps li.step.hover,#navibereich ul li.step:hover{
background-color:#F7F7F7;
color:rgba(0,0,0,.8);
}


#navibereich ul li.step.hover::after,#navibereich ul li.step:hover,#navibereich ul.steps li.step.hover:after,#navibereich ul .steps li.step:hover:after{
background-color: rgba(0, 0, 0, 0.1);
}

#navibereich ul li.step.hover::after,#navibereich ul li.step:hover,#navibereich ul.steps li.step.hover:after,#navibereich ul .steps li.step:hover:after > #navibereich ul.steps li.step a{
  color: rgba(0, 0, 0, 0.8);
}

#navibereich ul li.step.down,#navibereich ul li.step:active, #navibereich ul.steps li.step.down,#navibereich ul .steps li.step.down:after,#navibereich ul .steps li.step:active,#navibereich ul .steps li.step:active:after,#navibereich ul .steps.down::after,#navibereich ul .steps:active::after{
background-color:#F0F0F0;
}

#navibereich ul li.active.step,#navibereich ul.steps li.step.active{
cursor:auto;
background-color:#777;
color:#FFF;
font-weight:700;
}

#navibereich ul.active.steps:after,#navibereich ul.steps li.step.active:after{
background-color:#fff;
-webkit-box-shadow:none;
box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.4),  -3px -3px 2px rgba(0, 0, 0, 0.4);
border-radius: 10rem 0.1rem 0 0.1rem;
}

#navibereich ul li.disabled.step,#navibereich ul.steps li.disabled.step{
cursor:auto;
background-color:#FFF;
color:#CBCBCB;
}

#navibereich ul li.disabled.step:after,#navibereich ul.steps li.disabled.step:after{
background-color:#FFF;
}

p.clearing {
  clear: both;
}

img.rotate10 {
  transform: rotate(10deg);
}

img.rotate-10 {
  transform: rotate(-10deg);
}

img.left {
  float: left;
  margin: 2em;
}

img.right {
  float: right;
  margin: 2em;
}

div.galerie {
  margin: 1em;
  float: left;
}

img.galerie_thumb {
  margin: 0.5em 1em;
  box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.5);
}

img.galerie_thumb:hover {
  box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.5), 0px 3px 10px rgba(255, 255, 255, 0.5) inset;
}

img.galerie_uebersicht {
  margin-bottom: 0.5em;
}

.galerie i {
  margin-right: 1em;
  border-right: 1px ridge rgba(255, 255, 255, 0.3);
  line-height: 2.2em;
}