/* ==========================================================
   OFFERS NAVIGATION (Angebote)
   The service pages' offer cards with a list of them on the left, which stays in view while the
   cards are scrolled through; on phones the list is left out. script.js names the parts:

     .angebote-scroll-area      the section
       .angebote-layout         its two columns
         .angebote-nav          the list: .angebote-nav-item > .angebote-nav-row > .angebote-nav-label
         .angebote-content      the cards: .angebote-section
   and marks the card in view on the list (.is-active: a dot and bold); a row without a card is
   .is-disabled. The parts in the blocks are Von Block composite classes: what places each of them
   on its own (the sticky list, the cards' scroll margin…) is in its definition (Von Block settings
   → Composite Classes); here is what changes with the script's classes, and the phone layout
   (at 782px, the width script.js leaves the list out at).
   ========================================================== */

.angebote-scroll-area .angebote-nav-item.is-disabled {
  cursor: default !important;
}

.angebote-scroll-area .angebote-nav-row {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0;
  transition: gap 180ms ease;
}

.angebote-scroll-area .angebote-nav-label {
  margin: 0;
  color: var(--mcg-color-text-main);
  font-weight: 400;
  transition: color 180ms ease, font-weight 180ms ease;
}

/* The orange arrow at the end of a row nudges right on hover */
.angebote-scroll-area .angebote-nav-row figure {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .angebote-scroll-area .angebote-nav-item:not(.is-disabled):is(:hover, :focus-visible) .angebote-nav-row figure {
    transform: translateX(4px) !important;
  }
}

.angebote-scroll-area .angebote-nav-item.is-active > .angebote-nav-row {
  justify-content: flex-start;
  gap: 14px;
}

.angebote-scroll-area .angebote-nav-item.is-active > .angebote-nav-row::before {
  content: "";
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--mcg-color-primary-action);
}

.angebote-scroll-area .angebote-nav-item.is-active .angebote-nav-label {
  text-align: left;
  font-weight: 700 !important;
}

.angebote-scroll-area .angebote-nav-item.is-active .angebote-nav-row figure {
  margin-left: auto;
}

/* Tablets and phones: the cards alone, across the column */
@media (max-width: 782px) {
  .angebote-scroll-area .angebote-layout {
    display: block;
  }

  .angebote-scroll-area .angebote-nav {
    display: none;
  }

  .angebote-scroll-area .angebote-content,
  .angebote-scroll-area .angebote-content > .angebote-section {
    width: 100%;
    max-width: 100%;
  }
}