.basic-transition {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.mapbox-item {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 10px;
  margin-left: 10px;
  width: 100%;
  max-width: 600px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.mapbox-item:first-child {
  margin-top: -20px;
}
@media (max-width: 800px) {
  .mapbox-item {
    max-width: 100%;
    margin-left: 0;
    float: none;
  }
}
.mapbox-item .mapbox-text {
  width: 100%;
  margin-top: -10px;
}
.mapbox-item .mapbox-text h2 {
  margin-top: 10px;
  font-size: 24px;
}
.mapbox-item.active .mapbox-text {
  width: 768px;
}
.mapbox-item .mapbox-text-actual-top {
  margin-top: -4px;
}
@media (max-width: 800px) {
  .mapbox-item .mapbox-text {
    width: 100%;
  }
  .mapbox-item.active .mapbox-text {
    width: 100%;
  }
}
.mapbox-item .mapbox {
  background: #dcddde;
  color: #4d4d4c;
  border-radius: 5px;
  box-sizing: border-box;
  transform: scale(1);
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  /*.basic-transition;*/
}
.mapbox-item .mapbox:hover {
  background: #f9d200;
  transform: scale(1.02);
}
.mapbox-item .mapbox .mapbox-info {
  padding: 5px 15px;
  background-color: #f9d200;
  border-radius: 5px 5px 0 0;
  border-bottom: 5px solid #fff;
}
.mapbox-item .mapbox .mapbox-info span {
  display: none;
}
.mapbox-item .mapbox.mapbox-state-0 .mapbox-info {
  background-color: #f9d200;
}
.mapbox-item .mapbox.mapbox-state-0 .mapbox-info span.st0 {
  display: inline;
}
.mapbox-item .mapbox.mapbox-state-1 .mapbox-info {
  background-color: #f5a300;
}
.mapbox-item .mapbox.mapbox-state-1 .mapbox-info span.st1 {
  display: inline;
}
.mapbox-item .mapbox.mapbox-state-1:hover {
  color: #fff;
}
.mapbox-item .mapbox.mapbox-state-2 .mapbox-info {
  background-color: #6eb400;
}
.mapbox-item .mapbox.mapbox-state-2 .mapbox-info span.st2 {
  display: inline;
}
.mapbox-item .mapbox .mapbox-head {
  font-weight: 700;
  padding: 15px;
  height: 50px;
}
.mapbox-item .mapbox .mapbox-head .mapbox-title {
  font-size: 22px;
  margin-bottom: 6px;
}
.mapbox-item .mapbox .mapbox-head .mapbox-subtitle {
  font-size: 16px;
}
.mapbox-item.active {
  width: 1035px;
  max-width: 100%;
  /*            .trafficinfo-detail{
                        max-height: 1000px;
                    }*/
}
.mapbox-item.active .mapbox {
  background: #f9d200;
}
.mapbox-item.active .mapbox:hover {
  transform: scale(1);
}
.mapbox-item.active .mapbox.mapbox-state-1 {
  color: #fff;
}
@media (max-width: 800px) {
  .mapbox-item.active {
    width: 1035px;
  }
}
.mapbox-item.notransition {
  transition: none !important;
}
.mapbox-item.notransition .mapbox {
  transition: none !important;
}
.mapbox-detail {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  overflow: hidden;
  max-height: 0px;
  height: auto;
  position: relative;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  /*width: 768px;*/
}
.mapbox-detail .mapbox-map-img {
  display: none;
}
.mapbox-detail .mapbox-map-img-outer-start {
  visibility: hidden;
  width: auto;
  height: 442px;
}
.mapbox-detail .mapbox-map-img-outer-start img {
  display: block;
}
.mapbox-detail .mapbox-map-img-outer {
  width: auto;
  height: 442px;
}
.mapbox-detail .mapbox-map-img-outer img {
  display: block;
}
@media (max-width: 800px) {
  .mapbox-detail {
    width: 100%;
  }
}
.mapbox-detail .mapbox-detail-inner {
  /*        width: 1033px;
                max-width: 100%;*/
  padding: 10px 0;
  box-sizing: border-box;
  position: relative;
}
.mapbox-detail .mapbox-detail-inner .mapbox-map {
  /*            overflow: hidden;
                        max-height: 444px;*/
}
.mapbox-detail .mapbox-detail-inner .mapbox-maps {
  position: relative;
}
.mapbox-detail .mapbox-detail-inner .mapbox-maps .mapbox-map-item {
  padding: 1px;
}
.mapbox-detail .mapbox-detail-inner .mapbox-maps .mapbox-switchbtns {
  position: absolute;
  z-index: 50;
  top: 15px;
  left: 15px;
}
.mapbox-detail .mapbox-detail-inner .mapbox-text {
  margin-bottom: 45px;
  margin-top: -10px;
}
.mapbox-detail .mapbox-detail-inner .mapbox-text .mapbox-text-inner {
  padding: 0 15px;
}
.mapbox-detail .mapbox-detail-inner a.downloadlink {
  line-height: inherit;
  font-size: 16px;
  padding-top: 4px;
  font-weight: bold !important;
}
.mapbox-detail .mapbox-detail-inner a.downloadlink:before {
  margin-top: -1px;
}
.mapbox-bauabschnitt .mapbox-map .mapbox-zoombtns {
  display: none;
}
.notransition .mapbox-detail {
  transition: none !important;
}
.active .mapbox-detail {
  max-height: 3000px;
}
.mapbox-btn {
  margin-left: 5px;
  width: 20px;
  padding: 10px 0;
  border-radius: 5px;
  border: 2px solid #57585b;
  cursor: pointer;
  background: no-repeat center center #ECECEC;
  background-size: 14px;
}
.mapbox-btn.mapbox-zoombtn-plus {
  background-image: url(../images/mapbox/plus.svg);
  background-size: 11px;
}
.mapbox-btn.mapbox-zoombtn-plus:hover {
  background-color: #57585b;
  background-image: url(../images/mapbox/plus_white.svg);
  background-size: 11px;
}
.mapbox-btn.mapbox-textbtn {
  padding: 0px 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: #57585b;
}
.mapbox-btn.mapbox-textbtn.btn-active[data-type="aktuell"] {
  background: #FFDC00;
}
.mapbox-btn.mapbox-textbtn.btn-active[data-type="fertig"] {
  color: #fff;
  background: #6AA919;
}
.mapbox-btn.mapbox-textbtn.btn-active[data-type="geplant"] {
  color: #fff;
  background: #F7A700;
}
.mapbox-btn.mapbox-zoombtn-minus {
  background-image: url(../images/mapbox/minus.svg);
  background-size: 11px;
}
.mapbox-btn.mapbox-zoombtn-minus:hover {
  background-color: #57585b;
  background-image: url(../images/mapbox/minus_white.svg);
  background-size: 11px;
}
.mapbox-btn.inactive {
  opacity: 0.5;
  pointer-events: none;
}
.mapbox-btn.btn-active {
  background-color: #57585b;
}
.mapbox-btn[data-type="0"] {
  background-image: url(../images/mapbox/map.svg);
}
.mapbox-btn[data-type="0"].btn-active {
  background-image: url(../images/mapbox/map_weiss.svg);
}
.mapbox-btn[data-type="1"] {
  background-image: url(../images/mapbox/verkehr_grau.svg);
}
.mapbox-btn[data-type="1"].btn-active {
  background-image: url(../images/mapbox/verkehr_weiss.svg);
}
.mapbox-btn[data-type="2"] {
  background-image: url(../images/mapbox/auto_grau.svg);
}
.mapbox-btn[data-type="2"].btn-active {
  background-image: url(../images/mapbox/auto_weiss.svg);
}
.mapbox-btn[data-type="3"] {
  background-image: url(../images/mapbox/rad_grau.svg);
}
.mapbox-btn[data-type="3"].btn-active {
  background-image: url(../images/mapbox/rad_weiss.svg);
}
.mapbox-map {
  background-color: #e9eaeb;
  /*    overflow: hidden;
        height: 400px;*/
  border-radius: 5px;
  box-shadow: 0px 0 3px #939598;
  margin-bottom: 40px;
}
.mapbox-map .mapbox-zoombtns {
  position: absolute;
  z-index: 200;
  top: 15px;
  right: 15px;
}
.mapbox-map .mapbox-map-img-outer {
  text-align: center;
}
.mapbox-map .mapbox-map-img-outer img {
  max-width: none;
  cursor: move;
  display: inline-block;
}
.overviewmap {
  margin-bottom: 40px;
}
.overviewmap .mapbox-detail {
  max-height: none;
}
.overviewmap .mapbox-detail .mapbox-detail-inner {
  padding: 0;
}
.overviewmap .mapbox-textbtn {
  width: auto;
}
.overviewmap .mapbox-map {
  margin-bottom: 0px;
}
/* Baustellenübersicht Tabelle */
.table-building {
  margin: 0;
  margin-bottom: 30px;
}
.table-building .togglebox-detail {
  padding-left: 0;
}
.table-building table tr td {
  text-align: left;
  border: 2px solid #fff;
  vertical-align: middle;
  padding: 5px 10px;
  background-color: #ECECEC;
  font-weight: bold;
  /*                &.year {
                                    span {
                                        &:before {
                                            content: '20';
                                        }
                                    }
                                }*/
}
.table-building table tr td.tbltd1 {
  width: 46%;
  border-left: 0px solid #fff;
}
.table-building table tr td.tbltd2 {
  width: 46%;
}
.table-building table tr td.tbltd3 {
  width: 4%;
}
.table-building table tr td.tbltd4 {
  width: 4%;
}
.table-building table tr td.builtstate-1 {
  background-color: #FFDC00;
}
.table-building table tr td.builtstate-3 {
  background-color: #F7A700;
}
.table-building table tr td.builtstate-4 {
  background-color: #6AA919;
}
.table-building table tr.builttab-header td {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background: none;
  padding: 5px 0;
}
.table-building table tr.builttab-header td.year {
  padding: 5px 10px;
}
.table-building table tr.builttab-header td:first-child {
  text-align: left;
}
.legende {
  margin-top: 30px;
}
.legende .legende-item {
  margin-right: 30px;
  line-height: 25px;
  font-weight: 800;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  font-weight: bold;
}
.legende .legende-item:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: top;
  margin-right: 8px;
  border-radius: 3px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.legende .legende-item.legende-green:before {
  background-color: #6eb400;
}
.legende .legende-item.legende-green:hover:before {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.legende .legende-item.legende-orange:before {
  background-color: #f5a300;
}
.legende .legende-item.legende-orange:hover:before {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.legende .legende-item.legende-yellow:before {
  background-color: #f9d200;
}
.legende .legende-item.legende-yellow:hover:before {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.a-planung .mapbox-item.active .mapbox,
.a-planung .mapbox-item:hover .mapbox {
  background-color: #F7A700;
}
.a-fertig .mapbox-item.active .mapbox,
.a-fertig .mapbox-item:hover .mapbox {
  background-color: #6AA919;
  color: #fff;
}
/*Buildbox Übersicht Bauabschnitte */
.build-item {
  margin-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  max-width: 600px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
@media (max-width: 800px) {
  .build-item {
    max-width: 100%;
    margin-left: 0;
    float: none;
  }
}
.build-item .buildbox-col1 {
  width: 70%;
  display: inline-block;
}
@media (max-width: 400px) {
  .build-item .buildbox-col1 {
    width: 75%;
  }
}
.build-item .buildbox-col2.year1,
.build-item .buildbox-col3.year2 {
  width: 14%;
  display: inline-block;
  text-align: center;
}
.build-item .buildbox-col2.year1 p,
.build-item .buildbox-col3.year2 p {
  font-size: 20px;
  color: #5a5a5a;
  margin-bottom: 10px;
  font-weight: bold;
}
@media (max-width: 400px) {
  .build-item .buildbox-col2.year1,
  .build-item .buildbox-col3.year2 {
    width: 11%;
  }
  .build-item .buildbox-col2.year1 p,
  .build-item .buildbox-col3.year2 p {
    font-size: 13px;
  }
}
.build-item .buildbox {
  display: block;
  background: #dcddde;
  color: #4d4d4c;
  margin-bottom: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  transform: scale(1);
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}
.build-item .buildbox:hover {
  background: #f9d200;
  transform: scale(1.02);
}
.build-item .buildbox.buildbox-state-0:hover {
  background-color: #f9d200;
}
.build-item .buildbox.buildbox-state-0:hover .buildbox-years .buildbox-year-1,
.build-item .buildbox.buildbox-state-0:hover .buildbox-years .buildbox-year-2 {
  /*                        background-color: @yellow;
                                                border-left:none;*/
}
.build-item .buildbox.buildbox-state-1:hover {
  background-color: #f5a300;
  color: #fff;
}
.build-item .buildbox.buildbox-state-1:hover .buildbox-years .buildbox-year-1,
.build-item .buildbox.buildbox-state-1:hover .buildbox-years .buildbox-year-2 {
  /*                        background-color: @orange;
                                                border-left:none;*/
}
.build-item .buildbox.buildbox-state-2:hover {
  background-color: #6eb400;
  color: #fff;
}
.build-item .buildbox.buildbox-state-2:hover .buildbox-years .buildbox-year-1,
.build-item .buildbox.buildbox-state-2:hover .buildbox-years .buildbox-year-2 {
  /*                        background-color: @green;
                                                border-left:none;*/
}
.build-item .buildbox .buildbox-head {
  font-weight: 700;
  width: 64%;
  padding: 15px 0 15px 15px;
  min-height: 50px;
}
.build-item .buildbox .buildbox-head .buildbox-title {
  font-size: 22px;
  margin-bottom: 6px;
}
.build-item .buildbox .buildbox-head .buildbox-subtitle {
  font-size: 16px;
}
.build-item .buildbox .buildbox-years {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0;
  width: 30%;
}
.build-item .buildbox .buildbox-years .buildbox-year-1,
.build-item .buildbox .buildbox-years .buildbox-year-2 {
  width: 48%;
  height: 100%;
  float: right;
  border-left: 2px solid #fff;
}
.build-item .buildbox .buildbox-years .buildbox-year-1.buildbox-state-0,
.build-item .buildbox .buildbox-years .buildbox-year-2.buildbox-state-0 {
  background-color: #f9d200;
}
.build-item .buildbox .buildbox-years .buildbox-year-1.buildbox-state-1,
.build-item .buildbox .buildbox-years .buildbox-year-2.buildbox-state-1 {
  background-color: #f5a300;
}
.build-item .buildbox .buildbox-years .buildbox-year-1.buildbox-state-2,
.build-item .buildbox .buildbox-years .buildbox-year-2.buildbox-state-2 {
  background-color: #6eb400;
}
@media (max-width: 400px) {
  .build-item .buildbox .buildbox-years .buildbox-year-1,
  .build-item .buildbox .buildbox-years .buildbox-year-2 {
    width: 40%;
  }
}
.build-item .buildbox .buildbox-years .buildbox-year-2 {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.build-item.active {
  width: 1035px;
  max-width: 100%;
  /*            .trafficinfo-detail{
                        max-height: 1000px;
                    }*/
}
.build-item.active .buildbox {
  background: #f9d200;
}
.build-item.active .buildbox:hover {
  transform: scale(1);
}
@media (max-width: 800px) {
  .build-item.active {
    width: 1035px;
  }
}
.build-item.onecol .buildbox-col1 {
  width: 85%;
}
.build-item.onecol .buildbox-col3 {
  display: none;
}
.build-item.onecol .buildbox-years .buildbox-year-1 {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.build-item.onecol .buildbox-years .buildbox-year-2 {
  display: none;
}
@media (max-width: 1024px) {
  .ce-group .mapbox-item {
    margin-left: 0px;
  }
  .mapbox-detail .mapbox-map-img-outer-start {
    /*        transform: matrix(2, 0, 0, 2, 1, 20);
                transform-origin: 50% 50% 0px;*/
  }
  .mapbox-detail .mapbox-map-img-outer {
    /*transform: matrix(0.8, 0, 0, 0.8, 1, 20);*/
  }
}
@media (max-width: 900px) {
  .mapbox-detail .mapbox-map-img-outer-start,
  .mapbox-detail .mapbox-map-img-outer {
    height: 330px;
  }
}
@media (max-width: 650px) {
  .mapbox-detail .mapbox-map-img-outer-start {
    height: 36vw;
  }
  .mapbox-detail .mapbox-map-img-outer-start img {
    max-width: 100%;
  }
  .mapbox-detail .mapbox-map-img-outer {
    height: 250px;
  }
  .mapbox-map {
    /*height: 190px;*/
  }
  .mapbox-map .mapbox-zoombtns {
    top: auto;
    bottom: 10px;
    right: 10px;
  }
  .mapbox-item .mapbox-map {
    /*height: 300px;*/
  }
  .mapbox-detail .mapbox-detail-inner .mapbox-maps .mapbox-switchbtns {
    left: 10px;
    top: 10px;
  }
  .mapbox-item .mapbox .mapbox-head .mapbox-title {
    font-size: 16px;
    margin-bottom: 0px;
  }
  .a-aktuell .ce-picture img,
  .a-planung .ce-picture img,
  .a-fertig .ce-picture img {
    width: 60px;
  }
}