/*
 * RICHTUNG 3: TEASER UND VERLINKUNG (Basis „Startseite integriert mit Menüleiste“)
 * Die Startseite zeigt eine Auswahl und führt mit „mehr“-Links zu den Unterseiten. Anklickbare Zeilen
 * haben denselben Effekt wie bisher (Akzentfarbe, Einrücken), jetzt auch für die Tastatur (:focus-within).
 * Zusatz zu richtung-3.css, integriert.css, integriert-messing.css und leiste.css.
 */

/* ---------- Leistungsliste: Zeile = Link (Name, Kurzbeschreibung, Pfeil) ---------- */
.leistungen--link li { display: block; padding: 0; font-size: 1rem; line-height: 1.2; }
.leistungen--link li:hover, .leistungen--link li:focus-within { background: var(--lime); padding-left: 1rem; }
.leistung { display: grid; grid-template-columns: 2.2rem minmax(0, 1.25fr) minmax(0, 1fr) 2rem; column-gap: 1.2rem; align-items: baseline; padding: .6rem 1rem .6rem 0; color: inherit; text-decoration: none; }
.leistungen--link .leistung .leistung__nr { font-stretch: 100%; font-weight: 600; font-size: .85rem; letter-spacing: .05em; min-width: 0; text-transform: none; }
.leistungen--link .leistung .leistung__name { font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 3.3vw, 3.4rem); line-height: .98; letter-spacing: -.012em; min-width: 0; }
.leistungen--link .leistung .leistung__kurz { font-stretch: 100%; font-weight: 500; text-transform: none; font-size: 1rem; line-height: 1.35; letter-spacing: 0; min-width: 0; max-width: 32rem; }
.leistungen--link .leistung .leistung__pfeil { font-stretch: 100%; font-weight: 700; font-size: 1.6rem; min-width: 0; justify-self: end; transition: transform .25s; }
.leistungen--link li:hover .leistung__pfeil, .leistungen--link li:focus-within .leistung__pfeil { transform: translateX(.3rem); }

/* ---------- „mehr“-Link am Ende eines Teasers ---------- */
.abschnitt__mehr { margin-top: var(--s3); }
.mehr { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.2rem; padding: .7rem 1.3rem; background: var(--ink); color: rgba(255, 255, 255, 1); text-decoration: none; border: 2px solid var(--ink);
  font-stretch: 75%; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; transition: background .2s, color .2s; }
.mehr:hover, .mehr:focus-visible { background: var(--lime); color: rgba(0, 0, 0, 1); }

/* ---------- Referenzen: Kachel = Link, mit Anzahl ---------- */
.ref-raster li { padding: 0; }
.ref-raster li a { display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem; width: 100%; min-height: 11rem; padding: 1.4rem 1.3rem 1.6rem; color: inherit; text-decoration: none; }
.ref-raster li small { font-stretch: 100%; font-weight: 600; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.ref-raster li:focus-within { background: var(--lime); color: rgba(0, 0, 0, 1); }

@media (max-width: 48rem) {
  .leistung { grid-template-columns: 2rem minmax(0, 1fr) 1.6rem; row-gap: .35rem; }
  .leistungen--link .leistung .leistung__name { grid-column: 2; font-size: clamp(1.6rem, 7.6vw, 2.6rem); }
  .leistungen--link .leistung .leistung__kurz { grid-column: 2; grid-row: 2; }
  .leistungen--link .leistung .leistung__pfeil { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .leistungen--link .leistung .leistung__nr { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .leistung__pfeil { transition: none; } }