/* ==================================================
   FOOTER
   Vollbreite – passend zum Header
================================================== */

.site-footer {

  width: 100%;

  margin-top: auto;

  position: relative;

  background:
    linear-gradient(
      115deg,
      #0b0b0b 0%,
      #121212 42%,
      #151515 70%,
      var(--dart-green-dark) 100%
    );

  border-top:
    3px solid
    var(--dart-green);
}


/* ==================================================
   DEZENTER ROTER AKZENT
================================================== */

.site-footer::before {

  content: "";

  position: absolute;

  top: -3px;
  left: 0;

  width: 28%;
  height: 3px;

  background:
    var(--dart-red);
}


/* ==================================================
   FOOTER INNER
   Gleiche Breite wie der Header
================================================== */

.footer-inner {

  width: 100%;
  max-width: 1800px;

  margin: 0 auto;

  padding:
    70px 40px 30px;
}


/* ==================================================
   FOOTER GRID
================================================== */

.footer-grid {

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(320px, 2fr)
    1fr
    1fr
    1fr;

  gap:
    70px;

  padding-bottom:
    55px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .15);
}


/* ==================================================
   FOOTER BRAND
================================================== */

.footer-brand {

  position: relative;
}

.footer-brand h2 {

  margin-bottom:
    18px;

  color:
    #ffffff;

  font-size:
    clamp(2rem, 3vw, 2.8rem);

  font-weight:
    900;

  line-height:
    .95;

  letter-spacing:
    -.03em;

  text-transform:
    uppercase;
}

.footer-brand h2 span {

  color:
    var(--dart-red);
}

.footer-brand p {

  max-width:
    460px;

  color:
    var(--text-muted);

  font-size:
    1rem;

  line-height:
    1.75;
}


/* ==================================================
   KLEINES LABEL ÜBER BRAND
================================================== */

.footer-kicker {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    16px;

  color:
    var(--dart-gold);

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .2em;

  text-transform:
    uppercase;
}

.footer-kicker::before {

  content: "";

  width:
    24px;

  height:
    2px;

  background:
    var(--dart-red);
}


/* ==================================================
   FOOTER SOCIAL
================================================== */

.footer-social {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    28px;
}

.footer-social a {

  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255, 255, 255, .28);

  border-radius:
    50%;

  color:
    #ffffff;

  font-size:
    .72rem;

  font-weight:
    800;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {

  background:
    var(--dart-red);

  border-color:
    var(--dart-red);

  transform:
    translateY(-3px);

  outline:
    none;
}


/* ==================================================
   FOOTER SPALTEN
================================================== */

.footer-column h3 {

  position:
    relative;

  margin-bottom:
    22px;

  padding-bottom:
    11px;

  color:
    #ffffff;

  
  font-size: clamp( 0.87em, 2vw, 1.3em);

  font-weight:
    800;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


/* Linie unter Überschrift */

.footer-column h3::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width:
    28px;

  height:
    2px;

  background:
    var(--dart-gold);
}


.footer-column ul {

  list-style:
    none;

  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;
}

.footer-column li {

  color:
    var(--text-muted);

  font-size:
    1.2rem;

  line-height:
    1.5;
}

.footer-column a {

  display:
    inline-block;

  color:
    var(--text-muted);

  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {

  color:
    #ffffff;

  transform:
    translateX(5px);

  outline:
    none;
}


/* ==================================================
   FOOTER BOTTOM
================================================== */

.footer-bottom {

  min-height:
    58px;

  padding-top:
    26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;
}

.copyright {

  color:
    rgba(255, 255, 255, .52);

  font-size:
    .82rem;

  line-height:
    1.5;
}

.legal-links {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    8px 25px;
}

.legal-links a {

  color:
    rgba(255, 255, 255, .58);

  font-size:
    .82rem;

  transition:
    color .2s ease;
}

.legal-links a:hover,
.legal-links a:focus-visible {

  color:
    #ffffff;

  outline:
    none;
}


/* ==================================================
   EXTRA LARGE DESKTOP
================================================== */

@media (min-width: 1800px) {

  .footer-inner {

    max-width:
      1880px;

    padding-left:
      48px;

    padding-right:
      48px;
  }
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

  .footer-inner {

    padding:
      60px 30px 28px;
  }

  .footer-grid {

    grid-template-columns:
      2fr
      1fr
      1fr;

    gap:
      50px;
  }

  .footer-brand {

    grid-column:
      1 / -1;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

  .site-footer {

    width:
      100%;
  }

  .site-footer::before {

    width:
      45%;
  }

  .footer-inner {

    width:
      100%;

    max-width:
      none;

    padding:
      55px 20px 25px;
  }

  .footer-grid {

    grid-template-columns:
      1fr 1fr;

    gap:
      42px 25px;

    padding-bottom:
      40px;
  }

  .footer-brand {

    grid-column:
      1 / -1;
  }

  .footer-brand h2 {

    font-size:
      2rem;
  }

  .footer-brand p {

    font-size:
      .95rem;
  }

  

  .footer-column li {

    font-size:
      .98rem;
  }

  .footer-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      18px;

    padding-top:
      22px;
  }

  .legal-links {

    justify-content:
      flex-start;

    gap:
      10px 20px;
  }
}


/* ==================================================
   KLEINE SMARTPHONES
================================================== */

@media (max-width: 480px) {

  .footer-inner {

    padding:
      48px 16px 24px;
  }

  .footer-grid {

    grid-template-columns:
      1fr;

    gap:
      35px;
  }

  .footer-brand {

    grid-column:
      auto;
  }

  .footer-brand h2 {

    font-size:
      1.8rem;
  }

  .footer-brand p {

    font-size:
      .9rem;
  }



  .footer-column li {

    font-size:
      .98rem;
  }

  .copyright {

    font-size:
      .78rem;
  }

  .legal-links {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      9px;
  }

  .legal-links a {

    font-size:
      .8rem;
  }
}