* {
  margin: 0;
  padding: 0;
  outline: none;
}
/*
   Set the @property (width, margin, padding) of an element in percent.

   @elemCols: Is the amount of columns the element needs.
   @parentCols: Is the amount of columns the parent of the element has. Attention: padding and margin belong to the parent's width!
                The whole page has:
                - mobile: 36 columns (=100%)- 1 column is 2.77778%
                -tablet/desktop: 45 columns (=100%) - 1 column is 2.2222%
*/
body {
  background-color: #16252f;
  max-width: 1200px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}
.clear {
  clear: both;
}
.inlineBlock {
  display: inline-block;
}
.hidden,
.hidden2 {
  display: none;
  position: relative;
}
.ellipsis {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tripsSlider {
  overflow: hidden;
}
.slickItem {
  float: left;
  position: relative;
  width: 100%;
}
.btn {
  position: absolute;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  cursor: pointer;
}
.btn.lightDark {
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 1px;
  background-color: #16252f;
  color: #ffffff;
}
.btn.lightBlue {
  background-color: #587e96;
  color: #ffffff;
}
.btn.blueDark,
.btn .blueDark {
  background-color: #16252f;
  color: #587e96;
}
.btn.blueLight,
.btn .blueLight {
  background-color: #ffffff;
  color: #16252f;
}
.btn.orangeDark {
  background-color: #16252f;
  color: #dd7d36;
}
.btn.lightOrange {
  background-color: #dd7d36;
  color: #ffffff;
}
.btn.top {
  top: 0;
  bottom: auto;
}
.contentBox {
  position: relative;
  overflow: hidden;
}
.contentBox img:not(.origWidth) {
  width: 100%;
}
.contentBox.profile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}
.contentBox .profileRing {
  position: absolute;
  z-index: 3;
}
.contentBox .profileRing .circle {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5%;
  background: url("../img//navi/profil.svg") no-repeat 0 0 / 100% 100%;
}
.contentBox .profileRing .inlineBlock {
  vertical-align: middle;
}
.contentBox .profileRing:hover {
  cursor: pointer;
}
.contentBox .profileRing:hover .circle {
  background: url("../img//navi/profil-aktiv.svg") no-repeat 0 0 / 100% 100%;
}
.contentBox .profileRing.active .circle {
  background: url("../img//navi/profil-aktiv.svg") no-repeat 0 0 / 100% 100%;
}
.contentBox .profileRing.ce {
  top: 7%;
  left: 26%;
}

.contentBox .profileRing.ce2 {
  top: 7%;
  left: 26%;
}
.contentBox .profileRing.success {
  top: 32%;
  left: 18%;
}
.contentBox .profileRing.success .circle {
  margin-right: 28%;
}
.contentBox .profileRing.record {
  bottom: 3%;
  left: 26%;
}
.activeProfilLayer {
  opacity: 0.8;
  background-color: rgba(22, 37, 47, 0.3);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  z-index: 1;
  position: fixed;
}
.home .contentBox.bgWhite:not(.profile) p:not(:first-of-type) {
  display: none;
}
h2.conceptBox {
  cursor: pointer;
}
h2.conceptBox:hover {
  color: #dd7d36;
}
.profile {
  z-index: 3;
}
.dark {
  color: #16252f;
}
.light {
  color: #ffffff;
}
.blue {
  color: #587e96;
}
.orange {
  color: #dd7d36;
}
.bgBlue {
  background-color: #587e96;
}
.bgOrange {
  background-color: #dd7d36;
}
.bgWhite {
  background-color: #ffffff;
}
@font-face {
  font-family: "DINPro-CondBlack";
  src: url("../fonts//DINPro-CondBlack.otf");
}
@font-face {
  font-family: "SourceSansPro-Semibold";
  src: url("../fonts//SourceSansPro/SourceSansPro-Semibold.ttf");
}
@font-face {
  font-family: "SourceSansPro-Regular";
  src: url("../fonts//SourceSansPro/SourceSansPro-Regular.ttf");
}
@font-face {
  font-family: "SourceSansPro-Light";
  src: url("../fonts//SourceSansPro/SourceSansPro-Light.ttf");
}
h1 {
  font-family: DINPro-CondBlack, helvetica, arial;
  text-transform: uppercase;
  color: #dd7d36;
  margin-bottom: 1.53846154%;
}
@media screen and (max-width: 720px) {
  h1 {
    font-size: 22px;
    line-height: 1.136;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  h1 {
    font-size: 3.5vw;
  }
}
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 42px;
  }
}
h2 {
  font-family: DINPro-CondBlack, helvetica, arial;
  text-transform: uppercase;
}
@media screen and (max-width: 720px) {
  h2 {
    font-size: 19px;
    line-height: 1.16;
    padding-bottom: 1.125%;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  h2 {
    font-size: 3.5vw;
  }
}

h2:not(.noElips) {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 1200px) {
  h2 {
    font-size: 42px;
  }
}
h2:empty {
  display: none;
}

h3 {
  font-family: SourceSansPro-Regular, helvetica, arial;
  text-transform: uppercase;
}
@media screen and (max-width: 720px) {
  h3 {
    font-size: 14px;
    line-height: 1.214;
    padding-bottom: 1.125%;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  h3 {
    font-size: 1.83vw;
    line-height: 1.136;
  }
}
@media screen and (min-width: 1200px) {
  h3 {
    font-size: 22px;
    line-height: 1.136;
  }
}
h3:empty {
  display: none;
}
h4 {
  font-family: SourceSansPro-Semibold, helvetica, arial;
}
@media screen and (max-width: 720px) {
  h4 {
    font-size: 14px;
    line-height: 1.357;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  h4 {
    font-size: 1.58vw;
    line-height: 2.17;
  }
}
@media screen and (min-width: 1200px) {
  h4 {
    font-size: 19px;
    line-height: 2.17;
  }
}
h4:empty {
  display: none;
}
.btnFont {
  font-family: SourceSansPro-Regular, helvetica, arial;
  text-decoration: none;
}
.btnFont.dark {
  color: #16252f;
}
.btnFont.light {
  color: #dbdbdb;
}
.btnFont.orange {
  color: #dd7d36;
}
.btnFont:hover {
  text-decoration: none;
}
@media screen and (max-width: 720px) {
  .btnFont {
    font-size: 12px;
    line-height: 1.999;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  .btnFont {
    font-size: 1.42vw;
  }
}
@media screen and (min-width: 1200px) {
  .btnFont {
    font-size: 17px;
  }
}
a:not(.underline) {
  text-decoration: none;
}
a.underline {
  text-decoration: underline;
}
.dark a {
  color: #16252f;
}
.light a {
  color: #ffffff;
}
p:empty,
li:empty {
  display: none;
}
p:not(.bold),
li:not(.bold),
p :not(strong),
li :not(strong) {
  font-family: SourceSansPro-Light, helvetica, arial;
}
p.bold,
li.bold,
p strong,
li strong {
  font-family: SourceSansPro-Semibold, helvetica, arial;
}
@media screen and (max-width: 720px) {
  p,
  li {
    font-size: 14px;
    line-height: 1.357;
  }
  p.high,
  li.high {
    line-height: 2.17;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  p:not(.big),
  li:not(.big) {
    font-size: 1.58vw;
  }
  p.big,
  li.big {
    line-height: 2.42vw;
    font-size: 1.83vw;
  }
  p.high,
  li.high {
    line-height: 2.17;
  }
}
@media screen and (min-width: 1200px) {
  p:not(.big),
  li:not(.big) {
    font-size: 19px;
  }
  p.big,
  li.big {
    font-size: 22px;
  }
  p.high,
  li.high {
    line-height: 2.17;
  }
}
li {
  list-style-type: none;
}
footer {
  text-align: center;
}
footer span {
  color: #dbdbdb;
}
.articleIntro {
  position: relative;
}
article.trip {
  background-color: #ffffff;
  position: relative;
}
article.trip img {
  width: 100%;
}
article .details p.high.bold {
  padding-top: 2.36363636%;
}
.runnerTrips .oneColOverview {
  position: relative;
}
.runnerTrips .oneColOverview.pad_2 {
  padding-top: 3.36363636%;
  padding-left: 4.54545455%;
  padding-right: 4.54545455%;
  padding-bottom: 5.11363636%;
}
.runnerTrips .oneColOverview.white h2 {
  padding-bottom: 0.90909091%;
}
.runnerTrips .oneColOverview p:not(:last-child) {
  padding-bottom: 0.90909091%;
}
.runnerTrips .oneColContent h2 {
  padding-bottom: 0.90909091%;
}
.runnerTrips .overviewContent .details.hidden {
  padding-top: 2.27272727%;
}
.runnerTrips .overviewContent .details {
  position: relative;
}
.runnerTrips .overviewContent .tripinfo a {
  text-decoration: underline;
}
.download a {
  text-decoration: underline;
}
.download .downloadOverview {
  position: relative;
}
.download .downloadContent .details img {
  height: auto !important;
  text-align: center;
  width: auto;
  max-width: 100%;
}
.detailsWrapper a {
  text-decoration: underline;
}
.archive article.open .archiveText p {
  white-space: normal;
}
.archive .archiveContent {
  padding-bottom: 6.81818182%;
}
.archive .archiveText p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.archive .detailsWrapper :not(figure) img {
  width: auto;
}
.zigzag {
  position: relative;
}
.zigzag:not(.bgOrange) {
  background-color: #587e96;
}
.zigzag.bgOrange {
  background-color: #dd7d36;
}
.zigzag > *:first-child {
  cursor: pointer;
}
.zigzag > *:first-child .content {
  vertical-align: middle;
}
.zigzag > *:last-child {
  display: none;
}
.h3 {
  color: #16252f;
  margin-top: 3.27272727%;
  margin-bottom: 1.63636364%;
}
@media screen and (max-width: 720px) {
  .h3 {
    font-family: SourceSansPro-Semibold, helvetica, arial;
    font-size: 14px;
    line-height: 1.357;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  .h3 {
    font-family: SourceSansPro-Regular, helvetica, arial;
    font-size: 1.58vw;
  }
}
@media screen and (min-width: 1200px) {
  .h3 {
    font-family: SourceSansPro-Regular, helvetica, arial;
    font-size: 19px;
  }
}
table {
  border-collapse: collapse;
  width: 100%;
}
table tr td,
table th {
  color: #16252f;
  font-family: SourceSansPro-Light, helvetica, arial;
  height: 31.25px;
}
@media screen and (max-width: 720px) {
  table tr td,
  table th {
    font-size: 12px;
    line-height: 1.167;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  table tr td,
  table th {
    font-size: 1.17vw;
  }
}
@media screen and (min-width: 1200px) {
  table tr td,
  table th {
    font-size: 14px;
  }
}
table th {
  text-align: left;
}
table th:first-child {
  padding-left: 2.27272727%;
}
table th.head {
  background-color: #dee5ea;
  font-weight: bold;
}
table tr {
  border-bottom: 1px solid #bccbd5;
}
table tr:first-child {
  border-bottom: none;
}
table tr td.center {
  text-align: center;
}
table tr td.lineHeight {
  line-height: 1.65;
}
.succes .table_two {
  margin-top: 5%;
}
.succes table {
  margin-bottom: 5%;
}
.succes table:last-child {
  margin-bottom: 0%;
}
.succes table tr td.border {
  border-top: 1px solid #bccbd5;
  border-bottom: 1px solid #bccbd5;
}
.succes table tr td:first-child {
  padding-left: 2.27272727%;
}
.succes table tr td:last-child {
  padding-right: 2.27272727%;
}
.succes table tr td:first-child,
.succes table tr td:last-child {
  width: 40.90909091%;
}
.succes table tr td:nth-child(2) {
  width: 18.18181818%;
}
.record p.orangeTable {
  color: #dd7d36;
}
@media screen and (max-width: 720px) {
  .record p.orangeTable {
    font-size: 12px;
    line-height: 1.167;
  }
}
@media screen and (min-width: 721px) and (max-width: 1199px) {
  .record p.orangeTable {
    font-size: 1.17vw;
  }
}
@media screen and (min-width: 1200px) {
  .record p.orangeTable {
    font-size: 14px;
  }
}
.record table {
  margin-bottom: 1.04545455%;
}
.record table tr td.orangeTable {
  color: #dd7d36;
}
.record table tr td:first-child {
  padding-left: 2.27272727%;
  width: 13.63636364%;
}
.record table tr td:nth-child(2) {
  width: 27.27272727%;
}
.record table tr td:nth-child(3),
.record table tr td:nth-child(4) {
  width: 18.18181818%;
}
.record table tr td:last-child {
  padding-right: 2.27272727%;
  width: 22.72727273%;
}