/* ==================================================
   LEARNING LINK · INTERNE QUERVERLINKUNG
================================================== */

.section-learning-link {
  padding: clamp(2rem, 4vw, 3rem) 0;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(247, 250, 253, 0.94) 52%,
      rgba(240, 245, 250, 0.9) 100%
    );
}

.learning-link-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.learning-link-eyebrow {
  margin-bottom: 0.45rem;

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #7d8b98;
}

.learning-link-title {
  margin: 0;

  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;

  color: #1d1d1f;
}

.learning-link-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  margin-top: 0.75rem;
  padding: 0.2rem 0;

  font-size: clamp(0.98rem, 1.8vw, 1.04rem);
  font-weight: 600;
  line-height: 1.4;

  color: #3f6f9f;
  text-decoration: none;

  cursor: pointer;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.learning-link-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.learning-link-action:hover {
  opacity: 0.82;
  transform: translateX(2px);
}

.learning-link-action:hover .learning-link-arrow {
  transform: translateX(2px);
}

.learning-link-action:focus-visible {
  outline: 3px solid rgba(63, 111, 159, 0.22);
  outline-offset: 5px;
  border-radius: 4px;
}


/* ==================================================
   VOKABELN · MOBILE
================================================== */

@media (max-width: 600px) {

  .section-learning-link {
    padding: 1.8rem 0;
  }

  .learning-link-inner {
    max-width: 100%;
  }

  .learning-link-eyebrow {
    font-size: 0.66rem;
  }

  .learning-link-title {
    font-size: 1.5rem;
  }

  .learning-link-action {
    margin-top: 0.7rem;
    padding: 0.25rem 0;

    font-size: 0.98rem;
  }

}


/* ==================================================
   VOKABELN · DARK MODE
================================================== */

@media (prefers-color-scheme: dark) {

  .section-learning-link {
    background:
      radial-gradient(
        circle at 50% 45%,
        rgba(35, 39, 44, 0.96) 0%,
        rgba(24, 27, 31, 0.96) 58%,
        rgba(18, 20, 23, 0.98) 100%
      );
  }

  .learning-link-eyebrow {
    color: #9aa7b4;
  }

  .learning-link-title {
    color: #f5f5f7;
  }

  .learning-link-action {
    color: #7ca7d1;
  }

  .learning-link-action:focus-visible {
    outline-color: rgba(124, 167, 209, 0.35);
  }

}


/* ==================================================
   GRAMMATIK · ABSCHLUSS-QUERVERLINKUNG
================================================== */

.section-learning-link--grammar-bottom {
  padding: 0;
  background: transparent;
}

.section-learning-link--grammar-bottom .learning-link-inner {
  max-width: none;
  margin: 0;
  padding: 1.05rem 0 1.2rem;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;

  text-align: left;

  border-top: 1px solid rgba(29, 29, 31, 0.08);
}

.section-learning-link--grammar-bottom .learning-link-eyebrow {
  margin: 0;
  flex: 0 0 auto;

  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #6f7d89;
}

.section-learning-link--grammar-bottom .learning-link-action {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;

  margin: 0;
  padding: 0;

  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.35;

  color: #3f6f9f;
  text-decoration: none;

  cursor: pointer;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.section-learning-link--grammar-bottom .learning-link-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.section-learning-link--grammar-bottom .learning-link-action:hover {
  opacity: 0.8;
  transform: translateX(2px);
}

.section-learning-link--grammar-bottom
.learning-link-action:hover
.learning-link-arrow {
  transform: translateX(2px);
}

.section-learning-link--grammar-bottom
.learning-link-action:focus-visible {
  outline: 3px solid rgba(63, 111, 159, 0.22);
  outline-offset: 5px;
  border-radius: 4px;
}


/* ==================================================
   GRAMMATIK · MOBILE
================================================== */

@media (max-width: 600px) {

  .section-learning-link--grammar-bottom .learning-link-inner {
    padding: 1.15rem 0 1.25rem;

    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .section-learning-link--grammar-bottom .learning-link-eyebrow {
    font-size: 0.63rem;
  }

  .section-learning-link--grammar-bottom .learning-link-action {
    font-size: 0.98rem;
  }

}


/* ==================================================
   GRAMMATIK · DARK MODE
================================================== */

@media (prefers-color-scheme: dark) {

  .section-learning-link--grammar-bottom .learning-link-inner {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .section-learning-link--grammar-bottom .learning-link-eyebrow {
    color: #9aa7b4;
  }

  .section-learning-link--grammar-bottom .learning-link-action {
    color: #7ca7d1;
  }

  .section-learning-link--grammar-bottom
  .learning-link-action:focus-visible {
    outline-color: rgba(124, 167, 209, 0.35);
  }

}