html {
  font-size: 18px;
  background: var(--asphalt);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "source-sans-pro", sans-serif;
  color: var(--mercury);
}

:root {
  --mercury: #e6e6e6;
  --asphalt: #333333;
  --pink: #de1ef7;
  --linearGradientTopToBottom: linear-gradient(to bottom, #ef3f3f, #407aed);

  --container: 2.5rem;
  --boxed: 80dvw;

  --headline1: 123px;
  --headline2: 90px;
  --headline3: 35px;
  --headline4: 30px;
  --headline5: 25px;
  --headline6: 20px;
}

@media (width < 768px) {
  :root {
    --headline1: 60px;
    --headline2: 45px;
    --headline3: 30px;
    --headline4: 25px;
    --headline5: 20px;
    --headline6: 18px;

    --container: 1rem;
    --boxed: 100dvw;
  }
}

.container {
  padding: var(--container);

  &.boxed {
    max-width: var(--boxed);
    margin: 0 auto;
  }
}

.flex {
  display: flex;

  &.col {
    flex-direction: column;
  }

  &.justify-between {
    justify-content: space-between;
  }
  &.justify-center {
    justify-content: center;
  }

  &.items-center {
    align-items: center;
  }
  &.items-end {
    align-items: flex-end;
  }

  &.gap {
    gap: 1rem;
  }
  &.gap-large {
    gap: 5rem;
  }
  &.gap-small {
    gap: 0.5rem;
  }
}

.margin {
  margin-bottom: 1.5rem !important;
}
.margin-large {
  margin-bottom: 3rem !important;
}
.margin-huge {
  margin-bottom: 5rem !important;
}

.headline-1 {
  font-size: var(--headline1) !important;
  line-height: 1.15em;
}
.headline-2 {
  font-size: var(--headline2) !important;
  line-height: 1.15em;
}
.headline-3 {
  font-size: var(--headline3) !important;
  line-height: 1.15em;
}
.headline-4 {
  font-size: var(--headline4) !important;
  line-height: 40px;
}
.headline-5 {
  font-size: var(--headline5) !important;
}
.headline-6 {
  font-size: var(--headline6) !important;
}

@media (width < 768px) {
  .headline-1,
  .headline-2,
  .headline-3 {
    line-height: 1.25em;
  }
}

p,
li,
span,
label,
a,
.font-regular {
  font-weight: 400;
  line-height: 30px;
}

h1,
h2,
h3,
button,
.font-bold {
  font-weight: 700 !important;
}

.text-center {
  text-align: center;
}

.uppercase {
  text-transform: uppercase;
}

.bold {
  font-weight: 700;
}

a {
  text-decoration: none;
  color: inherit;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.pointer {
  cursor: pointer;
}

section {
  padding-right: 140px;

  @media (width < 768px) {
    padding-right: 0;
  }

  &:not(#contact):not(#audience) {
    margin-bottom: 3rem;
  }
}

button {
  border: 1px solid var(--mercury);
  background: transparent;
  text-transform: uppercase;
  width: 20rem;
  padding: 0.75rem 0;
  font-weight: bold;
  font-size: var(--headline6);
  letter-spacing: 5px;
  cursor: pointer;
  transition: all 0.35s ease;

  &:hover {
    background: var(--mercury);
    color: var(--asphalt) !important;
  }

  @media (width < 768px) {
    width: 100%;
  }
}

/* DECORATIVE BACKGROUND IN THE SECTIONS BENEFITS AND CONTACT */
#decorative-bg {
  overflow: hidden;

  #deco {
    opacity: 0.2;
    bottom: 0;
    width: 100%;
    z-index: 100;
  }

  #shape {
    top: -8dvh;
    left: -11dvh;
    width: 100%;
  }
}

/* BACK UP */
#back-up {
  position: fixed;
  bottom: 5px;
  right: 5px;
  z-index: 999;
  background: var(--linearGradientTopToBottom);
  height: 2.5rem;
  width: 2.5rem;
}

/* HEADER */
header {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 140px;
  padding: 3.75rem 40px 40px;
  background: var(--linearGradientTopToBottom);
  color: var(--mercury);
  transition: width 0.35s ease;
  z-index: 999;

  @media (width < 768px) {
    display: none !important;
  }

  &.show {
    width: 538px;
  }

  div {
    width: 100%;

    @media (width < 768px) {
      width: fit-content;
    }

    &:nth-child(1) {
      width: auto;
    }

    #header-logo {
      width: 60px;
    }

    i {
      font-size: 40px;
      color: var(--mercury);
    }

    span {
      a {
        p {
          max-width: 0;
          overflow: hidden;
          white-space: nowrap;
          opacity: 0;

          &.show {
            opacity: 1;
            max-width: 500px;
            padding-inline-start: 3rem;
            transition: max-width 1.5s ease;
          }
        }
      }

      hr {
        background: var(--mercury);
        mix-blend-mode: soft-light;
      }
    }
  }
}

/* HERO */
#hero {
  height: 100dvh;
  width: 100%;

  div {
    height: 100%;
    width: 100%;

    #logo-header {
      @media (width < 768px) {
        width: 75%;
        margin-bottom: 0 !important;
      }
    }

    article {
      z-index: 10;
      width: 100%;
      gap: 2.5rem;

      @media (width > 2000px) {
        height: 60%;
        width: 60%;
      }
      @media (width < 1750px) {
        width: 100%;
      }
      @media (width < 768px) {
        height: 50%;
        margin-top: 5rem;
      }

      h2 {
        @media (width < 768px) {
          font-size: 45px !important;
        }
      }

      p {
        width: 55%;

        @media (width > 2000px) {
          width: 75%;
        }
        @media (width < 1750px) {
          width: 100%;
        }
      }

      a {
        @media (width < 768px) {
          margin-top: 2rem;
        }
      }
    }

    #hero-image {
      top: 0;
      right: 140px;
      height: 100%;
      width: 50%;
      object-fit: cover;
      filter: grayscale(1);
      z-index: -1;

      @media (width > 2000px) {
        width: 60%;
      }
      @media (width < 1750px) {
        right: 0;
        width: 65%;
      }
      @media (width < 768px) {
        right: 0;
        width: 100%;
        mix-blend-mode: hard-light;
      }
    }
  }
}

/* ABOUT */
#about {
  #about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;

    .grid-item-wrapper {
      background: linear-gradient(to right bottom, #ef3f3f, #407aed);
      padding: 1px;

      .grid-item {
        height: 100%;
        background: var(--asphalt);
        padding: 2.5rem;

        @media (width < 768px) {
          padding: 1.25rem;
        }

        h3 {
          text-transform: uppercase;
        }

        h5 {
          margin-bottom: 2rem;
        }
      }
    }
  }
}

/* AUDIENCE */
#audience {
  margin: 6rem 0 10rem;
  overflow-x: clip;

  @media (width < 768px) {
    flex-direction: column;
  }

  .audience-item {
    height: 100vh;

    flex: 1 1 0;
    transition: all 1s ease-in-out;

    @media (width < 768px) {
      min-height: 100vh;
      max-height: 200vh;
      margin: 0;
      flex: unset !important;
    }

    &.active {
      flex: 7 1 0;

      .image-overlay {
        background: rgba(0, 0, 0, 0.7);
      }

      article {
        visibility: visible;
        opacity: 1;
      }

      &#fuer-vereine article {
        left: 20%;

        @media (width < 768px) {
          left: 19.5%;
        }
      }

      &#fuer-unternehmen article {
        right: -25%;

        @media (width < 768px) {
          right: 0%;
        }
      }

      .more {
        opacity: 0;
        pointer-events: none;
      }
    }

    &:not(.active) {
      flex: 1 1 0;
    }

    img {
      top: 0;
      left: 0%;
      height: 100%;
      width: 100%;
      object-fit: cover;
      filter: grayscale(1);
    }

    .image-overlay {
      top: 0;
      left: 0%;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.15);
      transition: all 1s ease;
    }

    h2 {
      transform: rotate(-90deg);
      white-space: nowrap;
    }

    &#fuer-unternehmen h2 {
      top: 99%;
      left: 97%;
      transform-origin: bottom left;

      @media (width < 768px) {
        top: 65%;
      }
    }

    &#fuer-vereine h2 {
      top: 61%;
      left: 1%;
      transform-origin: top left;
    }

    article {
      top: 50%;
      translate: 0 -50%;
      height: 45%;
      max-width: 40dvw;
      visibility: hidden;
      opacity: 0;
      transition: all 0.5s ease 0.5s;

      @media (width > 2000px) {
        height: 40%;
      }

      @media (width < 768px) {
        max-width: 80%;
        top: 5rem !important;
        height: auto;
        translate: 0 0;
      }

      p {
        @media (width < 768px) {
          margin-bottom: 1.5rem;
        }
      }

      button {
        width: 100% !important;
      }
    }

    &#fuer-vereine article {
      left: 30%;

      @media (width < 768px) {
        left: 29.5%;
      }
    }

    &#fuer-unternehmen article {
      right: -15%;

      @media (width < 768px) {
        right: 10%;
      }
    }

    .more {
      z-index: 10;
      position: absolute;
      bottom: 5%;
      opacity: 0;
      transition: all 1s ease-in-out;
      pointer-events: none;

      @media (width < 768px) {
        opacity: 1;
        pointer-events: all;
        width: 90dvw;
      }
    }
  }
}

/* REFERENCES */
#references {
  .swiper {
    width: 100%;
    height: 45dvh;

    @media (width < 768px) {
      margin-bottom: 2rem;
    }

    .swiper-wrapper {
      height: 90%;

      .swiper-slide {
        text-align: center;
        display: flex;

        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .overlay {
          height: 65%;
          width: 100%;
          background: linear-gradient(to top, #222, transparent);
          align-content: flex-end;
        }
      }
    }

    .swiper-pagination {
      .swiper-pagination-bullet {
        height: 1rem;
        width: 1rem;
        margin: 0 0.5rem;

        &.swiper-pagination-bullet-active {
          background: linear-gradient(to bottom right, #ef3f3f, #407aed);
        }
      }
    }
  }

  #ref-text {
    width: 100%;
    text-align: center;
    margin: 5rem auto;

    @media (width < 768px) {
      width: 100%;
      margin: 0;
    }

    p {
      width: 85%;
      margin: 1.5rem auto 0;

      @media (width < 768px) {
        width: 100%;
      }
    }
  }
}

/* BENEFITS */
#benefits {
  .wrapper {
    z-index: 120;

    #benefits-intro-image {
      img {
        height: 75dvh;
        width: 100%;
        object-fit: cover;
        filter: grayscale(1);
      }

      .overlay {
        height: 75%;
        width: 100%;
        bottom: 0;
        left: 0;
        align-content: flex-end;
        background: linear-gradient(to top, #222, transparent);
      }
    }

    article {
      width: 60%;

      @media (width < 768px) {
        width: 100%;
      }
    }

    #benefits-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 1rem;
      margin: 5rem 0 1rem;

      @media (width < 768px) {
        gap: 3.5rem;
      }

      .grid-item {
        background: rgba(230, 230, 230, 0.1);
        padding-top: 10rem;

        img {
          top: 0;
          left: 0;
        }

        article {
          height: 65%;
          width: 100%;

          h3 {
            font-size: 35px;
            text-transform: uppercase;
          }
        }
      }
    }

    .contact-button {
      width: 100%;

      button {
        width: 25rem;

        @media (width < 768px) {
          width: 90dvw;
        }
      }
    }
  }
}

/* CTA TEAMBOWL */
#cta-teambowl {
  background: rgba(230, 230, 230, 0.1);
  padding: 0;
  margin-bottom: 0 !important;

  .wrapper {
    padding: 5rem var(--container);
    z-index: 120;
  }

  p {
    width: 60%;
    margin-left: auto;
    margin-right: auto;

    @media (width < 768px) {
      width: 100%;
    }
  }
}

/* CONTACT */
#contact {
  background: var(--linearGradientTopToBottom);

  .wrapper {
    padding: 7rem var(--container);
    z-index: 120;

    form {
      width: 90%;
      text-align: center;
      margin: 0 auto;

      @media (width < 768px) {
        width: 100%;
      }

      h3 {
        width: 60%;
        margin: 0 auto;

        @media (width < 768px) {
          width: 100%;
        }
      }

      .input-box {
        text-align: start;

        input,
        textarea {
          width: 100%;
          border: 1px solid var(--mercury);
          outline: none;
          background: transparent;
          padding: 0 1rem;
          font-family: inherit;
          font-size: inherit;
          color: inherit;
        }

        input {
          height: 3rem;
        }

        textarea {
          padding: 1rem;
          resize: vertical;
        }
      }

      #input-container {
        width: 100%;

        @media (width < 768px) {
          flex-direction: column;
        }

        .input-box {
          width: 50%;

          @media (width < 768px) {
            width: 100%;
          }
        }
      }

      #message-container {
        width: 100%;

        .input-box {
          width: 100%;
        }
      }

      #contact-submit {
        width: 100%;
        background: var(--mercury);
        overflow: hidden;
        transition: all 0.5s ease;

        p {
          z-index: 10;
          color: var(--asphalt);
        }
      }
    }
  }
}

/* FOOTER */
footer {
  background: var(--asphalt);
  padding-top: 10rem;

  #footer-logo {
    top: 0;
    right: 25%;

    @media (width < 768px) {
      right: 0;
    }
  }

  #icons-wrapper {
    @media (width < 768px) {
      flex-direction: column;
      align-items: flex-start !important;
    }

    .icons-container {
      a {
        padding: 1rem;
        border: 1px solid var(--mercury);
        transition: all 0.35s ease;
        cursor: pointer;

        &:hover {
          background: var(--mercury);

          i {
            color: var(--asphalt);
          }
        }

        i {
          font-size: 1rem;
        }
      }
    }

    article {
      @media (width < 768px) {
        flex-wrap: wrap;
      }
    }
  }

  h3 {
    text-transform: uppercase;
  }

  #bottom-footer-bar {
    background: #222222;

    .wrapper {
      width: 68%;
      margin: 0;
      margin-left: calc((100dvw - var(--boxed)) / 2);

      @media (width < 768px) {
        width: 100%;
        flex-direction: column !important;
        align-items: flex-start;
        gap: 2rem;
      }
    }
  }
}

/* TEAM BOWL */
.team-bowl {
  h1 {
    font-size: var(--headline2);
  }

  h3 {
    font-size: var(--headline3);
  }

  button {
    margin: 0 auto;
    padding: 1rem 5rem;
    display: block;
    width: max-content !important;

    @media (width < 768px) {
      width: auto !important;
      padding: 1rem 3rem;
    }
  }

  #hero {
    button {
      margin: 0;
    }

    @media (width < 768px) {
      article {
        margin-top: 1rem;
        height: auto;
        gap: 1.5rem;
      }
    }
  }

  #intro {
    p {
      &:last-child {
        width: 50%;
        display: inline-block;

        @media (width < 768px) {
          width: 100%;
        }
      }
    }
  }

  #manual {
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 5rem;
      margin: 3rem 0;

      @media (width < 768px) {
        display: flex;
        flex-direction: column;
        gap: 3rem;
      }

      .grid-item {
        position: relative;
        padding: 3px;
        background: linear-gradient(to right bottom, #ef3f3f, #407aed);

        .wrapper {
          padding: 3rem;
          background: var(--asphalt);
          height: 100%;
          display: flex;
          flex-direction: column;

          @media (width < 768px) {
            padding: 2rem;
          }

          .step-number {
            font-weight: bold;
            background: linear-gradient(to right bottom, #ef3f3f, #407aed);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 0.75em;
            margin-bottom: 3rem;
          }

          p {
            width: 80%;

            @media (width < 768px) {
              width: 100%;
            }

            .note {
              display: none;
            }
          }
        }

        &:first-child {
          p {
            .note {
              display: inline-block;
              margin-top: 0.5rem;
              font-size: 1rem;
              text-transform: none;
            }
          }
        }

        &.wide {
          grid-column: span 3;

          @media (width < 768px) {
            grid-column: span 2;
          }

          .wrapper {
            padding: 5rem;

            @media (width < 768px) {
              padding: 2rem;
            }

            p {
              margin: 0 auto;
              .note {
                display: inline-block;
                margin-top: 0.5rem;
                font-size: 1rem;
                text-transform: none;
              }
            }
          }
        }
      }
    }
  }

  #cashbacks {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("https://tagteam.de/wp-content/uploads/2025/08/deco-bg.svg");
      opacity: 0.25;
    }

    .cashback-marquee {
      width: 100%;
      padding-bottom: 5rem;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);

      .cashback-track {
        display: flex;
        width: max-content;
        animation: cashback-scroll 30s linear infinite;

        &:hover {
          animation-play-state: paused;
        }

        .grid-item {
          flex-shrink: 0;
          margin-right: 6rem;
          display: flex;
          align-items: center;
          justify-content: center;

          figure {
            width: 15rem;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              object-fit: contain;
              filter: grayscale(1);
              transition: filter 0.35s ease;
            }
          }

          &:hover figure img {
            filter: grayscale(0);
          }
        }
      }
    }
  }

  #about {
    .container.boxed {
      div {
        overflow: clip;
        width: 100%;
        position: relative;

        img {
          filter: grayscale(1) contrast(1.25) brightness(1);
        }

        article {
          height: 75%;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 5rem;
          align-content: end;
          background: linear-gradient(to bottom, #14141400, #141414);

          @media (width < 768px) {
            padding: 2rem;
          }

          h2 {
            color: white;
          }
        }
      }

      article {
        padding: 3rem 5rem;
        width: 75%;

        @media (width < 768px) {
          padding: 2rem;
          width: 100%;
        }

        p {
          font-size: var(--headline4);
          line-height: 1.35em;
        }
      }
    }
  }
}

@keyframes cashback-scroll {
  to {
    transform: translateX(calc(-1 * var(--set-width, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-bowl #cashbacks .cashback-track {
    animation: none;
  }
}