@font-face {
  font-family: 'DINPro';
  src: url("../fonts/DINPro-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'DINPro';
  src: url("../fonts/DINPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'DINPro';
  src: url("../fonts/DINPro-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'DINPro';
  src: url("../fonts/DINPro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'DINPro';
  src: url("../fonts/DINPro-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal; }

@keyframes skew {
  0% {
    transform: rotate(5deg) scale(0.9) skew(15deg); }
  10% {
    transform: rotate(12deg) scale(0.8) skew(-10deg); }
  18% {
    transform: rotate(5deg) scale(0.8) scaleY(1.1) skew(20deg); }
  25% {
    transform: rotate(-12deg) scale(0.7) scaleX(1.2) skew(-15deg); }
  35% {
    transform: rotate(-10deg) scale(0.9) skew(12deg); }
  40% {
    transform: rotate(-25deg) scale(0.8) skew(-15deg); }
  50% {
    transform: rotate(23deg) scale(0.9) scaleX(0.8) skew(-20deg); }
  55% {
    transform: rotate(40deg) scale(0.9) scaleX(0.9) skew(-5deg); }
  65% {
    transform: rotate(74deg) scale(0.8) scaleY(1.8) skew(20deg); }
  75% {
    transform: rotate(36deg) scale(0.7) scaleY(1.6) skew(-15deg); }
  85% {
    transform: rotate(-10deg) scale(0.9) skew(12deg); }
  90% {
    transform: rotate(10deg) scale(0.8) scaleY(0.8) skew(-12deg); }
  100% {
    transform: rotate(5deg) scale(0.9) skew(15deg); } }

@keyframes slideIn {
  0% {
    transform: translateX(10%);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.5); }
  100% {
    opacity: 1;
    transform: scale(1); } }

body {
  font-family: 'DINPro', sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased; }
  body.t-default {
    background: black; }

form {
  opacity: 0;
  position: absolute; }

header {
  position: relative;
  height: 300px;
  padding: 50px;
  box-sizing: border-box;
  z-index: 200; }
  header .logo img {
    width: 245px;
    height: 74px;
    display: block; }
  header .claim {
    position: absolute;
    bottom: 50px;
    text-transform: uppercase; }
    header .claim span {
      display: block;
      color: #898989;
      line-height: 1;
      font-weight: normal;
      margin-bottom: -5px;
      margin-top: 5px;
      font-size: 2rem; }
      header .claim span:first-child {
        font-weight: 900;
        margin-bottom: auto;
        margin-top: auto;
        font-size: 2.5em; }

.bild {
  position: absolute;
  top: 300px;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  animation: .5s ease-in-out 0s 1 fadeIn; }
  .bild img {
    display: block;
    width: 100%; }
  .bild .arrows {
    position: absolute;
    left: 50px;
    bottom: 25px;
    right: 50%;
    z-index: 5000; }
    .bild .arrows .arr {
      display: inline-block;
      background-attachment: #A1007B;
      color: white;
      text-decoration: none;
      padding: 8px 0 10px 0;
      margin-right: 25px; }
      .bild .arrows .arr .pfeil {
        content: '';
        display: inline-block;
        width: 30px;
        height: 30px;
        background-size: 100%;
        vertical-align: middle;
        margin-right: 5px; }
      .bild .arrows .arr .title {
        display: inline-block;
        vertical-align: middle; }
        .bild .arrows .arr .title span {
          display: block; }
          .bild .arrows .arr .title span:first-child {
            font-weight: 900; }
      .bild .arrows .arr.prev .pfeil {
        background-image: url(../images/pfeil-links.png); }
      .bild .arrows .arr.next {
        position: absolute;
        right: 50px;
        text-align: right; }
        .bild .arrows .arr.next .pfeil {
          background-image: url(../images/pfeil-rechts.png);
          margin-left: 5px;
          margin-right: 0; }

.bg {
  background-color: #A1007B;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0;
  animation: .5s ease-in-out .5s 1 slideIn;
  animation-fill-mode: forwards; }
  .bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background-position: right;
    background-image: url(../images/ecke.png);
    background-size: 100% 100%;
    background-repeat: no-repeat; }

.animation .magenta .magenta-inner {
  background-color: #A1007B;
  background-color: #A1007B;
  mix-blend-mode: multiply;
  top: 200px;
  left: 200px;
  right: 200px;
  bottom: 100px;
  position: absolute;
  z-index: 4000;
  animation: skew 50s ease-in-out infinite; }

.animation .magenta .magenta-title {
  font-size: 80px;
  color: white;
  text-align: center;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -120px;
  position: absolute;
  z-index: 5000; }
  .animation .magenta .magenta-title span {
    display: block; }
    .animation .magenta .magenta-title span:first-child {
      font-size: 1.2em;
      font-weight: 900;
      margin-bottom: -10px; }
  .animation .magenta .magenta-title a.random {
    display: block;
    position: fixed;
    bottom: 50px;
    right: 50px;
    background: white;
    background-image: url(../images/random.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
    width: 120px;
    height: 80px;
    margin-top: 20px;
    border-radius: 5px; }

.animation .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  .animation .slider .b {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover; }

.content {
  position: absolute;
  z-index: 1000;
  right: 0;
  bottom: 0;
  top: 0;
  left: 50%;
  color: white;
  padding: 0 50px;
  opacity: 0;
  animation: .5s ease-in-out .5s 1 slideIn;
  animation-fill-mode: forwards; }
  .content .title {
    height: 300px;
    position: relative; }
    .content .title h1 {
      font-size: 3.5em;
      position: absolute;
      top: 45px;
      margin: 0;
      text-transform: uppercase;
      display: inline;
      vertical-align: baseline;
      line-height: 1;
      font-weight: 900; }
      .content .title h1 span {
        display: block;
        font-size: 2rem;
        font-weight: normal;
        margin-top: 5px; }
        .content .title h1 span:first-child {
          font-size: 1em;
          font-weight: bold;
          margin-top: auto; }
    .content .title .tabs {
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0px;
      display: flex;
      justify-content: space-between;
      border-bottom: 3px solid rgba(255, 255, 255, 0.25); }
      .content .title .tabs .pfeil {
        background-image: url(../images/pfeil.png);
        position: absolute;
        top: -80px;
        right: 0;
        padding-bottom: 50px;
        background-position: 30px bottom;
        background-repeat: no-repeat;
        background-size: 30px;
        opacity: 0;
        transform-origin: bottom;
        animation: .5s ease-in-out 1s 1 scaleIn;
        animation-fill-mode: forwards; }
        .content .title .tabs .pfeil span:first-child {
          font-weight: 900;
          display: block; }
      .content .title .tabs .tab-link {
        display: inline-block;
        vertical-align: top;
        color: white;
        text-decoration: none;
        position: relative;
        padding: 20px 0;
        padding-left: 50px;
        opacity: .6;
        bottom: -3px;
        border-bottom: 3px solid rgba(255, 255, 255, 0); }
        .content .title .tabs .tab-link.aktiv {
          opacity: 1;
          border-bottom: 3px solid white; }
        .content .title .tabs .tab-link:before {
          content: '';
          width: 40px;
          height: 40px;
          background-size: 100%;
          display: block;
          position: absolute;
          left: 0; }
        .content .title .tabs .tab-link.informationen:before {
          background-image: url(../images/informationen.png); }
        .content .title .tabs .tab-link.saegen:before {
          background-image: url(../images/saegen.png); }
        .content .title .tabs .tab-link.fuegen-durchlaufbearbeitung:before {
          background-image: url(../images/fuegen-durchlaufbearbeitung.png); }
        .content .title .tabs .tab-link.fuegen-stationaerbearbeitung:before {
          background-image: url(../images/fuegen-stationaerbearbeitung.png); }
        .content .title .tabs .tab-link.bohren:before {
          background-image: url(../images/bohren.png); }
        .content .title .tabs .tab-link span {
          display: block;
          line-height: 1;
          white-space: nowrap; }
          .content .title .tabs .tab-link span:first-child {
            font-weight: 600;
            margin-bottom: 3px;
            margin-top: 2px; }
          .content .title .tabs .tab-link span small {
            font-size: .7rem; }
  .content .tab {
    display: none; }
    .content .tab.aktiv {
      display: block; }
    .content .tab > .text {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      box-sizing: border-box; }
      .content .tab > .text div {
        margin-top: 50px; }
        .content .tab > .text div h2 {
          margin: 0;
          line-height: 1; }
        .content .tab > .text div p {
          margin: .5em 0; }
    .content .tab > .text:first-child {
      padding-right: 25px; }
    .content .tab > .text:last-child {
      padding-left: 25px; }
    .content .tab .empfehlung {
      background: white;
      color: #A1007B;
      margin-top: 50px;
      padding: 20px; }
      .content .tab .empfehlung > span {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        box-sizing: border-box; }
        .content .tab .empfehlung > span h2 {
          margin: 0;
          line-height: 1; }
        .content .tab .empfehlung > span p {
          margin: .5em 0; }
        .content .tab .empfehlung > span *:last-child {
          margin-bottom: 0; }
      .content .tab .empfehlung > span:first-child {
        padding-right: 25px; }
      .content .tab .empfehlung > span:last-child {
        padding-left: 25px; }
    .content .tab .hw, .content .tab .dp {
      margin-top: 50px;
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
      .content .tab .hw:after, .content .tab .dp:after {
        content: ".";
        clear: both;
        display: block;
        visibility: hidden;
        height: 0px; }
      .content .tab .hw:last-child, .content .tab .dp:last-child {
        border: none; }
      .content .tab .hw h2, .content .tab .dp h2 {
        margin: 0; }
        .content .tab .hw h2 span, .content .tab .dp h2 span {
          display: block;
          font-weight: normal;
          font-size: 75%; }
          .content .tab .hw h2 span:first-child, .content .tab .dp h2 span:first-child {
            font-weight: bold;
            font-size: 100%; }
      .content .tab .hw .wBild, .content .tab .dp .wBild {
        float: right; }
        .content .tab .hw .wBild img, .content .tab .dp .wBild img {
          display: block;
          max-width: 200px;
          margin: 10px 0 50px 50px; }
      .content .tab .hw .text, .content .tab .dp .text {
        margin-right: 200px; }
      .content .tab .hw div.daten, .content .tab .dp div.daten {
        width: 100%;
        margin-bottom: 50px; }
        .content .tab .hw div.daten div, .content .tab .dp div.daten div {
          display: inline-block;
          vertical-align: top;
          margin-right: 50px;
          font-size: 1.5em;
          font-weight: bold;
          line-height: 1; }
          .content .tab .hw div.daten div:last-child, .content .tab .dp div.daten div:last-child {
            margin-right: 0; }
          .content .tab .hw div.daten div .label, .content .tab .dp div.daten div .label {
            display: block;
            font-size: 80%;
            font-weight: normal;
            margin-top: 25px;
            margin-bottom: 5px;
            height: 25px; }
    .content .tab .hw h2:before {
      position: absolute;
      top: 7px;
      left: -30px;
      content: '';
      width: 22px;
      height: 20px;
      background-image: url(../images/hw.png);
      background-size: 22px;
      display: inline-block;
      vertical-align: middle; }
    .content .tab .dp h2:before {
      position: absolute;
      top: 7px;
      left: -30px;
      content: '';
      width: 22px;
      height: 20px;
      background-image: url(../images/diamant.png);
      background-size: 22px;
      display: inline-block;
      vertical-align: middle; }