/* p-ueber-uns.css — Über uns. Nur Seiten-Layout, keine neuen Farben/Fonts. */

/* 1. Editorial-Hero: Bildfläche + Scrim, Text bleibt lesbar auf Dunkel.
   Parallax und Clipping kommen von .section--media (style.css). */
.about-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  z-index: -2;
}

.about-hero > .section__scrim {
  opacity: 1;
  background: linear-gradient(
    to right,
    rgba(11, 11, 12, 0.78) 0%,
    rgba(11, 11, 12, 0.5) 42%,
    rgba(11, 11, 12, 0.28) 100%
  );
}

.about-hero__line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 47.9375em) {
  .about-hero .section-head--page .section-head__title {
    font-size: min(2.75rem, 11.2vw);
  }
}

.about-hero__intro {
  margin-top: var(--space-lg);
  color: var(--color-body-dark);
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.about-actions--center {
  justify-content: center;
}

/* 2. Familienunternehmen & Werte: asymmetrisches Zweispalten-Raster (40/60) */
.family-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 56.25em) {
  .family-grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  .family-copy {
    padding-top: var(--space-lg);
  }
}

/* 3. Stationen-Zeitleiste: Mono-Label-Jahr links, Ort + Satz rechts */
/* 3. Stationen als Step-by-Step-Timeline (Pattern nach osmo.supply, hier in
   Vanilla statt GSAP/ScrollTrigger). Statt Kreisen sind die JAHRE die Marker.
   Die Linie bekommt eine Fuellung, die beim Scrollen mitwaechst; die Schritte
   schalten nacheinander (app.js setzt data-status/-current/-previous/-next).
   Layout: --journey-line legt die X-Position der Linie fest; das Jahr sitzt
   absolut genau darauf, der Text beginnt rechts davon. */
.journey {
  --journey-line: 2.25rem;
  position: relative;
  margin-top: var(--space-xl);
  margin-inline: auto;
  max-width: 52rem;
}

.journey__list {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Linie beginnt am ersten und endet am letzten Marker — app.js meldet
   beide Positionen als --journey-start / --journey-end. Ohne das lief sie
   unten ueber die letzte Station hinaus. */
.journey__line {
  position: absolute;
  top: var(--journey-start, 0.9em);
  height: var(--journey-end, calc(100% - 1.8em));
  inset-inline-start: var(--journey-line);
  width: 2px;
  background: var(--ctx-hairline);
}

.journey__fill {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 100%;
  display: block;
  background: var(--ctx-ink);
  transform: scaleY(var(--fill, 0));
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .journey__fill {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.21, 1);
  }
}

.journey__item {
  position: relative;
  padding-inline-start: calc(var(--journey-line) + var(--space-lg));
}

.journey__body {
  display: grid;
  gap: var(--space-2xs);
}

/* Drei Zustaende wie in der Vorlage: inaktiv, aktiv, aktuell — die Opazitaet
   gilt NUR dem Text. Auf dem ganzen Item wuerde sie auch den Jahr-Chip
   durchscheinend machen und die Linie liefe sichtbar durch ihn hindurch. */
.journey__item[data-status="inactive"] .journey__body { opacity: 0.25; }
.journey__item[data-status="active"] .journey__body { opacity: 0.5; }
.journey__item[data-current] .journey__body { opacity: 1; }

/* Das Jahr IST der Marker: sitzt mittig auf der Linie und invertiert beim
   Aktivieren — dieselbe Akzent-Mechanik wie ueberall auf der Site. */
.journey__year {
  position: absolute;
  inset-inline-start: var(--journey-line);
  top: 0;
  transform: translateX(-50%);
  padding: 0.25em 0.55em;
  background: var(--ctx-surface);
  /* Ring in Flaechenfarbe: die Linie wird am Marker sauber unterbrochen,
     sonst laeuft die weisse Fuellung durch die ebenfalls weisse Chipflaeche
     und beides verschmilzt zu einem Balken. */
  box-shadow: 0 0 0 5px var(--ctx-surface);
  color: var(--ctx-muted);
  font-size: var(--fs-label);
  line-height: 1.4;
  white-space: nowrap;
}

.journey__item[data-status="active"] .journey__year,
.journey__item[data-current] .journey__year {
  background: var(--ctx-ink);
  color: var(--ctx-surface);
}

@media (prefers-reduced-motion: no-preference) {
  .journey__body {
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .journey__year {
    transition: background 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
                color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}

@media (min-width: 40em) {
  .journey {
    --journey-line: 5rem;
  }
}

/* Ohne JS bleibt alles sichtbar und die Linie gefuellt. */
.journey:not([data-timeline-ready]) .journey__body { opacity: 1; }
.journey:not([data-timeline-ready]) .journey__fill { transform: scaleY(1); }

/* Team-Foto-Stage: vorbereitet, aktiviert sich mit dem ersten echten Foto */
.team-stage {
  margin-top: var(--space-xl);
  max-width: 52rem;
}

.team-stage img {
  width: 100%;
  height: auto;
}