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

    .car-box {
      position: relative;
      width: 100%;
      height: 100px;
      overflow: hidden;
      background: linear-gradient(to bottom, #edf2f0 0%, #f7f9f8 50%, #e8ecea 100%);
    }

    /* Straßen allgemein */
    .road {
      position: absolute;
      left: 0;
      width: 100%;
    }

    .road::before {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      background:
        repeating-linear-gradient(
          to right,
          transparent 0 24px,
          rgba(255,255,255,0.92) 24px 40px
        );
    }

    /* oben: am hellsten und am schmalsten */
    .road-top {
      top: 8px;
      height: 14px;
      background: linear-gradient(to bottom, #dde2e0, #cdd3d1);
      z-index: 1;
    }

    .road-top::before {
      top: 5px;
      height: 2px;
      opacity: 0.95;
    }

    /* mitte: heller und etwas schmaler */
    .road-mid {
      top: 38px;
      height: 18px;
      background: linear-gradient(to bottom, #d6dcda, #c4cbca);
      z-index: 2;
    }

    .road-mid::before {
      top: 7px;
      height: 2px;
      opacity: 0.95;
    }

    /* vorne: so lassen */
    .road-front {
      top: 72px;
      height: 22px;
      background: linear-gradient(to bottom, #d0d6d4, #bcc3c1);
      z-index: 3;
    }

    .road-front::before {
      top: 9px;
      height: 3px;
      opacity: 0.95;
    }

    /* Autos */
    .car {
      position: absolute;
      left: -200px;
      animation-name: drive;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      will-change: left, transform;
    }

    .car-body {
      position: absolute;
      left: 0;
      bottom: 5px;
      border-radius: 8px 10px 5px 5px;
      box-shadow: inset 0 -2px 0 rgba(255,255,255,0.08);
    }

    .car-top-shape {
      position: absolute;
      border-radius: 7px 7px 2px 2px;
    }

    .window {
      position: absolute;
      top: 2px;
      background: rgba(245, 247, 248, 0.98);
      border-radius: 2px;
    }

    .wheel {
      position: absolute;
      bottom: 0;
      background: #232628;
      border-radius: 50%;
    }

    /* Hinten klein, heller */
    .car.back-lane {
      width: 34px;
      height: 16px;
      z-index: 1;
    }

    .car.back-lane .car-body {
      width: 34px;
      height: 10px;
      bottom: 3px;
      border-radius: 5px 6px 4px 4px;
      background: linear-gradient(to bottom, #aeb4b7, #878e92);
    }

    .car.back-lane .car-top-shape {
      left: 9px;
      bottom: 10px;
      width: 14px;
      height: 6px;
      border-radius: 4px 4px 2px 2px;
      background: linear-gradient(to bottom, #b9bfc2, #90979b);
    }

    .car.back-lane .window {
      width: 4px;
      height: 3px;
    }

    .car.back-lane .window.back {
      left: 2px;
    }

    .car.back-lane .window.front {
      right: 2px;
    }

    .car.back-lane .wheel {
      width: 7px;
      height: 7px;
      border: 1px solid #666d71;
    }

    .car.back-lane .wheel.left {
      left: 5px;
    }

    .car.back-lane .wheel.right {
      right: 5px;
    }

    /* Mitte mittelgroß */
    .car.mid-lane {
      width: 46px;
      height: 22px;
      z-index: 2;
    }

    .car.mid-lane .car-body {
      width: 46px;
      height: 13px;
      bottom: 4px;
      border-radius: 7px 8px 5px 5px;
      background: linear-gradient(to bottom, #7b8286, #565d61);
    }

    .car.mid-lane .car-top-shape {
      left: 11px;
      bottom: 13px;
      width: 20px;
      height: 8px;
      background: linear-gradient(to bottom, #878e92, #62696d);
    }

    .car.mid-lane .window {
      width: 7px;
      height: 4px;
    }

    .car.mid-lane .window.back {
      left: 2px;
    }

    .car.mid-lane .window.front {
      right: 2px;
    }

    .car.mid-lane .wheel {
      width: 9px;
      height: 9px;
      border: 2px solid #5e6569;
    }

    .car.mid-lane .wheel.left {
      left: 6px;
    }

    .car.mid-lane .wheel.right {
      right: 6px;
    }

    /* Vorne groß */
    .car.front-lane {
      width: 62px;
      height: 30px;
      z-index: 4;
    }

    .car.front-lane .car-body {
      width: 62px;
      height: 18px;
      bottom: 6px;
      background: linear-gradient(to bottom, #4f5457, #2f3336);
    }

    .car.front-lane .car-top-shape {
      left: 15px;
      bottom: 18px;
      width: 27px;
      height: 11px;
      background: linear-gradient(to bottom, #555b5f, #35393d);
    }

    .car.front-lane .window {
      width: 10px;
      height: 6px;
    }

    .car.front-lane .window.back {
      left: 3px;
    }

    .car.front-lane .window.front {
      right: 3px;
    }

    .car.front-lane .wheel {
      width: 12px;
      height: 12px;
      border: 2px solid #5a6063;
    }

    .car.front-lane .wheel.left {
      left: 8px;
    }

    .car.front-lane .wheel.right {
      right: 8px;
    }

    @keyframes drive {
      from {
        left: -200px;
      }
      to {
        left: calc(100% + 220px);
      }
    }