/* start/assets/css/pages.css — Bausteine für die fünf verlinkten Hauptseiten
   (Der Prozess, Der Plan zum Eigenheim, Erfolgsgeschichten, Für Unternehmen,
   Über uns). Nutzt ausschließlich bereits etablierte Muster aus site.css/
   home.css, keine eigene 21st.dev-Recherche pro Unterseite. Auf der
   Startseite selbst nicht eingebunden. */

/* ------------------------------------------------------------------ */
/* Aktuelle Seite in der Navigation hervorheben. */

.nav-links a[aria-current="page"],
.mobile-links a[aria-current="page"] { color: var(--gold-deep); }

/* ------------------------------------------------------------------ */
/* .timeline aus site.css ist für drei Schritte nebeneinander gebaut
   (bAV-Seite). Für längere Schrittfolgen erzwingt dieser Modifikator
   dieselbe vertikale Darstellung, die site.css sonst erst unter 900px
   zeigt, auf allen Bildschirmgrößen, plus Verzögerungsstufen für
   Schritt 4 bis 6. */

.timeline-vertical { grid-template-columns: 1fr; gap: 1.75rem; }
.timeline-vertical::before {
  top: 0; bottom: 0; left: 20px; right: auto; width: 2px; height: auto;
  transform-origin: top; transform: scaleY(0);
}
.js .in .timeline-vertical::before { transform: scaleY(1); }
.timeline-vertical li { padding-top: 0; padding-left: 3.5rem; }
.js .in .timeline-vertical li:nth-child(4)::before { transition-delay: 1550ms; }
.js .in .timeline-vertical li:nth-child(5)::before { transition-delay: 2000ms; }
.js .in .timeline-vertical li:nth-child(6)::before { transition-delay: 2450ms; }

/* ------------------------------------------------------------------ */
/* "Baustein"-Tags: Verweis auf die zugehörigen Angebotsbausteine aus der
   Konzeption. Reine Kennzeichnung, kein Link, die Bausteine haben noch
   keine eigenen Seiten. */

.baustein-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.baustein-tags span {
  display: inline-flex;
  align-items: center;
  background: var(--gold-tint);
  color: var(--gold-deep);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Rückverlinkung zwischen den Unterseiten (z. B. Prozess-Schritt 6 zu
   Eigenheim, Eigenheim zurück zu Prozess). Gleicher Pfeil wie .card-arrow. */

.step-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--gold-deep);
  text-decoration: none;
}
.step-link svg { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.step-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* Schlanker Seitenkopf für Unterseiten ohne Aurora-Zusatzinhalt
   (Hero-Grid ist Startseiten-spezifisch, Unterseiten nutzen nur den
   Aurora-Hintergrund mit einspaltigem Text). */

.hero-page .container { max-width: 46rem; text-align: center; }
.hero-page .cta-row { justify-content: center; }


/* ------------------------------------------------------------------ */
/* Sichtbar nur fuer Screenreader (Volltext hinter dem Wort-fuer-Wort-
   Reveal des Team-Carousels auf dieser Seite). Die Team-Carousel-Regeln
   selbst liegen jetzt in site.css (dort auch fuer das dunkle Gruender-
   Band der Startseite genutzt, siehe Kommentar dort); .sr-only bleibt
   hier dupliziert, weil home.css sein eigenes .sr-only mitbringt und
   diese Unterseiten home.css nicht einbinden. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Prozess-Pins, Unterseiten-Zusatz: Basis-Layout (.process-pins-wrap,
   .pin-badge, .pin-card usw.) liegt seit 2026-09-20 in site.css, weil
   die Startseite eine schmalere Fassung derselben Karten fuer ihren
   Prozess-Teaser wiederverwendet (siehe .process-pins--compact in
   home.css). Hier nur noch, was ausschliesslich auf dieser Unterseite
   vorkommt: pro Karte eine kleine Capital-Flow-Grafik (.board-* aus
   home.css) statt eines Fotos — rein dekorativ, erfundene Zahlen,
   aria-hidden. home.css muss auf dieser Seite mit eingebunden sein. */

.pin-visual { margin-top: 0.25rem; }
.pin-visual-bars { min-height: auto; justify-content: flex-start; gap: clamp(1.5rem, 4vw, 2.5rem); }
/* .board-bar-group traegt flex:1 fuer die fuenfspaltige Originalkarte;
   hier nur zwei Gruppen, deshalb auf natuerliche Breite zuruecksetzen,
   sonst ignoriert flex-grow das geaenderte justify-content/gap oben. */
.pin-visual-bars .board-bar-group { flex: 0 0 auto; }
.pin-card .baustein-tags { margin-top: 1rem; }

/* ------------------------------------------------------------------ */
/* Routen nach Schritt 5: dezente Verzweigungs-Grafik plus Routen-Karten.
   Grafik ist rein dekorativ (aria-hidden, erfundene Geometrie, keine
   echten Daten) und zeichnet sich beim Erscheinen analog zu .chart-line
   in site.css — hier per clip-path statt stroke-dashoffset, weil eine
   Fläche aus mehreren Pfaden wachsen soll, nicht eine einzelne Linie. */

.route-connector { display: block; width: 100%; max-width: 760px; height: auto; margin: 2.5rem auto 0; }
.route-connector-path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 6; }
.js [data-grow].route-connector { clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease); }
.js [data-grow].route-connector.in { clip-path: inset(0 0 0% 0); }

.route-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.2vw, 1.5rem); margin-top: 2rem; }
.route-card { flex: 1 1 200px; max-width: 260px; text-decoration: none; }
.route-card h3 { font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  .route-connector { transition: none; }
}