/* Handyreparatur für Radevormwald (app/content/seiten/handyreparatur-radevormwald.php) – nur Ergänzungen zu site.css */

/* Kopf: Text links, Streckenband rechts */
.rv-kopf { display: grid; gap: 32px; align-items: center; padding-block: 28px 56px; }
.rv-kopf .h1 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.8rem); }
.rv-kopf__zweit { display: block; color: var(--stahl); }
.rv-kopf .gross { max-width: 48ch; }
.rv-kopf .knopf-reihe { margin-top: 1.3em; }
.rv-kopf__hinweis { margin: 14px 0 0; font-size: .85rem; color: var(--stahl); max-width: 54ch; }
@media (min-width: 960px) {
  .rv-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; padding-block: 40px 88px; }
}

/* Streckenband: Radevormwald – B 229 – Halver */
.rv-strecke { padding: 24px 24px 6px; border: 1px solid var(--alu); border-radius: 4px; background: #fff; }
.rv-strecke .etikett { margin-bottom: 20px; }
.rv-strecke__liste { list-style: none; margin: 0; padding: 0; }
.rv-strecke__liste li { position: relative; padding: 0 0 24px 34px; }
.rv-strecke__halt::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--rot); border-radius: 50%; background: #fff; }
.rv-strecke__halt--ziel::before { background: var(--rot); box-shadow: 0 0 0 4px rgb(160 0 0 / .14); }
.rv-strecke__liste li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: -3px; border-left: 2px solid rgb(160 0 0 / .35); }
/* gestrichelt per Verlauf – Chromes „dashed“ verteilt lange Kanten auf eine einzige Lücke */
.rv-strecke__liste li.rv-strecke__weg::after { top: -3px; left: 7px; width: 2px; border-left: 0; background: repeating-linear-gradient(to bottom, rgb(160 0 0 / .5) 0 6px, transparent 6px 11px); }
.rv-strecke__ort { display: block; font: 700 1.12rem/1.3 var(--din); letter-spacing: .01em; }
.rv-strecke__info { display: block; margin-top: 2px; font-size: .92rem; line-height: 1.45; color: var(--text-2); }
.rv-strecke__status { margin-top: 8px; font-size: .92rem; }
.rv-schild { display: inline-block; padding: 2px 10px 1px; border: 2px solid var(--schwarz); border-radius: 3px; background: #F5B800; color: var(--schwarz); font: 700 1rem/1.4 var(--din); letter-spacing: .04em; }

/* Zweispaltige Abschnittsköpfe: Überschrift links, Einleitung rechts */
.rv-zweier { display: grid; gap: 8px 64px; margin-bottom: 28px; align-items: end; }
.rv-zweier .h2 { margin-bottom: 0; }
.rv-zweier > p { margin: 0; color: var(--text-2); max-width: 58ch; }
@media (min-width: 900px) { .rv-zweier { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Entscheidungshilfe */
.rv-rat__liste { margin: 0; border-top: 2px solid var(--schwarz); }
.rv-rat__liste > div { display: grid; gap: 10px 64px; padding: 22px 0; border-bottom: 1px solid var(--alu); }   /* gleiche Spalten wie .rv-zweier darüber */
@media (min-width: 900px) { .rv-rat__liste > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rv-rat__liste dt { font-weight: 600; font-size: 1.08rem; line-height: 1.4; max-width: 34ch; }
.rv-rat__liste dd { margin: 0; color: var(--text-2); max-width: 62ch; }
.rv-weg { display: block; width: fit-content; margin-bottom: 8px; padding: 3px 8px 2px; border: 1.5px solid currentColor; border-radius: 3px; font: 700 .72rem/1.3 var(--din); letter-spacing: .14em; text-transform: uppercase; }
.rv-weg--laden { color: var(--rot); }
.rv-weg--post { color: var(--schwarz); }
.rv-weg--frage { color: var(--stahl); }

/* Ablauf im Laden + Einsendung */
.rv-ablauf { align-items: start; }
.rv-ablauf .post__schritte { max-width: 38rem; margin-bottom: 24px; }
.rv-ablauf__text { color: var(--text-2); max-width: 56ch; margin: 0; }
.rv-post { padding: 28px; border: 1px solid var(--alu); border-radius: 4px; background: #fff; }
.rv-post p:not(.etikett) { color: var(--text-2); }
.rv-post .knopf-reihe { align-items: center; column-gap: 16px; }
.rv-nw { white-space: nowrap; }
@media (min-width: 900px) { .rv-post { margin-top: 36px; } }
.rv-daten { margin: 18px 0 0; border-top: 1px solid var(--alu); }
.rv-daten div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--alu); font-size: .95rem; }
.rv-daten dt { padding-top: 3px; font: 400 .74rem/1.4 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.rv-daten dd { margin: 0; }

/* Beispielpreise: 3 × 2 statt 5 + 1 */
.rv-kacheln { margin-top: 4px; }
@media (min-width: 700px) { .rv-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .rv-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.rv-fussnote { margin: 18px 0 0; font-size: .9rem; color: var(--stahl); max-width: 72ch; }

/* Nicht nur Handys */
.rv-mehr .arten { margin: 8px 0 48px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rv-mehr .karte p { color: var(--text-2); }

/* Anfahrt, Zeiten, Karte */
.rv-anfahrt > div > p:not(.etikett):not(.status):not(.knopf-reihe):not(.rv-fussnote) { color: var(--text-2); max-width: 56ch; }
.rv-anfahrt__zwischen { margin-top: 28px; }
.rv-anschrift { margin-top: 18px; }
.rv-karte { width: 100%; max-width: 600px; }
.rv-karte figcaption { margin-top: 14px; font-size: .88rem; color: var(--stahl); max-width: 46ch; }
@media (min-width: 960px) {
  .rv-anfahrt { align-items: start; }
  .rv-karte { position: sticky; top: calc(var(--kopf-h) + 40px); margin-top: 40px; }
}
@media (max-width: 599px) { .rv-daten div { grid-template-columns: 6.2rem minmax(0, 1fr); } }
.umgebung__bahn.rv-hier { stroke: var(--rot); stroke-width: 2.6; }
.umgebung__ort.rv-hier { fill: var(--rot); }
.umgebung__name.rv-hier { fill: var(--rot); }
.umgebung__liste li.rv-hier { background: var(--rot); color: #fff; }
.umgebung__liste li.rv-hier span { color: rgb(255 255 255 / .82); }