/* G2 Vorher/Nachher-Routenkarte (.rba-*), Claude Design Export 2026-09-29 */
.rba{--rba-d1:var(--accent,#4f72e3);--rba-d2:var(--amber,#d97706);--rba-d3:var(--green,#059669);--rba-d4:#9d174d;--rba-bg:var(--surface2,#f8fafc);margin:0}
.rba-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rba-switch{display:none}
.rba-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.rba-panel{display:grid;gap:14px;align-content:start}
.rba-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rba-title{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0}
.rba-sub{font-size:16px;color:var(--text3);font-weight:500;white-space:nowrap;margin:0}
.rba-map{display:block;width:100%;height:auto;background:var(--rba-bg);border:1px solid var(--border);border-radius:var(--r3);outline:none}
.rba-map:focus-visible{box-shadow:0 0 0 3px var(--accent)}

/* Karte */
.rba-park{fill:#eaf1e8}
.rba-st-sec{fill:none;stroke:#e9edf2;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.rba-st-pri{fill:none;stroke:#e2e7ee;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rba-st-alt{fill:none;stroke:#dfe5ec;stroke-width:2.2;stroke-linejoin:round}
.rba-st-ring{fill:none;stroke:#dae1e9;stroke-width:3.4;stroke-linejoin:round}
.rba-isar{fill:none;stroke:#c9def2;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.rba-lbl{font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:500;fill:#64748b;letter-spacing:.02em;paint-order:stroke;stroke:#f8fafc;stroke-width:3px;stroke-linejoin:round}
.rba-lbl-isar{font-style:italic;fill:#5b83b3}
.rba-halo{fill:none;stroke:#f8fafc;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
.rba-route{fill:none;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.rba-r1{stroke:var(--rba-d1)}.rba-r2{stroke:var(--rba-d2)}.rba-r3{stroke:var(--rba-d3)}.rba-r4{stroke:var(--rba-d4)}
.rba-draw{fill:none;stroke:#fff;stroke-width:10;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.rba-stop circle{fill:#fff;stroke-width:2.6}
.rba-s1 circle{stroke:var(--rba-d1)}.rba-s2 circle{stroke:var(--rba-d2)}.rba-s3 circle{stroke:var(--rba-d3)}.rba-s4 circle{stroke:var(--rba-d4)}
.rba-lines{transition:opacity .25s}
.rba-x{fill:rgba(220,38,38,.12);stroke:#b91c1c;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.rba-map:hover .rba-x,.rba-map:focus .rba-x,.rba:has(.rba-k--x:hover) .rba-x,.rba:has(.rba-k--x:focus) .rba-x{opacity:1;transform:none}
.rba-map:hover .rba-lines,.rba-map:focus .rba-lines,.rba:has(.rba-k--x:hover) .rba-lines,.rba:has(.rba-k--x:focus) .rba-lines{opacity:.4}

@media(prefers-reduced-motion:no-preference){
.rba-draw{stroke-dashoffset:1;animation:rba-draw 1.3s cubic-bezier(.45,.1,.25,1) forwards}
.rba-draw.rba-d2{animation-delay:.18s}.rba-draw.rba-d3{animation-delay:.36s}.rba-draw.rba-d4{animation-delay:.54s}
.rba-panel--after .rba-draw{animation-delay:.5s}.rba-panel--after .rba-draw.rba-d2{animation-delay:.68s}.rba-panel--after .rba-draw.rba-d3{animation-delay:.86s}
}
@media(prefers-reduced-motion:reduce){.rba-x,.rba-lines{transition:none}}
@keyframes rba-draw{to{stroke-dashoffset:0}}

/* Ergebnis */
.rba-result{margin-top:40px;border-top:1px solid var(--border);padding-top:32px}
.rba-result-h{font-size:15px;font-weight:600;color:var(--text2);margin:0 0 14px}
.rba-kpis5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));container-type:inline-size}
.rba-k{display:flex;flex-direction:column;padding:0 24px;border-left:1px solid var(--border)}
.rba-k:first-child{padding-left:0;border-left:0}
.rba-k-v{font-size:clamp(22px,calc(4.5cqi - 10px),44px);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%}
.rba-k-v small{font-size:.5em;font-weight:700;letter-spacing:0;margin-left:.2em}
.rba-k-l{font-size:17px;font-weight:600;color:var(--text);margin-top:10px}
.rba-k-f{font-size:14px;color:var(--text3);font-variant-numeric:tabular-nums;margin-top:2px}
.rba-k--x{cursor:help;outline:none;border-radius:4px}
.rba-k--x:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.rba-k--x .rba-k-l{white-space:nowrap}
.rba-k--x .rba-k-l::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-1px;border-radius:50%;border:1.5px solid #b91c1c;background:rgba(220,38,38,.12)}
.rba-foot{margin-top:28px}
.rba-note{font-size:13px;color:var(--text3);margin:0}
@media(max-width:1100px){.rba-k{padding:0 16px}}

/* Mobil: Umschalter statt zwei Karten */
@media(max-width:720px){
.rba-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#f1f5f9;border-radius:var(--r2);margin-bottom:16px}
.rba-switch label{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:8px;font-size:16px;font-weight:600;color:var(--text2);cursor:pointer;user-select:none}
#rba-v-before:checked~.rba-switch label[for="rba-v-before"],#rba-v-after:checked~.rba-switch label[for="rba-v-after"]{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px var(--border)}
#rba-v-before:focus-visible~.rba-switch label[for="rba-v-before"],#rba-v-after:focus-visible~.rba-switch label[for="rba-v-after"]{outline:2px solid var(--accent);outline-offset:2px}
.rba-grid{grid-template-columns:minmax(0,1fr);gap:0}
#rba-v-before:checked~.rba-grid .rba-panel--after,#rba-v-after:checked~.rba-grid .rba-panel--before{display:none}
.rba-panel .rba-draw{animation-delay:0s}.rba-panel .rba-draw.rba-d2{animation-delay:.18s}.rba-panel .rba-draw.rba-d3{animation-delay:.36s}
.rba-title{display:none}
.rba-sub{font-size:15px}
.rba-kpis5{grid-template-columns:1fr 1fr;gap:22px 0}
.rba-k{padding:0 0 0 14px}
.rba-k:first-child{grid-column:1/-1}
.rba-k:nth-child(2),.rba-k:nth-child(4){padding-left:0;border-left:0}
.rba-k:nth-child(3),.rba-k:nth-child(5){padding-left:14px;border-left:1px solid var(--border)}
.rba-k-v{font-size:clamp(24px,calc(10cqi - 4px),34px)}
.rba-k-l{font-size:15px;margin-top:6px}
.rba-k-f{font-size:13px}
.rba-result{margin-top:24px;padding-top:20px}
}
.sec-h:has(+ .rba) .lead{text-wrap:balance}
#rba-h{scroll-margin-top:96px}