/* ==============================================================
   referenz-streifen.css  ·  Besitzer: P4 Start-Bausteine  ·  v4 „Passer“ (25.09.2026)
   Plan 8.3 K26 Referenz-Streifen Start. Markup: includes/referenz-streifen.php.
   Nur Tokens. Browser-Bogen = K02 Variante 'browser' (bogen.css).
   Gemeinsame P4-Regeln (.sb, .sb-kopf) stehen in bento.css.
   ============================================================== */

/* Kopf + „Alle Referenzen“ (ab 48rem rechts im Kopf), Liste, Orts-Leiste */
.rs-raster{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"kopf" "liste" "mehr" "orte";column-gap:2rem;
}
.rs-kopf{grid-area:kopf}
.rs-liste{grid-area:liste}
.rs-mehr{grid-area:mehr;margin-top:.5rem}
.rs-orte{grid-area:orte}
@media (min-width:48rem){
  .rs-raster{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kopf mehr" "liste liste" "orte orte"}
  .rs-mehr{align-self:end;margin:0 0 clamp(1.25rem, .9rem + 1.4vw, 2.25rem)}
}

.rs-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
}
@media (min-width:48rem){
  .rs-liste{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.rs-ref{min-width:0;position:relative}
.rs-link{display:block;color:var(--text);text-decoration:none;border-radius:var(--r-bogen)}
.rs-link:focus-visible{outline-offset:4px}
.rs-bogen .bogen-bild img{aspect-ratio:1024 / 555;object-fit:cover;object-position:top}
.rs-text{display:flex;flex-direction:column;gap:.2rem;padding:.35rem 0 0 8px;min-width:0}
.rs-meta{font-size:.9375rem;line-height:1.4;color:var(--muted)}
.rs-name{
  font-family:var(--schrift-titel);font-weight:660;font-stretch:96%;
  font-size:clamp(1.125rem, 1.06rem + .25vw, 1.25rem);line-height:1.25;color:var(--text);
}
.rs-pfeil{display:inline-block;color:var(--accent-text);transition:translate var(--t-kurz) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .rs-link:hover .bogen{rotate:0deg;translate:0 -4px;--platte-v:calc(var(--versatz) + 2px)}
  .rs-link:hover .rs-name{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
  .rs-link:hover .rs-pfeil{translate:3px -3px}
}

/* Orts-Leiste: interne Links auf die Staedteseiten (Wortlaut wie v3) */
.rs-orte{margin-top:clamp(1.5rem, 1rem + 1.6vw, 2.5rem);padding-top:1rem;border-top:1px solid var(--line)}
.rs-orte-innen{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.1rem}
.rs-orte-k{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin-right:.25rem;
}
.rs-orte a{
  display:inline-flex;align-items:center;min-height:32px;
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;font-size:1rem;
  color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--line-2);text-underline-offset:.22em;
}
.rs-orte a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.rs-orte .rs-orte-alle{color:var(--text)}

/* Unter 48rem: Referenzen als Wischreihe (Nachbarkarte sichtbar), die
   Orts-Leiste als eine wischbare Zeile. Beide enthalten Links. */
@media (max-width:47.99rem){
  .rs-liste{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%, 20rem);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
    padding:.5rem var(--gut) 1rem;gap:1.1rem;
    scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  }
  .rs-ref{scroll-snap-align:start}
  .rs-orte{margin-inline:calc(var(--gut) * -1);padding-top:.5rem}
  .rs-orte-innen{
    flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    padding:0 var(--gut) .35rem;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  }
  .rs-orte a{min-height:44px}
}