/* ============================================================
   FRAME — Kontextuelle Rücknavigation (ZENTRALE Komponente)
   Einzige Quelle für alle „← Zurück"-Links. Keine lokalen
   Kopien oder eigenen Styling-Systeme pro Seite.

   Basis:            .back-link
   Kontext-Modifier: .back-link--on-dark   (über dunklem Grund)
   Layout-Modifier:  .back-link--header, .back-link--hero,
                     .back-link--detail-top, .back-link--footer

   Beschriftung + Ziel sind seitenspezifisch (echter <a href>).
   Pfeil bleibt einheitlich als Unicode „←" (&#8592;) im Markup.
   Fallback-Werte, damit die Komponente auch ohne properties.css
   (z. B. Off-Market, Legal) korrekt aussieht.
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* min. 44px Touch-Target (WCAG 2.5.5); Negativ-Margin neutralisiert
     das Padding optisch, damit die Position identisch bleibt */
  padding: 0.85rem 0.9rem 0.85rem 0;
  margin: -0.85rem 0 0.4rem 0;
  font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone, #9B9B93);
  transition: color 0.25s ease;
}
.back-link:hover { color: var(--ink, #1A1A18); }
.back-link:focus-visible {
  outline: 1px solid var(--ink, #1A1A18);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Zentrale FRAME-Winkelpfeil-Komponente für Rücklinks (ersetzt Unicode "←").
   Optionales <span>, wird nur gerendert wo im Markup vorhanden — bestehende
   .back-link-Verwendungen ohne Span bleiben unverändert (reiner Text). */
.back-link__arrow {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .back-link:hover .back-link__arrow,
  .back-link:focus-visible .back-link__arrow {
    transform: rotate(-45deg) translate(-3px, 0);
  }
}

/* über dunklem Hero/Bild/Seite (Off-Market, Mailand-Hero, Legal) */
.back-link--on-dark {
  color: rgba(252, 252, 250, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.back-link--on-dark:hover { color: #fff; }
.back-link--on-dark:focus-visible { outline-color: #fff; }

/* Kopfzeile: eigene dezente Zeile oben links im .site-header, über der
   Logo/Nav-Reihe. Einheitlich auf allen Unterseiten (Logo bleibt so bündig
   links). align-self hält sie in der Flex-Spalte linksbündig, ohne zu strecken. */
.back-link--header { align-self: flex-start; margin: -0.5rem 0 0.35rem; white-space: nowrap; }

/* absolut oben links über einem Full-Bleed-Hero (Mailand) */
.back-link--hero {
  position: absolute;
  top: clamp(0.9rem, 2.5vh, 1.6rem);
  left: max(1.5rem, 6vw);
  z-index: 3;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.55);
}

/* Detail-Seite: über der Galerie, sofort sichtbar (above the fold) */
.back-link--detail-top { margin: -0.85rem 0 0.6rem 0; }

/* Sekundärer Rücksprung am Seitenende (langer Content) */
.back-link--footer { margin: 2.4rem 0 0 0; }

@media (prefers-reduced-motion: reduce) {
  .back-link,
  .back-link__arrow { transition: none; }
}


/* Einheitliche kontextuelle Rueckzeile auf Unterseiten: schlank, direkt unter dem Header,
   linksbuendig im selben Gutter wie das Logo. Auf allen Unterseiten gleich. */
.back-link--subpage { display: block; margin: 0; padding: 0.85rem max(1.25rem, 5vw) 0; }