@charset "UTF-8";
html, body {height: 100%; width: 100%}

@media (min-width: 750px) {
body { margin-top: 350px;}
}
#header {margin-top: 25px; min-height: 100px}

.navi { font-size: 1.8rem;
	position:fixed; bottom: 0;z-index: 10;
background-color: #F0F0F0;
right: 0; height: 40px; width: 100%; }

.navi ul {margin-top:0; margin-bottom: 0;}
.navi ul li {display: block; list-style: none;}
.menu {width: 100%; height: 35px; background-color: #FFF; border-bottom: solid 1px #999;border-top: solid 1px #999;padding-top: 5px;}
.menu a {margin-right: 50px; margin-top: 5px;position: relative;}

.navi.open {height: 100%; }

.menu span, .menu span:before  {
  cursor: pointer;
  height: 1px;
  width: 25px;
  background: #999;
  position: absolute;
  display: block;
  content: '';
}
.menu span{
right: -35px;
	top: 12px}
.menu span:before {
  top: 0px;
}


.menu span, .menu span:before  {
	moz-transition-delay: 200ms;
transition-delay: 200ms;
webkit-transition-delay: 200ms;
  transition: all 200ms ease-in-out;
}

.navi  {
  transition: all 200ms ease-in-out;
}

.menu.active span:before{
  top: 0;
}
.menu.active span:before {
  -webkit-transform: rotate(90deg);
transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.menu.active span {
  -webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform: rotate(45deg);
}

.navi li {margin-right: 50px; padding: 10px 0px; }

.navi li a:before {content: "";
position: absolute;
bottom: 10px;
width: 20px;
right: -30px;}

@media (min-width: 550px) {
	
	.navi { font-size: inherit;
	position:relative; 
background-color: transparent;
height: 40px; width: 100%; 
	z-index: 0;}
	
	
	.menu {display: none;}
}


@media (min-width: 1000px) {
	#header {margin-top: 85px; min-height: 275px;position: absolute;
width: 100%;
top: 0}
}
@media (min-width: 750px) {
	#header {margin-top: 85px; min-height: 275px;position: absolute;
width: 100%;
top: 0}
#header.sticky {position:fixed; height: 60px; width: 100%; background-color: #f0f0f0; z-index: 10; margin: 0; min-height: 0px;}
#header.sticky .navi ul {padding-top: 10px;}
#header.sticky .firma {display: none;}
}

.logo {width: 66px;height: 100%;
	margin-bottom: 25px; float: left;
}

.logo-start {width: 66px;height: 100%;
	margin-bottom: 25px; 
}
.firmenname {float: left; margin-left: 20px;}
@media (min-width: 550px) {
	
	.navi {position:relative;background-color: transparent;}
	
	.firmenname {float: none; margin-left: 0px;}

.logo {float: none;}
#header {margin-top: 55px; min-height: 225px;}
}
@media (min-width: 1200px) {
.start h1, .start h2{font-size: 2.8rem;}
}

.box-treuhand{width: 100%; display: block; background-color: #3E3028; color: #fff; position: relative;}
.box-anwalt{width: 100%; display: block; background-color: #273B4F; color: #fff; position: relative;}

.treuhand-text {padding: 20px;}
.anwalt-text {padding: 20px}

.treuhand-text h5 {color: #999; font-size: 2.2rem; }
.treuhand-text h4 {font-size: 2.2rem; }
.anwalt-text h5 {color: #939DA7; text-transform: uppercase; font-size: 2.5rem; }
.anwalt-text h4 {font-size: 2.5rem; }

.treuhand-text .button {color:#FFF;}
.anwalt-text .button {color:#FFF;}

.box-treuhand a, .box-anwalt a  {color: #fff}
.box-treuhand a:hover, .box-anwalt a:hover {color: #ccc}

.impressum {margin-top: 50px}
.impressum a {color:#FFF; text-decoration: none;}

.header h4 {font-size: 17px;}
.header h5 {font-size: 15px;}

@media (min-width: 400px) {
.treuhand-text {padding: 7.5%;}
.anwalt-text {padding: 7.5%}
}

@media (min-width: 750px) {
	.box-treuhand{width: 50%; float: left; height: 90%; }
.box-anwalt{width: 50%; float: left; height: 90%; }

.treuhand-text {position:absolute; width: 85%; max-width: 600px; right: 0;  margin-top: 60px;}
.anwalt-text {position:absolute; width: 85%; max-width: calc(600px - 10%); left: 10%; margin-top: 60px; }
	
	.treuhand-text {padding: 0px;}
.anwalt-text {padding: 0px}


.treuhand-text h5 {margin-bottom: 70px; }
.anwalt-text h5 {margin-bottom: 118px;}


.impressum {margin-top: 100px}

.header h4 {font-size: 17px;}
.header h5 {font-size: 15px;}

}
.firma {display: block; float: left; position: absolute; z-index:1;}



.navi {text-align: right;}

@media (min-width: 550px) {
	.navi ul{padding-top: 95px;}

.navi ul li {display: inline;
	padding-left: 14px;
	margin-right: 0px;
padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px}

.navi li:first-child {padding-left: 0px}
	
	.navi li a:before {content: "";
position: absolute;
bottom: -10px;
right: inherit;
width: 20px;
border-bottom: 1px solid transparent;
}

}

@media (min-width: 1000px) {
.navi ul li {
	padding-left: 25px}
}
.navi li a {position: relative}

@media (min-width: 1000px) {

}
.navi li a.rex-current:before, .navi li a:hover:before {
border-bottom: 1px solid #222}

.navi li a:hover {color: #222}


.bild {width: 100%;background-position: center center;background-size: cover;position: relative;color: #fff;min-height: 80%;}

.bild a {color: #fff;}
.bild a:hover {color: #cccc;}
	
.six-variabel {width: 100%;} 
.overlay-links {width: 100%; min-height: 300px; display: block; padding-top: 50px; padding-bottom: 30px;}
.overlay-rechts {width: 100%; min-height: 300px; display: block; padding-top: 50px; padding-bottom: 30px;}

.text-links {width: 85%; margin-left: auto; margin-right: auto;}
.text-rechts {width: 85%; margin-left: auto; margin-right: auto;}

.overlay-links hr {max-width: 100px;
    margin-left: 0px;border-top: 1px solid #fff;}
.overlay-rechts hr {max-width: 100px;
    margin-left: 0;border-top: 1px solid #fff;}

@media (min-width: 1000px) {
.bild {width: 100%;min-height: 400px;}	
	.six-variabel {width: 48%;} 
.overlay-links {width: 50%; height: 100%;padding-top: 80px;	display: flex; padding-bottom: 50px;}
	.text-links {width: 85%; max-width: 600px; margin-left: auto;margin-right: 0; }
	.text-links h1, .text-links h2, .text-links h3, .text-links p {padding-right:8%} 
	
	.overlay-rechts {width: 50%; height: 100%;padding-top: 80px; display: flex; padding-bottom: 50px;margin-left: 50%;}
	.text-rechts {width: 85%; max-width: 600px; margin-right: auto;margin-left: 0; }
	.text-rechts h1, .text-rechts h2, .text-rechts h3, .text-rechts p {padding-left:8%} 
	
	.overlay-rechts hr {max-width: 100px;
    margin-left: 8%;border-top: 1px solid #fff;}
}




.kasten {color: #fff; padding-left: 10px; padding-right: 40px; padding-top: 3px; padding-bottom: 5px; display: inline;}


.trenner{border-top: 1px solid #000;
margin-bottom: 30px;}


#map-canvas {
	height: 600px;
	margin-top: 80px;
	width: 100%;
}

.karte {position: relative; min-height: 600px; padding: 0px;}
.karte img {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center}


.content{position: relative; width: 100%; margin-top: 100px; min-height:100px;clear: both;} 
.content-text{position: relative; width: 100%; margin-top: 20px;clear: both;} 
.bild-links {display:none;}
.bild-rechts {display:none;}

.bild-tab {display: block;}

@media (min-width: 1000px) {
	.bild-links {position: absolute;width: 34%;height: 400px;left: 0;top: 0;display:block;background-position: center center;
background-size: cover;}
	
	.bild-rechts {position: absolute;width: 34%;height: 400px;right: 0;top: 0;display:block;background-position: center center;
background-size: cover;}
	.bild-tab {display: none;}
}

@media (min-width: 1200px) {
	.bild-links {height: 500px;}
	.bild-rechts {height: 500px;}
}


.footer {min-height: 200px;}
.footer hr {margin-left: 50px;position: relative; border-top: 1px solid #999;margin-top: 100px;margin-bottom: 30px;overflow: visible;}
.footer hr:before {background-image: url(../images/logo.png); background-size: 46px; background-position: left top; background-repeat: no-repeat;width: 46px;height: 46px;
position: absolute;content: "";left: -50px;top: -46px }

.footer h5, .footer p, .footer h4 {font-size: 1.6rem; line-height: 1.5}

.copyright {padding-bottom: 50px;}

@media (min-width: 550px) {
.firmierung {width: 32%; float: left; margin-right: 4%}
.adresse {width: 32%; float: left; margin-right: 4%}
.links {width: 24%; float: left; margin-right: 4%}
.copyright {width: 100%; float: left; margin-right: 0%}}

@media (min-width: 1000px) {.footer .rechts {text-align: right;}
.firmierung {width: inherit; float: left; margin-right: 0}
.adresse {width: inherit; float: left; margin-right: 0}
.links {width: inherit; float: left; margin-right: 0}
.copyright {width: inherit; float: left; margin-right: 0}

}

:target:before {
	content: "";
	display: block;
	height: 60px; /* same as your fixed header height */
	margin: -60px 0 0; /* negative fixed header height */
}