/* ============================================================
   ROHNER IMMOBILIEN — Ratgeber-Design v2 (DESIGN-VORSCHAU, Feinschliff 25.09.2026)
   Ergänzt assets/rohner-h.css, ändert es NICHT. Wird NACH rohner-h.css
   und NACH dem seitenlokalen <style> geladen. Alles unter body.rv2 gescopet.
   Maßstab: Wissen/Unternehmen/Design/Ratgeber-Verkaufsfahrplan-Design-2026.md
   (8 Hebel, Carlo-Freigabe 15.06.2026) + Design-Kritik 24./25.09.2026.
   Bausteine:
     0  Design-Tokens             Abstände 8/16/24/32/48/64/96 · Medien · Marker · Divider
     1  Drei Layoutbreiten        .w-read / .w-info / .w-wide
     2  Abschnittskopf            .kopf (Nummer – Eyebrow – H2 – Intro, eine Achse)
     3  Ziffern-Bauteil           .nr + nummerierte Listen .strahl / .pruef
     4  Farb-Rhythmus             .zone-blau (1×) · .zone-navy (1×)
     5  Zitate — genau 3 Varianten: .gross.ohne-bild · .gross (Porträt) · .zitat (inline)
     6  Weg-Streifen (Prozess)    .weg
     7  Icon-Liste mit Hairlines  .ilist
     8  Netzwerk-Grafik           .netz
     9  Balken-Gegenüberstellung  .balken
    10  Hero · Inhaltsverzeichnis · Medien · Buttons (Markenblau fest, Carlo 25.09.2026)
   Farben nur DNA-Tokens; Text-Kontraste ≥ 4,5:1 (Werte je Regel notiert).
   ============================================================ */

/* ---------- 0 · Design-Tokens ---------- */
body.rv2{
  --read:740px;--info:1060px;--wide:1240px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;
  --radius-media:16px;
  --media-shadow:0 20px 45px rgba(22,43,80,.12);
  --control-h:52px;
  --divider:#DCE4EC;
  --marker:36px;             /* Ziffernkreis nummerierter Listen */
  --marker-line:#9CC8F5;     /* Verbindungslinie auf Hell (dekorativ) */
  --q-before:56px;--q-after:48px;--q-max:760px;   /* Zitat-Maße, alle 3 Varianten */
  --azur-t:#0366B4;          /* Brand-Blau für TEXT auf #EDF3FA: 5,28:1 (#0472C7 dort nur 4,44:1) */
  --muted:#5F5F69;           /* Grau auf Weiß 6,31:1 · auf #EDF3FA 5,65:1 */
  --ghost:#C4D9E9;           /* Kapitelnummer auf Weiß — rein dekorativ, aria-hidden */
  --cta:#0472C7;             /* CTA = Markenblau (Entscheidung B, Carlo 25.09.2026): Weiß darauf 4,96:1 */
}

/* ---------- 1 · Drei Layoutbreiten ---------- */
.rv2 .w-read,.rv2 .w-info,.rv2 .w-wide{margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut);box-sizing:content-box}
.rv2 .w-read{max-width:var(--read)}
.rv2 .w-info{max-width:var(--info)}
.rv2 .w-wide{max-width:var(--wide)}
.rv2 .w-read .prose{max-width:none}
@media(max-width:560px){.rv2 .w-read,.rv2 .w-info,.rv2 .w-wide{padding-left:18px;padding-right:18px}}

/* Kapitel: weiße Kapitel folgen dicht aufeinander, getrennt durch eine Hairline —
   Farbflächen setzen den Rhythmus. */
.rv2 .kapitel{padding:clamp(var(--s6),7vw,var(--s12)) 0}
.rv2 .kapitel.erst{padding-top:clamp(var(--s1),2vw,var(--s3))}
.rv2 .kapitel.weiss+.kapitel.weiss{padding-top:clamp(var(--s1),2vw,var(--s3))}
.rv2 .kapitel.weiss+.kapitel.weiss .kopf{border-top:1px solid var(--divider);padding-top:clamp(var(--s6),5vw,var(--s8))}

/* ---------- 2 · Abschnittskopf — EINE linke Achse, feste Abstände 14 / 12 / 18 ----------
   Nummer (dekorativ, aria-hidden) → Eyebrow → H2 → Intro. Keine hängende Ziffer mehr. */
.rv2 .kopf{position:relative}
.rv2 .kap-no{display:block;font-family:"Manrope",sans-serif;font-weight:800;font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.04em;color:var(--ghost);font-variant-numeric:tabular-nums;margin:0 0 14px;user-select:none}
.rv2 .kopf .eyebrow{margin:0 0 12px}
.rv2 .kopf h2{margin:0 0 18px}
.rv2 .zone-navy .kap-no{color:rgba(255,255,255,.14)}
.rv2 .zone-blau .kap-no{color:#BCD3EA}

/* Icons: Lucide (ISC-Lizenz), inline als SVG-Symbole im Dokument */
.rv2 svg.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3 · Ziffern-Bauteil (EINE Nummerierungs-Sprache) ----------
   Kreis in Brand-Blau, weiße zweistellige Ziffer (Manrope 800, tnum).
   Weiß auf #0472C7 = 4,96:1. Auf Navy invertiert: Navy auf Weiß 14,04:1. */
.rv2 .nr{display:inline-flex;align-items:center;justify-content:center;width:var(--marker);height:var(--marker);border-radius:50%;background:#0472C7;color:#fff;font-family:"Manrope",sans-serif;font-weight:800;font-size:14px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;flex:none;line-height:1}
.rv2 .zone-navy .nr{background:#fff;color:var(--navy)}

/* 3a · Zeitstrahl (.strahl) — Marker und Linie hängen am SELBEN Bezugskasten (dem li):
   Linie läuft je Schritt vom Kreismittelpunkt bis zum Mittelpunkt des nächsten Kreises,
   beginnt also exakt im ersten und endet exakt im letzten Mittelpunkt.
   (Ursache des alten Versatzes: .prose ol{padding-left:22px} schob die Kreise, nicht die Linie.) */
.rv2 ol.strahl{counter-reset:s;list-style:none;margin:var(--s2) 0 var(--s3);padding:0;position:relative}
.rv2 ol.strahl::before{content:none}
.rv2 ol.strahl>li{counter-increment:s;position:relative;margin:0;padding:6px 0 var(--s3) calc(var(--marker) + 20px);min-height:var(--marker)}
.rv2 ol.strahl>li:last-child{padding-bottom:0}
.rv2 ol.strahl>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;z-index:1;width:var(--marker);height:var(--marker);border-radius:50%;background:#0472C7;color:#fff;font-family:"Manrope",sans-serif;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:0}
.rv2 ol.strahl>li:not(:last-child)::after{content:"";position:absolute;z-index:0;left:calc(var(--marker) / 2 - 1px);width:2px;top:calc(var(--marker) / 2);bottom:calc(var(--marker) / -2);background:var(--marker-line)}
.rv2 ol.strahl>li b{display:block;font-family:"Manrope",sans-serif;color:var(--navy);font-size:17px;margin-bottom:6px}
.rv2 .zone-navy ol.strahl>li::before{background:#fff;color:var(--navy)}
.rv2 .zone-navy ol.strahl>li::after{background:rgba(255,255,255,.3)}
.rv2 .zone-navy ol.strahl>li b{color:#fff}

/* 3b · Prüfliste (.pruef) — gleicher Marker, Hairlines auf der Textachse */
.rv2 ol.pruef{counter-reset:p;list-style:none;padding:0;margin:var(--s1) 0 var(--s3)}
.rv2 ol.pruef>li{counter-increment:p;position:relative;padding:var(--s2) 0 var(--s2) calc(var(--marker) + 20px);border-bottom:1px solid var(--divider);margin:0}
.rv2 ol.pruef>li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:12px;width:var(--marker);height:var(--marker);border:0;border-radius:50%;background:#0472C7;color:#fff;font-family:"Manrope",sans-serif;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.rv2 ol.pruef>li b{color:var(--navy)}

/* ---------- 4 · Farb-Rhythmus ---------- */
.rv2 .weiss{background:#fff}
.rv2 .zone-blau{background:#EDF3FA}
.rv2 .zone-blau .eyebrow,.rv2 .zone-blau a{color:var(--azur-t)}
.rv2 .zone-blau .prose p,.rv2 .zone-blau p{color:#333333}
.rv2 .zone-navy{position:relative;background:linear-gradient(135deg,#162B50,#0E1C36);color:#E3EAF3;overflow:hidden}
/* Giebel-Muster: stark zurückgenommen (Carlo 25.09.: „dezenter") — 2,5 % Deckkraft, große Kachel (≈ 96 px je Giebel) */
.rv2 .zone-navy::before{content:"";position:absolute;inset:0;z-index:0;background:url("pattern-giebel.svg") repeat;background-size:192px 134px;opacity:.025;pointer-events:none}
.rv2 .zone-navy>*{position:relative;z-index:1}
.rv2 .zone-navy h2,.rv2 .zone-navy h3,.rv2 .zone-navy strong,.rv2 .zone-navy b{color:#fff}
.rv2 .zone-navy .prose p,.rv2 .zone-navy .prose li,.rv2 .zone-navy p{color:#E3EAF3}          /* 11,59:1 */
.rv2 .zone-navy .eyebrow{color:#8CC2F2}                                                      /* 7,43:1 */
.rv2 .zone-navy a,.rv2 .zone-navy .prose a{color:#9CC8F5;text-decoration:underline;text-underline-offset:3px} /* 8,02:1 */
.rv2 .zone-navy .fallkopf,.rv2 .zone-navy .anm{color:#B4C3D6}                                /* 7,84:1 */
.rv2 .zone-navy .erklaer{border-color:rgba(255,255,255,.18)}
.rv2 .zone-navy .zitat blockquote{color:#fff}
.rv2 .zone-navy .zitat figcaption{color:#B4C3D6}
.rv2 .zone-navy .zitat::before{background:linear-gradient(90deg,#8CC2F2,#fff)}
.rv2 .zone-navy a:focus-visible{outline-color:#8CC2F2}

/* ---------- 5 · Zitate — genau DREI Varianten, einheitliche Maße ----------
   Alle: max. 760 px, Abstand davor 56 / danach 48, Autorenzeile 14 px an der Quote ausgerichtet.
   a) .zitat            Inline-Zitat im Lesefluss (kurzer Dach-Strich als Einstieg, keine Box)
   b) .gross            Großaussage mit Porträt (Porträt links, Quote + Autor in EINER Spalte)
   c) .gross.ohne-bild  Großaussage zentriert
   Verlaufsende #0095F7 auf Weiß = 3,16:1 → nur im Großtext (≥ 26 px, 800) zulässig. */
.rv2 .zitat{margin:var(--q-before) 0 var(--q-after);padding:0;border:0;max-width:var(--q-max)}
.rv2 .zitat::before{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--grad);margin-bottom:var(--s2)}
.rv2 .zitat blockquote{margin:0;font-family:"Manrope",sans-serif;font-weight:700;color:var(--navy);font-size:clamp(20px,2vw,22px);line-height:1.5;letter-spacing:-.01em}
.rv2 .zitat figcaption{margin-top:12px;font-size:14px;line-height:1.5;font-weight:500;color:var(--muted)}   /* 6,31:1 */

.rv2 .gross{--por:128px;max-width:var(--q-max);margin:var(--q-before) auto var(--q-after);display:grid;grid-template-columns:var(--por) minmax(0,1fr);column-gap:40px;row-gap:var(--s2);align-items:center}
.rv2 .gross .por{grid-row:1 / span 2;width:var(--por);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 0 0 7px #D6E6F7,var(--media-shadow)}
.rv2 .gross .por img{width:100%;height:100%;object-fit:cover}
.rv2 .gross blockquote{margin:0;align-self:end;font-family:"Manrope",sans-serif;font-weight:800;color:var(--navy);font-size:clamp(26px,3vw,36px);line-height:1.25;letter-spacing:-.025em;text-wrap:balance}
.rv2 .gross figcaption{margin:0;align-self:start;font-size:14px;line-height:1.5;font-weight:500;color:var(--muted)}
.rv2 .gross figcaption::before{content:none}
.rv2 .gross.ohne-bild{grid-template-columns:minmax(0,1fr);text-align:center}
.rv2 .gross.ohne-bild blockquote{max-width:24ch;margin:0 auto;align-self:auto}
.rv2 .gross .kw{font-style:normal;background:linear-gradient(90deg,#0472C7,#0095F7);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (forced-colors:active){.rv2 .gross .kw{color:inherit;background:none}}
@media(max-width:700px){
  .rv2 .gross{--por:96px;grid-template-columns:minmax(0,1fr);row-gap:var(--s2);text-align:left}
  .rv2 .gross .por{grid-row:auto;margin-bottom:var(--s1)}
  .rv2 .gross.ohne-bild{text-align:center}
}

/* ---------- 6 · Weg-Streifen „Vom Wert bis zur Übergabe" ----------
   Desktop: 3 Spalten, je Dreiergruppe eine feine Gruppenlinie. Linie zwischen zwei Kreisen:
   exakt auf Kreismitte, je 12 px Abstand zu beiden Kreisen. Tablet: 2 Spalten.
   Mobil: vertikaler Zeitstrahl, Linie von Kreismitte zu Kreismitte. Reihenfolge = <ol>. */
.rv2 .weg{--weg-gap:clamp(24px,3vw,48px);--ico:64px;list-style:none;margin:clamp(var(--s4),4vw,var(--s6)) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--weg-gap);row-gap:var(--s8)}
.rv2 .weg>li{position:relative;margin:0;min-width:0}
.rv2 .weg .knoten{position:relative;display:flex;align-items:center;height:var(--ico);margin-bottom:var(--s2)}
.rv2 .weg .ico{position:relative;z-index:1;width:var(--ico);height:var(--ico);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#0472C7;box-shadow:0 0 0 1px #D6E6F7,0 14px 28px -18px rgba(22,43,80,.45)}
.rv2 .weg .ico svg{width:28px;height:28px}
.rv2 .weg .ico .nr{position:absolute;top:-6px;right:-10px;width:30px;height:30px;font-size:12.5px;box-shadow:0 0 0 3px #EDF3FA}
/* Verbindungslinie zur nächsten Station (in derselben Reihe) */
.rv2 .weg .knoten::after{content:"";position:absolute;left:calc(var(--ico) + 12px);right:calc(12px - var(--weg-gap));top:calc(50% - 1px);height:2px;background:linear-gradient(90deg,#0472C7,#9CC8F5);border-radius:2px;transform-origin:left;transition:transform 1s var(--ease) .2s}
.rv2 .weg>li:nth-child(3n) .knoten::after,.rv2 .weg>li:last-child .knoten::after{display:none}
.rv2 .weg h3{font-size:clamp(19px,1.7vw,21px);margin:0 0 6px;letter-spacing:-.02em}
.rv2 .weg p{font-size:16.5px;line-height:1.62;color:#333333;margin:0}
.rv2 .weg a{font-weight:700;color:var(--azur-t);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Inline-Link mit Pfeil: Pfeil hängt am letzten Wort, nie allein in einer Zeile */
.rv2 .weg a.mehr{display:inline-flex;align-items:baseline;gap:6px;margin-top:10px;padding:4px 0;text-decoration:none}
.rv2 .weg a.mehr svg{position:relative;top:3px;width:16px;height:16px;flex:none;transition:transform .24s var(--ease)}
.rv2 .weg a.mehr:hover svg{transform:translateX(3px)}
.rv2 .weg a.mehr:hover{text-decoration:underline}
/* Reveal: Linie zeichnet sich, sobald der Streifen sichtbar wird */
.rv2 .weg.reveal .knoten::after{transform:scaleX(0)}
.rv2 .weg.reveal.in .knoten::after{transform:scaleX(1)}
.rv2 .weg-ende{margin-top:clamp(var(--s4),4vw,var(--s6));font-size:16px;color:var(--muted);max-width:720px}
@media(min-width:981px){
  /* feine Gruppenlinie über jeder neuen Dreiergruppe, mittig im Zeilenabstand, volle Streifenbreite */
  .rv2 .weg>li:nth-child(3n+1):not(:first-child)::before{content:"";position:absolute;left:0;top:calc(var(--s8) / -2);width:calc(300% + 2 * var(--weg-gap));height:1px;background:#D3E0EE}
}
@media(max-width:980px){
  .rv2 .weg{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)}
  .rv2 .weg>li:nth-child(3n) .knoten::after{display:block}
  .rv2 .weg>li:nth-child(2n) .knoten::after,.rv2 .weg>li:last-child .knoten::after{display:none}
}
@media(max-width:640px){
  .rv2 .weg{--ico:56px;grid-template-columns:minmax(0,1fr);row-gap:0}
  .rv2 .weg>li{padding:0 0 var(--s4) calc(var(--ico) + 24px);min-height:var(--ico)}
  .rv2 .weg>li:last-child{padding-bottom:0}
  .rv2 .weg .knoten{position:absolute;z-index:1;left:0;top:0;margin:0}
  .rv2 .weg .ico svg{width:24px;height:24px}
  .rv2 .weg h3{padding-top:var(--s2)}
  /* Mobil: vertikaler Zeitstrahl — Linie von Kreismitte zu Kreismitte */
  .rv2 .weg .knoten::after{display:none!important}
  .rv2 .weg>li:not(:last-child)::after{content:"";position:absolute;z-index:0;left:calc(var(--ico) / 2 - 1px);width:2px;top:calc(var(--ico) / 2);bottom:calc(var(--ico) / -2);background:linear-gradient(#0472C7,#9CC8F5)}
}

/* ---------- 7 · Icon-Liste mit Hairlines (statt Kartengitter) ---------- */
.rv2 .ilist{list-style:none;margin:clamp(var(--s3),3vw,var(--s6)) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(var(--s4),4vw,var(--s8));border-top:1px solid var(--divider)}
.rv2 .ilist.eins{grid-template-columns:1fr}
.rv2 .ilist>li{display:grid;grid-template-columns:52px 1fr;gap:var(--s2) var(--s3);align-items:start;padding:var(--s3) 0;border-bottom:1px solid var(--divider);margin:0}
.rv2 .ilist .ic{width:52px;height:52px;border-radius:50%;background:#EDF3FA;color:#0472C7;display:flex;align-items:center;justify-content:center}
.rv2 .ilist .ic svg{width:24px;height:24px}
.rv2 .ilist strong{display:block;font-family:"Manrope",sans-serif;font-weight:800;color:var(--navy);font-size:18.5px;line-height:1.3;margin:4px 0 6px;letter-spacing:-.015em}
.rv2 .ilist p{margin:0;font-size:17px;line-height:1.62;color:#333333}
.rv2 .ilist a{color:var(--azur);font-weight:700}
@media(max-width:760px){
  .rv2 .ilist{grid-template-columns:1fr}
  .rv2 .ilist>li{grid-template-columns:44px 1fr;gap:var(--s2);padding:var(--s3) 0}
  .rv2 .ilist .ic{width:44px;height:44px}
  .rv2 .ilist .ic svg{width:21px;height:21px}
}

/* ---------- 8 · Netzwerk-Grafik ----------
   Mitte oben: Rohner-Bildmarke; darunter Verteiler-Linie, 3 Äste à 2 Fachleute.
   Mobil: ruhige Icon-Liste (Linien und Mitte ausgeblendet). */
.rv2 .netz{margin:clamp(var(--s4),4vw,var(--s6)) 0 0}
.rv2 .netz-mitte{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 auto;position:relative;padding-bottom:36px}
.rv2 .netz-mitte .hub{width:92px;height:92px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px #D6E6F7,0 0 0 10px #EDF3FA,0 24px 44px -24px rgba(22,43,80,.5)}
.rv2 .netz-mitte .hub img{width:48px;height:48px}
.rv2 .netz-mitte b{font-family:"Manrope",sans-serif;color:var(--navy);font-size:17px;font-weight:800}
.rv2 .netz-mitte::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:28px;background:#0472C7;transform:translateX(-50%)}
.rv2 .netz ul{--g:clamp(26px,3.4vw,48px);list-style:none;margin:0;padding:34px 0 0;position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;grid-auto-flow:column;column-gap:var(--g);row-gap:0}
/* Verteiler: von Ast 1 bis Ast 3 (Icon-Mitte = 24 px) */
.rv2 .netz ul::before{content:"";position:absolute;top:0;left:24px;right:calc((100% - 2 * var(--g)) / 3 - 24px);height:2px;background:#0472C7;border-radius:2px}
.rv2 .netz li{position:relative;margin:0;padding:0 0 var(--s4) 66px;min-width:0}
.rv2 .netz li::before{content:"";position:absolute;left:23px;width:2px;background:#9CC8F5}
.rv2 .netz li:nth-child(odd)::before{top:-34px;bottom:0}
.rv2 .netz li:nth-child(even)::before{top:0;height:24px}
.rv2 .netz .ic{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:#fff;color:#0472C7;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px #CFE2F5,0 10px 22px -16px rgba(22,43,80,.5);z-index:1}
.rv2 .netz .ic svg{width:22px;height:22px}
.rv2 .netz strong{display:block;font-family:"Manrope",sans-serif;font-weight:800;color:var(--navy);font-size:18px;line-height:1.3;margin:10px 0 6px;letter-spacing:-.015em}
.rv2 .netz p{margin:0;font-size:16.5px;line-height:1.6;color:#333333}
.rv2 .netz a{color:var(--azur);font-weight:700}
@media(max-width:900px){
  .rv2 .netz-mitte{display:none}
  .rv2 .netz ul{grid-template-columns:1fr;grid-auto-flow:row;padding:0;border-top:1px solid var(--divider)}
  .rv2 .netz ul::before,.rv2 .netz li::before{display:none}
  .rv2 .netz li{padding:var(--s3) 0 var(--s3) 62px;border-bottom:1px solid var(--divider)}
  .rv2 .netz .ic{top:var(--s3);width:44px;height:44px}
  .rv2 .netz strong{margin-top:8px}
}

/* ---------- 9 · Balken-Gegenüberstellung (Rechenbeispiel) ----------
   Balkenlänge proportional zum Betrag (Max = 20.000 € = 100 %). Visuell aria-hidden,
   Screenreader lesen die gleichwertige Tabelle (.sr-only). */
.rv2 .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rv2 .balken{margin:clamp(var(--s4),4vw,var(--s6)) 0 0;padding:clamp(var(--s3),3.4vw,40px);border-radius:22px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.rv2 .balken .bk-titel{font-family:"Manrope",sans-serif;font-weight:800;color:#fff;font-size:clamp(18px,1.8vw,21px);margin:0 0 var(--s3)}
.rv2 .balken .bk-hinweis{font-size:14.5px;color:#B4C3D6;margin:0 0 var(--s3);letter-spacing:.02em}
.rv2 .bk-zeile{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:var(--s1) var(--s3);align-items:center;padding:var(--s2) 0;border-top:1px solid rgba(255,255,255,.12)}
.rv2 .bk-label{font-size:16.5px;color:#E3EAF3;line-height:1.4}
.rv2 .bk-label b{display:block;font-family:"Manrope",sans-serif;color:#fff;font-size:17px}
.rv2 .bk-spur{position:relative;height:46px;display:flex;align-items:center}
/* Mindestbreite: der Betrag passt immer in den Balken (lesbar auch auf 320 px) */
.rv2 .bk-bar{position:relative;height:100%;width:max(var(--w),128px);display:flex;align-items:center;justify-content:flex-end;padding:0 14px;box-sizing:border-box}
/* Nur die Fläche wächst (::before), die Beschriftung wird nie gestaucht */
.rv2 .bk-bar::before{content:"";position:absolute;inset:0;border-radius:10px;transform-origin:left;transition:transform 1.1s var(--ease)}
.rv2 .bk-bar.senkung::before{background:linear-gradient(90deg,#6FA6DE,#9CC8F5)}
.rv2 .bk-bar.provision::before{background:linear-gradient(90deg,#0360A8,#0472C7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.rv2 .bk-betrag{position:relative;font-family:"Manrope",sans-serif;font-weight:800;font-size:clamp(18px,2vw,22px);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em;transition:opacity .5s var(--ease) .7s}
.rv2 .bk-bar.senkung .bk-betrag{color:#0E1C36}   /* Navy-Tief auf #6FA6DE: 6,61:1 · auf #9CC8F5: 9,69:1 */
.rv2 .balken.reveal .bk-bar::before{transform:scaleX(.04)}
.rv2 .balken.reveal .bk-betrag{opacity:0}
.rv2 .balken.reveal.in .bk-bar::before{transform:scaleX(1)}
.rv2 .balken.reveal.in .bk-betrag{opacity:1}
.rv2 .balken.reveal.in .bk-zeile:nth-child(2) .bk-bar::before{transition-delay:.12s}
.rv2 .balken.reveal.in .bk-zeile:nth-child(3) .bk-bar::before{transition-delay:.24s}
@media(max-width:640px){
  /* Beschriftung ÜBER dem Balken, volle Breite für die Spur */
  .rv2 .balken{padding:var(--s3) var(--s2)}
  .rv2 .bk-zeile{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .rv2 .bk-spur{height:44px}
}

/* ---------- 10 · Hero · Inhaltsverzeichnis · Medien · Buttons ---------- */

/* Hero-Rhythmus fest: Hero-Inhalt → 48 → Scrollmarke (32) → 64 → Fakten-Band.
   Desktop: Bild quadratisch, vertikal zur Textspalte zentriert — ein hochkant gestrecktes
   Querformat-Motiv verlor sonst die Hälfte des Bildinhalts (Render-Check 25.09.2026). */
.rv2 .phero{padding-bottom:0}
.rv2 .phero .cta-row{margin-top:var(--s4)}
.rv2 .phero .thread{margin-top:var(--s6);height:var(--s4)}
.rv2 .fakten{padding-top:var(--s8)}
.rv2 .heromedia img{border-radius:var(--radius-media);box-shadow:var(--media-shadow)}
@media(min-width:881px){
  .rv2 .phero .herowrap{align-items:center}
  .rv2 .heromedia{position:relative;aspect-ratio:1/1;min-height:0}
  .rv2 .heromedia img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}

/* Inhaltsverzeichnis: Zeilen ≥ 48 px, Divider #DCE4EC, Navy-Links (14,04:1),
   Hover/Fokus: 2-px-Unterstreichung in Markenblau + Pfeil */
.rv2 .toc{max-width:820px;margin:0 auto}
.rv2 .toc b{display:block;font-family:"Manrope",sans-serif;font-weight:800;color:var(--navy);font-size:17px;margin-bottom:var(--s1)}
.rv2 .toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s6);border-top:1px solid var(--divider)}
.rv2 .toc li{break-inside:avoid;border-bottom:1px solid var(--divider);margin:0}
.rv2 .toc a{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:12px 0;box-sizing:border-box;color:var(--navy);font-size:17px;font-weight:500;line-height:1.4;text-decoration:none}
.rv2 .toc a::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;opacity:0;transform:translateX(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230472C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center/16px 16px}
.rv2 .toc a:hover,.rv2 .toc a:focus-visible{color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:#0472C7;text-underline-offset:5px}
.rv2 .toc a:hover::after,.rv2 .toc a:focus-visible::after{opacity:1;transform:none}
@media(max-width:700px){.rv2 .toc ol{columns:1}}

/* Team-Foto (bricht auf Wide-Breite aus) */
.rv2 .teamfig{margin:clamp(var(--s4),4vw,var(--s6)) auto 0}
.rv2 .teamfig img{width:100%;height:auto;display:block;border-radius:var(--radius-media);box-shadow:var(--media-shadow)}
.rv2 .teamfig figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}              /* 6,31:1 */
.rv2 .teamfig figcaption a{color:#0472C7;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* 4,96:1 */

/* Detail-Anpassungen im Lesefluss */
.rv2 .prose p{font-size:18px}
.rv2 .fallkopf{font-size:15.5px;color:var(--muted)}
.rv2 .artmeta{color:var(--muted)}
.rv2 .erklaer p{font-size:17px}
.rv2 .anm{font-size:16px;color:var(--muted)}

/* Buttons: Markenblau #0472C7 fest (Entscheidung B, Carlo 25.09.2026) — Weiß 4,96:1,
   Hover/Fokus #035C9F (Weiß 6,92:1). Ghost-Buttons unverändert (Regel in rohner-h.css). */
.rv2 .btn{min-height:var(--control-h)}
.rv2 .btn:not(.btn-ghost):hover,.rv2 .btn:not(.btn-ghost):focus-visible{background:#035C9F}

/* ---------- reduced-motion: je Effekt abgeschaltet ---------- */
@media(prefers-reduced-motion:reduce){
  .rv2 .weg .knoten::after,.rv2 .weg.reveal .knoten::after{transform:none;transition:none}
  .rv2 .weg a.mehr svg{transition:none}
  .rv2 .toc a::after{transition:none}
  .rv2 .balken.reveal .bk-bar::before,.rv2 .bk-bar::before{transform:none;transition:none}
  .rv2 .balken.reveal .bk-betrag,.rv2 .bk-betrag{opacity:1;transition:none}
}
@media print{
  .rv2 .zone-navy{background:#fff;color:#333}
  .rv2 .zone-navy h2,.rv2 .zone-navy h3,.rv2 .zone-navy b,.rv2 .zone-navy strong{color:#162B50}
  .rv2 .zone-navy p,.rv2 .zone-navy li{color:#333}
  .rv2 .zone-navy::before{display:none}
}