/* kv-rm-leitung.css — „Ihr Weg zur Klimaanlage“ als Kältemittelleitung (P33, Fabio 26.10.).
   Seiten: blog.html (Privat), blog/thema-gewerbe.html (Gewerbe), Abschnitt .rm-wrap.rml. Bewegung: /js/kv-rm-leitung.js.
   Vorbild Startseite #ablauf (kv-ablauf.css / kv-ablauf.js): dieselbe gerenderte Leitung (Kachel aus
   /img/3d/ablauf-leitung-desktop|handy.webp über ein SVG-Muster), dieselbe Kupferspitze, Leitungspaar 12 px Desktop,
   9 px Handy (Maßstab 0,75 wie Startseite). Statt Rohrschellen sitzt an jeder Station ein 3D-Objekt auf der Leitung.

   Aufbau je Station (.rm-station > .rm-rail):
     img.rml-obj   Objekt (/img/3d/ratgeber-weg-<reihe>-<n>-<motiv>-480|960.webp, ohne Leitung). Anker aus
                   out/3d/zeitleiste-final/ratgeber-weg-anker.json als Inline-Variablen:
                     --rml-w   Bildbreite, bei der das Leitungspaar 12 px breit ist: 960 × 12 / leitung_breite_px(960)
                               = 960 × 12 / 52,4 = 219,8 px (beide Reihen gleicher Maßstab)
                     --rml-ax  leitung_x_prozent (Leitung = Mitte der Schiene)
                     --rml-ay  objektmitte_y_prozent (Objektmitte in Höhe der Stations-Überschrift, --rml-y)
                   Handy: Breite × --rml-f (0,5 → Objekte ≈ 50–60 px in der 44-px-Schiene).
     span.rml-rohr Leitungsstück von dieser Station bis zur nächsten (top --rml-y, bottom −--rml-y = Stationshöhe).
                   Die letzte Station hat keines: die Leitung endet unter dem Kartenpin.
   Kopf (.rml-kopf): Kennzeile + ein Satz; die Leitung kommt von oben weich herein und läuft zum ersten Objekt.
   Lage rein in CSS, ohne Messung; ohne JS steht alles fertig da (Leitung ganz, Objekte da, keine Spitze).
   „Bewegung reduzieren“ / #ruhig: keine Klasse .rml-an → alles fertig.
   Raster: Schiene 144 + Abstand 24 (Desktop), 44 + 10 (≤ 640). */

/* Abstand Leitung ↔ Inhalt +32 px (Fabio 26.10. „zu knapp“): Leitung rückt 32 px nach links, Textspalte bleibt an Ort und Breite */
.rm-wrap.rml{position:relative;--rml-rail:144px;--rml-gap:24px;--rml-links:0px;--rml-y:46px;--rml-k:64px;--rml-f:1;--rml-auf:.2}
@media(min-width:641px){
 .rm-wrap.rml{max-width:1160px}                          /* +100: Textspalte bleibt so breit wie bisher */
}
.rml .rm-station{grid-template-columns:var(--rml-rail) minmax(0,1fr);gap:var(--rml-gap)}
.rml .rm-body{position:relative;z-index:3}               /* Karten liegen über Objektschatten */
.rml .rm-rail{position:relative;display:block;left:calc(var(--rml-links) * -1)}

/* Leitungsstück: SVG-Muster aus dem Startseiten-Render, 64 px breit inkl. Halo (Mitte x 32).
   Startseiten-Renders sind auf Weiß gerechnet (#ablauf ist weiß): multiply nimmt den hellen Saum auf #F5F5F3 weg. */
.rml-rohr{position:absolute;left:calc(50% - var(--rml-k) / 2);width:var(--rml-k);top:var(--rml-y);
 bottom:calc(var(--rml-y) * -1);z-index:0;pointer-events:none;mix-blend-mode:multiply}
.rml-rohr svg{display:block;width:100%;height:100%;overflow:visible}
.rml-rohr rect{fill:url(#rml-kachel-d)}

/* Objekt: Anker (--rml-ax | --rml-ay) liegt auf Schienenmitte | --rml-y */
.rml-obj{position:absolute;z-index:2;left:50%;top:var(--rml-y);width:calc(var(--rml-w) * var(--rml-f));height:auto;max-width:none;
 transform:translate(calc(var(--rml-ax,50%) * -1),calc(var(--rml-ay,50%) * -1));pointer-events:none;user-select:none}

/* Kupferspitze (Startseite: Anker = Ende der Isolierung, 24 | 8; Kupfer ragt 20 px nach vorn) */
.rml-spitze{position:absolute;left:0;top:0;z-index:1;display:none;max-width:none;pointer-events:none;will-change:transform;mix-blend-mode:multiply}
.rml-spitze--d{width:48px;height:36px}
.rml-spitze--h{width:36px;height:27px}

/* Bewegung an */
.rml-an .rml-obj{opacity:0;transform:translate(calc(var(--rml-ax,50%) * -1),calc(var(--rml-ay,50%) * -1 - 10px)) scale(.97);
 transition:opacity .45s var(--ease-out),transform .7s var(--ease-out)}
.rml-an .rml-obj.ist-da{opacity:1;transform:translate(calc(var(--rml-ax,50%) * -1),calc(var(--rml-ay,50%) * -1))}
@media(min-width:641px){.rml-an .rml-spitze--d.ist-sichtbar{display:block}}

/* Finale Gewerbe „Ihre Branche“: Kacheln in der Form der Stadtkacheln (.ort-card), aber als Links */
.rml-branchen a.ort-card{display:block;text-decoration:none}

/* Kopf: Station 0 — Kennzeile .eyebrow und Satz .lead aus dem Seiten-CSS, linksbündig an der Textspalte;
   die Leitung kommt von oben weich herein (Maske) und läuft bis zur Objektmitte der ersten Station. */
.rml-kopf{display:grid;grid-template-columns:var(--rml-rail) minmax(0,1fr);gap:var(--rml-gap);margin:0 0 var(--s-8)}
.rml-kopf .eyebrow{display:block;margin-bottom:var(--s-4)}
.rml-kopf .lead{margin:var(--s-4) 0 0;max-width:52ch}
.rml-kopf .rml-rohr{top:0;bottom:calc(var(--s-8) * -1 - var(--rml-y));
 -webkit-mask-image:linear-gradient(#0000,#000 120px);mask-image:linear-gradient(#0000,#000 120px)}

/* Handy: Leitung 9 px (Startseite-Handy) in einer 44-px-Schiene, Textspalte so breit wie bisher (375: 281 px);
   Objekte ≈ 50–60 px, ragen links in den Seitenrand */
@media(max-width:640px){
 .rm-wrap.rml{--rml-rail:44px;--rml-gap:16px;--rml-links:10px;--rml-k:48px;--rml-f:.5}
 .rml-rohr rect{fill:url(#rml-kachel-h)}
 .rml-an .rml-spitze--h.ist-sichtbar{display:block}
}
@media(prefers-reduced-motion:reduce){
 .rml-an .rml-obj{transition:none}
}

/* Handy kompakt (Fabio 26.10.: „wirkt extrem langgezogen“). Nur vorhandene Elemente, alle Links bleiben:
   Hauptkarte als niedriger Bildstreifen ohne Anrisstext, Werkzeug- und Artikelkarten als Zeilen (ohne Beschreibung,
   ohne Vorschaubild, Titel höchstens zwei Zeilen), Kacheln niedriger, Abstände 28 statt 46 zwischen Stationen,
   Stationsfrage 18 statt 20. Schriftgrade aus kv.css (--fs-*), Abstände 4 · 6 · 8 · 10 · 12 · 16 · 28. */
@media(max-width:640px){
 .rm-wrap.rml{--rml-y:34px}
 .rml-kopf{margin-bottom:var(--s-6)}
 .rml-kopf .lead{font-size:var(--fs-lg)}
 .rml-kopf .rml-rohr{bottom:calc(var(--s-6) * -1 - var(--rml-y))}
 .rml .rm-body{padding:4px 0 28px}
 .rml .rm-phase{margin-bottom:4px}
 .rml .rm-q{font-size:18px;margin-bottom:var(--s-3)}
 .rml .rm-row{gap:var(--s-2)}
 .rml .rm-lead{min-height:128px;padding:var(--s-4);gap:6px}
 .rml .rm-lead-x{display:none}
 .rml .rm-lead-t{font-size:var(--fs-xl);line-height:1.3}
 .rml .rm-lead-go{margin-top:0}
 .rml .rm-aside{gap:6px}
 .rml .rm-tool{padding:10px 14px}
 .rml .rm-tool p{display:none}
 .rml .rm-tool-h{font-size:var(--fs-md)}
 .rml .rm-tool-h svg{width:22px;height:22px;padding:4px}
 .rml .rm-sides{gap:6px}
 .rml .rm-side-img{display:none}
 .rml .rm-side span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  padding:0;margin:9px 12px;font-size:var(--fs-base);line-height:1.35}   /* margin statt padding: sonst blitzt Zeile 3 im Innenabstand */
 .rml .rm-side svg{margin-right:12px}
 .rml .rm-world{font-size:var(--fs-base)}
 .rml .rm-final .rm-body{padding-bottom:var(--s-4)}
 .rml .ort-intro{font-size:var(--fs-base);margin-bottom:10px}
 .rml .ort-grid{grid-auto-rows:minmax(72px,auto);gap:6px}   /* auto: sonst kappt die feste Zeile das aufgeklappte Stadt-Panel auf 72 px */
}