/* Wegweiser aus Karten (includes/content-block-wayfinder.php): oben die
   Sprungleiste zu den Karten, darunter je Lage eine Karte mit Icon, Überschrift,
   kurzem Text, dem Verweis auf den Ratgeber und dem in die Anfrage.
   Gilt nur innerhalb der Lesestrecke (.prose-page) und setzt deren
   Listenregeln für die eigenen Listen außer Kraft. */
.prose-page .wayfinder { margin-top: 1.5rem; }

/* Sprungleiste */
.wayfinder-jump {
  padding: 1rem 1.1rem 1.1rem;
  background: linear-gradient(160deg, var(--color-primary-50), var(--color-sand));
  border: 1px solid color-mix(in oklch, var(--color-primary-600) 18%, transparent);
  border-radius: var(--radius-xl2);
}
.prose-page .wayfinder-jump-label {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.4; color: var(--color-primary-700);
}
.prose-page .wayfinder-chips {
  margin-top: 0.7rem; padding: 0;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem;
}
.prose-page .wayfinder-chips > li { padding: 0; }
.prose-page .wayfinder-chips > li::before { content: none; }
.prose-page a.wayfinder-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.75rem; padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  background: #fff; border: 1px solid color-mix(in oklch, var(--color-primary-700) 22%, transparent);
  border-radius: 999px;
  font-size: 0.92rem; font-weight: 600; line-height: 1.25;
  color: var(--color-primary-800); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.prose-page a.wayfinder-chip:hover { border-color: var(--color-primary-600); background: var(--color-primary-50); color: var(--color-primary-900); }
.wayfinder-chip svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--color-primary-600); }

/* Karten — bei ungerader Zahl füllt die letzte die Reihe */
.prose-page .wayfinder-grid {
  margin-top: 1.25rem; padding: 0;
  display: grid; gap: 1rem;
}
@media (min-width: 640px) {
  .prose-page .wayfinder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose-page .wayfinder-grid > .wayfinder-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.prose-page .wayfinder-grid > li.wayfinder-card {
  display: flex; flex-direction: column;
  margin: 0; padding: 1.25rem 1.25rem 1.1rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--color-primary-900) 10%, transparent);
  border-top: 4px solid var(--color-primary-600);
  border-radius: var(--radius-xl2);
  box-shadow: var(--shadow-card);
  scroll-margin-top: 6rem;
}
.prose-page .wayfinder-grid > li.wayfinder-card::before { content: none; }
.prose-page .wayfinder-grid > li.wayfinder-card:target {
  border-top-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent-500) 45%, transparent), var(--shadow-card);
}
.wayfinder-head { display: flex; align-items: center; gap: 0.8rem; }
.wayfinder-icon {
  flex: none; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 0.9rem;
  background: var(--color-primary-50); color: var(--color-primary-700);
}
.wayfinder-icon svg { width: 1.45rem; height: 1.45rem; }
.prose-page .wayfinder-title {
  margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--color-primary-900);
}
.prose-page .wayfinder-text {
  flex: 1 1 auto; margin-top: 0.8rem;
  font-size: 0.95rem; line-height: 1.65;
  color: color-mix(in oklch, var(--color-primary-950) 88%, #000);
}
.wayfinder-links {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px dashed color-mix(in oklch, var(--color-primary-700) 25%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
}
.prose-page a.wayfinder-guide {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.75rem;
  font-size: 0.93rem; font-weight: 600; line-height: 1.3;
  color: var(--color-primary-700);
}
.wayfinder-guide svg { flex: none; width: 1rem; height: 1rem; }
.prose-page a.wayfinder-inquiry {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0.45rem 1rem;
  background: color-mix(in oklch, var(--color-accent-400) 55%, #fff);
  border: 1px solid color-mix(in oklch, var(--color-accent-700) 35%, transparent);
  border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; line-height: 1.25;
  color: var(--color-primary-950); text-decoration: none;
  transition: background-color .15s ease;
}
.prose-page a.wayfinder-inquiry:hover { background: var(--color-accent-400); color: var(--color-primary-950); }
.prose-page a.wayfinder-chip:focus-visible,
.prose-page a.wayfinder-guide:focus-visible,
.prose-page a.wayfinder-inquiry:focus-visible {
  outline: 3px solid var(--color-accent-500); outline-offset: 2px;
}

@media (max-width: 479px) {
  .prose-page .wayfinder-grid > li.wayfinder-card { padding: 1.1rem 1rem 1rem; }
  .prose-page a.wayfinder-inquiry { width: 100%; justify-content: center; text-align: center; }
}