/* ---------- Ablauf-Animation: Reiter und Abschnitt ---------------------- *
 * Nur auf Übersichtsseiten mit mehreren Animationen geladen
 * (render_journey_tabs(), partials/journey-band.php). */

/* ---------- Reiter zur Gerätewahl --------------------------------------- */
.journey-switch {
  display: grid;
  gap: 0.9rem;
}

.journey-switch__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.journey-switch__tab {
  min-height: 2.75rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--color-ink-300);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--color-primary-900);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.journey-switch__tab:hover {
  border-color: var(--color-primary-600);
}

.journey-switch__tab[aria-selected="true"] {
  border-color: var(--color-primary-600);
  background: var(--color-primary-600);
  color: #fff;
}

/* Abschnitt auf Übersichtsseiten (partials/journey-band.php): am Desktop
   Einleitung und Reiter links, Animation rechts. Erst mit Skript liegen die
   Animationen übereinander, ohne Skript stehen sie untereinander. */
.journey-band__grid {
  display: grid;
  gap: 1.5rem;
}

.journey-band__text {
  margin-top: 1rem;
  max-width: 34rem;
  color: var(--color-ink-700);
}

/* Handlungsaufruf unter der Animation, in der Breite des Abschnitts. */
.journey-band__foot {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

@media (min-width: 1024px) {
  .journey-band__grid {
    grid-template-columns: minmax(16rem, 23rem) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 3.5rem;
    align-items: start;
  }

  .journey-band__grid > .journey-switch {
    display: contents;
  }

  .journey-band__head {
    grid-column: 1;
    grid-row: 1;
  }

  .journey-band__grid .journey-switch__tabs {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
  }

  .journey-band__grid .journey-switch__panel {
    grid-column: 2;
  }

  .journey-band__grid .journey-switch.is-enhanced .journey-switch__panel {
    grid-row: 1 / span 3;
  }
}

/* Breite Bildschirme: Die Textspalte wächst mit, damit Kennzeile und
   Überschrift nicht in schmale Zeilen zerfallen. */
@media (min-width: 1280px) {
  .journey-band__grid {
    grid-template-columns: minmax(16rem, 27rem) minmax(0, 1fr);
    column-gap: 4rem;
  }
}