@charset "UTF-8";
/* CSS Document */


    @font-face{
        font-family:"Ciutadella W04 Lt";
        src:url("Fonts/1271137/d1cabf8f-280c-4998-9463-ecac69b4a97d.woff2") format("woff2"),url("Fonts/1271137/10451487-1f0d-48e9-9c47-1a263b7c2ca5.woff") format("woff");
    }
    @font-face{
        font-family:"Ciutadella W05 Bold";
        src:url("Fonts/5217301/4cbb2302-6cbb-4c4e-bb9e-851b9f4b8664.woff2") format("woff2"),url("Fonts/5217301/fbb443ad-6a5e-44c2-8892-beef4fa4cb4f.woff") format("woff");
    }
    @font-face{
        font-family:"Ciutadella W01 Regular";
        src:url("Fonts/5388894/14a09f0f-278d-47b0-96bf-2f00b62ec641.woff2") format("woff2"),url("Fonts/5388894/eecc1f8b-a15a-48f5-a629-5b73101604f3.woff") format("woff");
    }

.header {height: 150px; width: 100%}
.header h1 {height:0px; display: inline-block}
.header h1 span {display: none}
.logo {width: 222px; height: 41px; position: absolute; top: 50px; left: 20px; }

@media (min-width: 400px) {
	.logo {left: 7.5%; }

}

@media (min-width: 550px) {
	 .header {height: 210px; }
	.logo {left: 50%; margin-left: -111px; top: 85px; }

}

@media (min-width: 1000px) {
	.header {height: 290px; }
.logo {width: 259px; height: 47px; top: 85px; left: 50%; margin-left: -130px }
}


/*Navigation*/

.menu {width: 26px; height: 18px; position: absolute; z-index: 300; right: 20px; top: 55px}
.open .menu {position: fixed;}
.menu a {position: relative; height: 14px; display: block}
.menu span, .menu span:before , .menu span:after  {cursor: pointer; height: 1px; width: 26px; position: absolute; display: block; content: ''; background: #ccc5b3;}
.menu span:before {top: -9px;}
.menu span { top: 5px;}
.menu span:after {top: 9px;}
.menu span, .menu span:before , .menu span:after  {transition: all 200ms ease-in-out;}
.menu.active span:before {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-moz-transform: rotate(-45deg); top: 0;background: #fff; }
.menu.active span {background: transparent;}
.menu.active span:after {-webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transform: rotate(45deg); top: 0;background: #fff;
}

.overlay {height: 100%; width: 75%; right: -75%; top:0px; background-color: #e5e2d9; position: fixed; z-index: 2;  -webkit-transition: right 0.5s; transition: right 0.5s; display: flex; align-items: center; }
	
.open .overlay {right:0; overflow: scroll; }

.navi {padding-left: 10%}
.navi ul {text-align: left}
.navi ul li {list-style-type: none; padding: 10px 0}
.navi ul li::before {content:""; position: relative; left: 0}
.navi ul li a {font-family: "Ciutadella W04 Lt", Helvetica, Arial, sans-serif; text-decoration: none; text-transform: uppercase; font-size: 1.8rem; letter-spacing: 0.3rem; display: block; position: relative}
.navi ul li a:hover, .navi ul li a.rex-current {font-family: "Ciutadella W05 Bold", Helvetica, Arial, sans-serif; color: #000 }
.navi ul li a:hover::before, .navi ul li a.rex-current::before {content:"\\ "; }




@media (min-width: 400px) {
	.menu {right: 7.5%;}

}

@media (min-width: 550px) {
	.menu {right: 4%; top: 85px}
	.overlay {width: 50%; right: -50%;}
	.navi ul li a {font-size: 2rem; }

}



@media (min-width: 1000px) {
	.overlay {width: 30%; right: -30%;}
	
}

/*Start*/
.projekt-container {}
.projekt {display: flex; text-align: center; align-items: center; flex-wrap: wrap}
.projekt:nth-child(odd) > div:nth-child(2) {order: 2}
.projekt:nth-child(odd) > div:nth-child(1) {order: 1}
.projekt > div {position: relative}

.projekt:nth-child(odd) > div:nth-child(2)::after, .projekt:nth-child(even) > div:nth-child(2)::after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 10px;
	margin-left: -10px;
	z-index: 1;
}
.projekt:nth-child(odd) > div:nth-child(2)::after{border-bottom-color: #e5e2d9;}
.projekt img {width: 100%; height: auto; margin: 0; vertical-align: bottom}
.projekt h2 {position: relative; margin-top: 20%; margin-bottom: 3rem;}
.projekt p {margin-bottom: 20%}
.projekt h2::after {content:""; position: absolute; width: 30px; border-bottom: solid 1px #cbc5b3; top: 40px; right: 50%; margin-right: -15px}
.projekt:nth-child(odd) {background-color: #e5e2d9}
.projekt:nth-child(odd) h2::after {border-bottom: solid 1px #fff;}
a.projekt  {text-decoration: none;}
a:hover.projekt  {color: #000}
a:hover.projekt h2::after {animation-name: hoverstart; animation-duration: 2s; animation-iteration-count: infinite;}
@keyframes hoverstart {
	0% {width: 30px;margin-right: -15px;}
	50%{width: 90px;margin-right: -45px; }
	100%{width: 30px;margin-right: -15px;}
} 
@media (min-width: 750px) {
	.projekt {flex-wrap: nowrap}
	.projekt:nth-child(odd) > div:nth-child(2) {order: 1}
.projekt:nth-child(odd) > div:nth-child(1) {order: 2}
	.projekt:nth-child(odd) > div:nth-child(2)::after, .projekt:nth-child(even) > div:nth-child(2)::after {border-bottom-color: transparent;}
}

@media (min-width: 1000px) {
	.projekt h2::after {top: 45px;}

}
img {vertical-align: bottom}
.raster-vier   {width: 100%}
.raster-fuenf  {width: 100%}
.raster-sechs  {width: 100%}
.raster-sieben {width: 100%}


@media (min-width: 750px) {
	.raster-vier   {width: 33.33334%}
.raster-fuenf  {width: 41.66667%}
.raster-sechs  {width: 50%}
.raster-sieben {width: 58.33334%}
}

.hellgrau {background-color: #f5f3f0; background-image: linear-gradient(to bottom, #fff 0px, #f5f3f0 600px);}
.beige {background-color: #e5e2d9;}

.hellgrau h1, .hellgrau h2 {position: relative; margin-bottom: 3rem;}
.hellgrau h1::after, .hellgrau h2::after {content:""; position: absolute; width: 30px; border-bottom: solid 1px #cbc5b3; bottom: -15px; right: 50%; margin-right: -15px}


.ten img {margin-bottom: 10%}
.five img {margin-bottom: 10%}
.six img {margin-bottom: 10%}
.text {margin: 16% auto 20%}
@media (min-width: 550px) {
.ten img {margin-bottom: 4.8%}
.five img {margin-bottom: 10.2%}
.six img {margin-bottom: 8.3334%}
.text {margin: 6% auto 10%}
}

.back {text-decoration: none; padding-top: 4%; display: block}
.back::before {content:""; display: block; border: solid #ccc5b3; border-width: 0 1px 1px 0; display: inline-block; padding: 3.5px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg); margin: 0px 10px}
.back:hover::before {border: solid #000; border-width: 0 1px 1px 0}

h1 strong, h2 strong {color: #cbc5b3}
.links {text-align: left}
p strong {font-family: "Ciutadella W01 Regular", Helvetica, Arial, "sans-serif"}

#map-canvas {width: 100%; height: 500px}

.karte {
  position: relative;
  min-height: 500px; display: flex;}
  .karte img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }

.bildtext {position: absolute; margin-top: -8%; text-align: left}
.rechts {text-align: right}

.insta {width: 12px; height: 12px; display: inline-block; background-image: url(../images/logo-insta.svg); background-repeat: no-repeat; background-size: contain}

@media (min-width: 550px) {
	.bildtext {margin-top: -4%;}

}
@media (min-width: 1000px) {
	
	.karte {
min-height: 700px; }
}


.team {display: grid; grid-template-columns: 1fr; grid-gap: 4rem; gap: 4rem; margin-bottom: 4rem;}
.team img {width: 80%; margin: 0 auto 4rem}
.team > div {display: grid; align-content: flex-start}

@media (min-width: 750px) {
	.team {grid-template-columns: 1fr 1fr; grid-gap: 5rem; gap: 5rem; margin-bottom: 5rem;}
}

@media (min-width: 1000px) {
	.team {grid-template-columns: 1fr 1fr 1fr; grid-gap: 6rem; gap: 6rem; margin-bottom: 6rem}
}



.footer {padding: 30% 0}

.footer-name {font-family: "Ciutadella W05 Bold", Helvetica, Arial, "sans-serif"; letter-spacing: 0.25rem; text-transform: uppercase; display: block; margin-bottom: 1rem}
.footer a {text-decoration: none}

@media (min-width: 550px) {
	.footer {padding: 20% 0}
	.footer-name {display: inline; margin-bottom: 0}
}
@media (min-width: 750px) {
.footer {padding: 10% 0}
}