@charset "UTF-8";
/*
@mixin inlineTextBgShadow {
    display:inline;
    padding:5px 0 0 0;
    background-color:$black-rgba;

    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;

    box-shadow:15px 0 0 $black-rgba, -15px 0 0 $black-rgba;
}
*/
/* Media Query */
html {
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape while allowing user zoom, iphone! */ }

* {
  margin: 0;
  padding: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-box-flex: 0;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto; }

p,
li,
ul,
h1,
h2,
h3 {
  margin: 0;
  padding: 0; }

picture, img {
  display: block;
  max-width: 100%;
  height: auto; }

a {
  outline: none; }

ul {
  list-style-type: none; }

iframe {
  border: none;
  padding: 0;
  margin: 0; }

input {
  border-radius: 0;
  border: 0;
  outline: 0;
  box-shadow: none; }

html {
  font-size: 62.5%; }

@media (max-width: 550px) {
  html {
    font-size: 54.68%; } }

body {
  text-align: center;
  color: #002f53;
  font-family: "Gotham Narrow A", "Gotham Narrow B";
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 3rem; }
  body.datenschutz main p,
  body.agb main p {
    text-align: left;
    font-size: 1.6rem;
    line-height: 2rem; }
  body.datenschutz main ol li,
  body.agb main ol li {
    text-align: left;
    font-size: 1.6rem;
    line-height: 2rem; }
  body.impressum main h2 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 3rem;
    margin-bottom: 0; }
  @media only screen and (max-width: 700px) {
    body {
      font-size: 2rem;
      line-height: 2.6rem; } }

.layout-width {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem; }
  .layout-width--small {
    max-width: 1000px;
    padding: 0 2rem; }
  .layout-width--smallest {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    padding: 0 2rem; }
  .layout-width .layout-width--small,
  .layout-width .layout-width--smallest {
    padding: 0; }

h1,
h2.h1 {
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 4.8rem;
  margin-bottom: 4rem; }
  @media only screen and (max-width: 700px) {
    h1,
    h2.h1 {
      font-size: 3.2rem;
      line-height: 3.4rem; } }

h2 {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 3.4rem;
  margin-bottom: 4rem; }
  @media only screen and (max-width: 700px) {
    h2 {
      font-size: 2.4rem;
      line-height: 2.6rem; } }

p, ol {
  margin-bottom: 4rem; }
  p.hervorheben, ol.hervorheben {
    padding: 0.5em;
    background-color: #e53009;
    color: white; }
  @media only screen and (max-width: 700px) {
    p, ol {
      margin-bottom: 2rem; } }

a {
  text-decoration: none;
  color: #002f53; }
  a:hover {
    text-decoration: underline; }
  a.download {
    background-color: white;
    padding: 1rem 2rem;
    color: #646464;
    display: inline-block;
    padding-right: 7rem;
    transition: background-color 0.5s; }
    a.download:after {
      content: url("../img/info-icon.svg");
      margin-left: 3rem;
      position: absolute; }
    a.download:hover {
      background-color: #ededed;
      text-decoration: none; }
    a.download--grey {
      background-color: whitesmoke; }
      a.download--grey:hover {
        background-color: #c5c5c5; }
  a.button {
    text-transform: uppercase;
    color: white;
    padding: 1rem 2rem;
    transition: background-color 0.5s;
    letter-spacing: 0.5px; }
    a.button:hover {
      text-decoration: none; }
    a.button--blue-light {
      background-color: #00a0de; }
      a.button--blue-light:hover {
        background-color: #006e98; }
    a.button--red {
      background-color: #e53009; }
      a.button--red:hover {
        background-color: #b02608; }
    a.button--green {
      background-color: #9aca3c; }
      a.button--green:hover {
        background-color: #72a214; }
    a.button--blue {
      background-color: rgba(0, 50, 88, 0.81); }
      a.button--blue:hover {
        background-color: #08304e; }
  a.button-big {
    display: block;
    background: #e53009;
    color: white;
    border: 1.2rem solid white;
    text-transform: uppercase;
    padding: 3rem 0;
    position: absolute;
    width: 100%;
    transition: background-color 0.5s;
    max-width: 720px;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 1px; }
    a.button-big:hover {
      background-color: #b02608;
      text-decoration: none; }
    a.button-big p {
      margin-bottom: 2rem;
      font-weight: 500;
      line-height: 1; }
      a.button-big p:last-child {
        margin-bottom: 0; }

p a {
  text-decoration: underline; }
  p a:hover {
    text-decoration: none; }

.small {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 500; }

.smallest {
  font-size: 1.3rem; }

main ul {
  margin-bottom: 4rem; }
  @media only screen and (max-width: 700px) {
    main ul {
      margin-bottom: 2rem; } }
  main ul li {
    margin-left: 2rem; }
    main ul li:before {
      content: "–";
      position: absolute;
      margin-left: -2rem; }

.big {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 3.4rem; }
  @media only screen and (max-width: 700px) {
    .big {
      font-size: 2.4rem;
      line-height: 2.6rem; } }

.font-light {
  font-weight: 400; }

.arrow-bottom {
  text-align: center; }
  .arrow-bottom a {
    display: inline-block; }

header {
  margin-top: 4rem;
  z-index: 2;
  position: relative; }
  @media only screen and (max-width: 700px) {
    header {
      margin-top: 2rem; } }
  header img {
    display: inline-block; }
  header .swiss-made {
    text-align: right; }
    @media only screen and (max-width: 700px) {
      header .swiss-made img {
        max-height: 5rem; } }
  header .logo {
    text-align: center;
    margin-top: -20px; }
    @media only screen and (max-width: 700px) {
      header .logo {
        margin-top: 0; }
        header .logo img {
          max-height: 10rem; } }

.main-nav {
  margin-bottom: 8rem;
  text-align: center; }
  @media only screen and (max-width: 700px) {
    .main-nav {
      margin-bottom: 4rem; } }
  .main-nav li {
    display: inline-block;
    margin-left: 0; }
    @media only screen and (max-width: 700px) {
      .main-nav li {
        display: block;
        margin-bottom: 2rem; }
        .main-nav li:last-child {
          margin-bottom: 0; } }
    .main-nav li:before {
      content: none; }
    .main-nav li a {
      display: block;
      width: 30rem;
      padding: 1.5rem 0;
      box-sizing: border-box;
      border: 3px solid white;
      border-radius: 10px;
      text-transform: uppercase;
      background-color: rgba(255, 255, 255, 0.3);
      transition: background-color 0.5s, color 0.5s;
      line-height: 3.4rem;
      margin-right: 4rem; }
      @media only screen and (max-width: 1100px) {
        .main-nav li a {
          width: 25rem; } }
      @media only screen and (max-width: 900px) {
        .main-nav li a {
          width: 18rem;
          font-size: 2rem; } }
      @media only screen and (max-width: 700px) {
        .main-nav li a {
          display: block;
          width: 100%;
          padding: 1rem 0; } }
      .main-nav li a:hover {
        text-decoration: none; }
      .main-nav li a.first:hover, .main-nav li a.first.active {
        background-color: #e53009;
        color: white; }
      .main-nav li a.second:hover, .main-nav li a.second.active {
        background-color: #00a0de;
        color: white; }
      .main-nav li a.third {
        margin-right: 0; }
        .main-nav li a.third:hover, .main-nav li a.third.active {
          background-color: #9aca3c;
          color: white; }

.content-block--skew {
  transform: skewY(-3deg);
  padding: 10rem 0 6rem; }
  .content-block--skew > .layout-width {
    transform: skewY(3deg); }
  @media only screen and (max-width: 700px) {
    .content-block--skew {
      padding: 6rem 0 4rem; } }

.content-block--yellow {
  background-color: #fab400;
  margin-top: -5.5rem; }
  @media only screen and (max-width: 700px) {
    .content-block--yellow {
      margin-top: -4.5rem; } }

.content-block--blue {
  background-color: #002f53; }

.content-block--grey {
  background-color: whitesmoke; }

.content-block--special {
  padding-top: 36rem; }
  @media only screen and (max-width: 900px) {
    .content-block--special {
      padding-top: 42vw; } }
  .content-block--special p.small {
    margin-bottom: 8rem; }
    @media only screen and (max-width: 900px) {
      .content-block--special p.small {
        margin-bottom: 4rem; } }

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.product {
  text-align: left;
  font-size: 1.3rem;
  line-height: 2rem;
  padding: 8rem 0; }
  @media only screen and (max-width: 700px) {
    .product {
      padding: 4rem 0; } }
  .product ul {
    font-size: 1.6rem;
    font-weight: 500; }
    .product ul li {
      margin-bottom: 2rem; }
      @media only screen and (max-width: 700px) {
        .product ul li {
          margin-bottom: 1rem; } }
  .product .flex-left {
    width: 25%; }
    @media only screen and (max-width: 900px) {
      .product .flex-left {
        width: 50%;
        margin-bottom: 4rem; } }
    @media only screen and (max-width: 700px) {
      .product .flex-left {
        width: 100%;
        margin-bottom: 2rem; } }
  .product .flex-middle {
    width: 50%; }
    @media only screen and (max-width: 700px) {
      .product .flex-middle {
        width: 100%;
        margin-bottom: 2rem; } }
    .product .flex-middle .pic {
      margin-left: -5rem;
      max-width: 65rem;
      width: 100%; }
      @media only screen and (max-width: 700px) {
        .product .flex-middle .pic {
          margin-left: -2rem; } }
      .product .flex-middle .pic--small {
        max-width: 50rem;
        margin-left: 2rem; }
        @media only screen and (max-width: 1100px) {
          .product .flex-middle .pic--small {
            margin-left: -2rem; } }
  .product .flex-right {
    width: 25%;
    margin: auto 0 7rem; }
    @media only screen and (max-width: 900px) {
      .product .flex-right {
        width: 50%; } }
    @media only screen and (max-width: 700px) {
      .product .flex-right {
        width: 100%;
        margin: auto 0 2rem; } }
    .product .flex-right p {
      margin-bottom: 2rem; }
  .product--first {
    padding-top: 15rem;
    margin-top: -5rem; }
    @media only screen and (max-width: 700px) {
      .product--first {
        padding-top: 10rem; } }

.ueber-traffixx .content-block--yellow {
  border-bottom: 10px solid white; }

.pic-special {
  max-width: 1920px;
  margin: 0 auto;
  margin-bottom: 8rem;
  transform: skewY(-3deg); }
  @media only screen and (max-width: 700px) {
    .pic-special {
      margin-bottom: 4rem; } }
  .pic-special img {
    max-width: 50%;
    float: left; }
    @media only screen and (max-width: 700px) {
      .pic-special img {
        max-width: 100%; }
        .pic-special img:first-child {
          display: none; } }
  .pic-special:after {
    content: "";
    display: block;
    clear: both; }

.special-img {
  margin-bottom: -40rem;
  z-index: 2;
  position: relative; }
  @media only screen and (max-width: 900px) {
    .special-img {
      margin-bottom: -44vw; } }

.gallery {
  margin-bottom: 8rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .gallery a {
    width: calc(100% / 3 - 8rem / 3);
    margin-bottom: 4rem;
    border: 1.2rem solid #feecbf;
    box-sizing: border-box; }
    @media only screen and (max-width: 900px) {
      .gallery a {
        width: calc(100% / 2 - 4rem / 2); } }
    @media only screen and (max-width: 700px) {
      .gallery a {
        width: calc(100% / 2 - 2rem / 2);
        margin-bottom: 2rem; } }
    @media only screen and (max-width: 700px) {
      .gallery a {
        width: 100%; } }

.featherlight-previous {
  content: url("../img/arrow.svg");
  width: 5rem;
  height: 5rem;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  left: 4rem; }
  .featherlight-previous:hover {
    background: none; }
    .featherlight-previous:hover span {
      display: none; }
  @media only screen and (max-width: 700px) {
    .featherlight-previous {
      width: 3rem;
      height: 3rem;
      left: 2rem; } }

.featherlight-next {
  content: url("../img/arrow.svg");
  width: 5rem;
  height: 5rem;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  right: 4rem;
  left: auto; }
  .featherlight-next:hover {
    background: none; }
    .featherlight-next:hover span {
      display: none; }
  @media only screen and (max-width: 700px) {
    .featherlight-next {
      width: 3rem;
      height: 3rem;
      right: 2rem; } }

.slider {
  margin: 0 auto;
  margin-bottom: 12rem;
  max-width: 720px; }
  @media only screen and (max-width: 1000px) {
    .slider {
      max-width: 100%; } }

.slide img {
  border: 1.2rem solid #feecbf;
  box-sizing: border-box;
  margin-bottom: 2rem; }

.slide p {
  margin-bottom: 0;
  max-width: 640px;
  margin: 0 auto; }

.slider-prev,
.slider-next {
  position: absolute;
  top: calc(50% - 9rem);
  cursor: pointer;
  z-index: 2; }
  @media only screen and (max-width: 700px) {
    .slider-prev,
    .slider-next {
      top: 50%;
      max-width: 3rem; } }
  @media only screen and (max-width: 400px) {
    .slider-prev,
    .slider-next {
      top: calc(50% - 3rem); } }

.slider-prev {
  left: 4rem;
  transform: translateY(-50%) rotate(90deg); }

.slider-next {
  right: 4rem;
  transform: translateY(-50%) rotate(-90deg); }

footer {
  color: white;
  font-size: 1.3rem;
  line-height: 2rem;
  overflow: hidden;
  padding-top: 5vw;
  text-align: center;
  letter-spacing: 0.5px; }
  footer.margin-top {
    padding-top: calc(5vw + 17rem); }
  footer a {
    color: white;
    text-transform: uppercase; }
    footer a:hover {
      text-decoration: underline; }
  footer p {
    margin-bottom: 8rem; }
  footer .footer-logo {
    text-align: center; }
    footer .footer-logo img {
      display: inline-block;
      max-height: 4rem; }
  footer .footer-menu ul li {
    display: inline-block;
    border-right: 1px solid white;
    padding: 0 2rem; }
    footer .footer-menu ul li:first-child {
      padding-left: 0; }
    footer .footer-menu ul li:last-child {
      padding-right: 0;
      border-right: 0; }
  footer .footer-bg-fix {
    background-color: #002f53;
    position: absolute;
    bottom: 0;
    height: 5vw;
    transform: skewY(3deg);
    width: 100%;
    z-index: -1; }

/*# sourceMappingURL=main.css.map */