/* Blutwerte im Verlauf und „Befunde vergleichen“ (Fabio 08.11.2026), gezeichnet von blutwerte-verlauf.js.
   Maße und Farben aus dem Prototyp Blutwerte_Verlauf_Prototyp.html (Ansicht beim Laden: Haarlinie,
   weiche Zonen, Leiste als Haarlinie, kleiner Verlauf A1, Kopf 2a). Lädt nach healthhub.css und nutzt
   dessen Tokens (--bw-*); neu sind Blaugrau für „im Bereich“ und die Zonenfarbe --zn-blau.
   Dunkelmodus über dieselben Selektoren wie app.css. Keine fremden Schriften, kein CDN. */
:root {
  --bw-blau:#5B6B8C; --bw-blau-t:#46557A; --bw-blau-100:#E9EDF5; --zn-blau:#AEB8CF;
  --bv-gl-gruen:#5FC56A; --bv-gl-gelb:#F5B54E; --bv-gl-rot:#FF5A5F; --bv-gl-blau:#8C9BC0;
}
html[data-theme="dark"] { --bw-blau:#9AA8C8; --bw-blau-t:#B9C4DE; --bw-blau-100:rgba(154,168,200,.16); --zn-blau:#56618A; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --bw-blau:#9AA8C8; --bw-blau-t:#B9C4DE; --bw-blau-100:rgba(154,168,200,.16); --zn-blau:#56618A; }
}
.bw--blau { color:var(--bw-blau); } .bw--blau .bv-name > span, .bw--blau .bw-pille { color:var(--bw-blau-t); } .bw--blau .bw-pille { background:var(--bw-blau-100); }
.bw-dpille--blau { color:#46557A; }
.bw--gruen { --gl:var(--bv-gl-gruen); } .bw--gelb { --gl:var(--bv-gl-gelb); } .bw--rot { --gl:var(--bv-gl-rot); } .bw--blau { --gl:var(--bv-gl-blau); }
.bw--grau { --gl:var(--bw-grau); }
.bv-t-gruen { color:var(--bw-gruen-t); } .bv-t-gelb { color:var(--bw-gelb-t); } .bv-t-rot { color:var(--bw-rot-t); } .bv-t-blau { color:var(--bw-blau-t); } .bv-t-grau { color:var(--muted); }

/* ---- Wertzeile ---- */
.bw.bv-w { display:block; padding:13px 0 12px; border-top:1px solid var(--line-2); cursor:pointer; -webkit-hyphens:auto; hyphens:auto; }
.bv-gruppe + .bw.bv-w, .bv-gruppe + .bv-leer, .bw-unter + .bw-liste > .bw.bv-w:first-child { border-top:0; }
.bw-karte:not(.bw-karte--fokus) .bw-liste > .bw.bv-w:first-child { border-top:0; }
.bv-kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.bv-name { min-width:0; flex:1; }
.bv-name b { display:block; font-size:15px; font-weight:800; color:var(--navy); line-height:1.25; overflow-wrap:break-word; }
.bv-name > span { display:block; font-size:13.5px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; }
.bv-dl { font-weight:700; color:var(--muted); font-size:12.5px; margin-left:6px; white-space:nowrap; }
.bv-w .bw-pille { flex:none; -webkit-hyphens:none; hyphens:none; white-space:nowrap; }
.bv-pille--klein { font-size:11px; padding:4px 8px; min-width:0; }
.bv-spark { flex:none; width:58px; height:26px; margin-top:4px; overflow:visible; }
.bv-spark-opt { fill:var(--bw-opt); fill-opacity:.18; }
.bv-spark-l { fill:none; stroke:var(--muted-2); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.bv-spark-p { fill:var(--muted-2); }
.bv-f-gruen { fill:var(--bw-gruen); background:var(--bw-gruen); } .bv-f-gelb { fill:var(--bw-gelb); background:var(--bw-gelb); }
.bv-f-rot { fill:var(--bw-rot); background:var(--bw-rot); } .bv-f-blau { fill:var(--bw-blau); background:var(--bw-blau); } .bv-f-grau { fill:var(--bw-grau); background:var(--bw-grau); }
.bv-eins { flex:none; font-size:11.5px; font-weight:700; color:var(--muted-2); margin-top:8px; white-space:nowrap; }
.bv-ohne { font-size:12px; font-weight:700; color:var(--muted-2); margin-top:6px; }
.bv-leer { padding:11px 0; border-top:1px solid var(--line-2); font-size:13px; font-weight:700; color:var(--muted-2); }
.bv-leer b { color:var(--muted); font-weight:800; }
.bv-leer--ohne { border-top:0; }
.bv-gruppe { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); margin:18px 0 0; padding-bottom:4px; }
.bv-gruppe:first-child { margin-top:4px; }

/* ---- Spur: Haarlinie in Zonen, Leuchtpunkt ---- */
.bv-spur { position:relative; height:4px; border-radius:2px; margin:16px 0 0; }
.bv-spur > i { position:absolute; top:0; bottom:0; border-radius:2px; }
.bv-spur .bv-zn { left:0; right:0; }
.bv-spur .bv-mark { top:-5px; bottom:auto; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--gl, currentColor);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gl, currentColor) 28%, transparent), 0 0 14px 3px color-mix(in srgb, var(--gl, currentColor) 75%, transparent); }
.bv-mark.bv-pfeil-r::after, .bv-mark.bv-pfeil-l::after { content:""; position:absolute; top:50%; margin-top:-5px; border:5px solid transparent; }
.bv-mark.bv-pfeil-r::after { left:15px; border-left:7px solid var(--gl, currentColor); }
.bv-mark.bv-pfeil-l::after { right:15px; border-right:7px solid var(--gl, currentColor); }
.bv-spur--gross { height:6px; border-radius:3px; margin:30px 0 0; }
.bv-spur--gross > i { border-radius:3px; }
.bv-spur--gross .bv-mark { top:-7px; width:20px; height:20px; margin-left:-10px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gl, currentColor) 28%, transparent), 0 0 20px 5px color-mix(in srgb, var(--gl, currentColor) 75%, transparent); }
.bv-spur .bv-wert { position:absolute; top:-32px; transform:translateX(-50%); font-size:13px; font-weight:900; white-space:nowrap; }
.bw--gruen .bv-wert { color:var(--bw-gruen-t); } .bw--gelb .bv-wert { color:var(--bw-gelb-t); } .bw--rot .bv-wert { color:var(--bw-rot-t); } .bw--blau .bv-wert { color:var(--bw-blau-t); }
.bv-skala { position:relative; height:30px; margin-top:6px; font-size:11.5px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; }
.bv-skala span { position:absolute; transform:translateX(-50%); white-space:nowrap; padding-top:6px; }
.bv-skala span::before { content:""; position:absolute; left:50%; top:0; height:5px; border-left:1.5px solid var(--muted-2); }
.bv-skala span.o { color:var(--bw-gruen-t); } .bv-skala span.o::before { border-color:var(--bw-gruen); }
.bv-leg { display:flex; gap:6px 12px; flex-wrap:wrap; margin-top:9px; font-size:11.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; -webkit-hyphens:none; hyphens:none; }
.bv-leg span { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.bv-lg { width:14px; height:3px; border-radius:2px; flex:none; display:inline-block; background:var(--bw-ref); }
.bv-lg.o { background:var(--bw-opt); } .bv-lg.a { background:var(--bw-gelb); } .bv-lg.b { background:var(--bw-opt); }
/* Nachtest 10.11. (Prototyp .lg.k): Referenz in der Legende grau statt gelb. */
.bv-lg.k { background:currentColor; opacity:.45; }
.bw-legende .bw-lg { height:3px; width:14px; border-radius:2px; }

/* ---- Leiste gut / ausbaufähig / auffällig: Haarlinie, Leuchtpunkt am Ende des grünen Teils ---- */
.bv-vt { display:flex; align-items:center; gap:3px; height:10px; margin:16px 0 8px; position:relative; }
.bv-vt .g { --c:var(--bw-opt); } .bv-vt .a { --c:var(--bw-gelb); } .bv-vt .r { --c:var(--bw-rot); }
.bv-vt i { height:3px; border-radius:2px; background:var(--c); }
.bv-vt i.g { position:relative; height:4px; }
.bv-vt i.g::after { content:""; position:absolute; right:-4px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 0 12px 2px var(--c); }

/* ---- Alle Werte: Abschnitt und Filter ---- */
.bv-abschnitt { display:flex; justify-content:space-between; align-items:end; margin:18px 2px 8px; }
.bv-label { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.bv-chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px; }
.bv-chips::-webkit-scrollbar { display:none; }
.bv-chip { flex:none; min-height:40px; border:1px solid var(--line); background:var(--card); color:var(--navy); border-radius:18px; padding:0 14px;
  font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; white-space:nowrap; }
.bv-chip em { font-style:normal; color:var(--muted); font-weight:700; margin-left:4px; }
/* 0m J49: aktiv helle Fläche mit dunkler Schrift (im Dunkelmodus), hell dunkle Fläche mit heller Schrift. */
.bv-chip.an { background:var(--navy); color:var(--card); border-color:var(--navy); }
.bv-chip.an em { color:inherit; opacity:.75; }
.bv-chip:focus-visible, .bv-dchip:focus-visible, .bv-zr button:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.bv-liste-karte { padding-top:12px; }

/* ---- Karte „Befunde vergleichen“ ---- */
.bv-einstieg { display:flex; gap:12px; align-items:center; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; border:1.5px solid var(--navy); padding:16px 18px; }
.bv-kreis { flex:none; width:42px; height:42px; border-radius:14px; background:var(--navy); color:var(--card); display:grid; place-items:center; }
.bv-kreis .hji { width:20px; height:20px; --ic-acc:currentColor; }
.bv-einstieg__tx { flex:1; min-width:0; }
.bv-einstieg b { display:block; font-size:15.5px; font-weight:900; color:var(--navy); }
.bv-einstieg small { display:block; font-size:13px; color:var(--muted); font-weight:600; line-height:1.4; margin-top:2px; }
.bv-neu { display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--bw-kicker); margin-left:6px; vertical-align:2px; }
.bv-chev { margin-left:auto; color:var(--muted-2); display:grid; place-items:center; flex:none; }
.bv-chev .hji { width:18px; height:18px; }

/* ---- Schmale Zeilen am Seitenende (0m J50) ---- */
.bv-schmal { display:flex; gap:10px; align-items:center; width:100%; margin-top:12px; min-height:48px; background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:12px 14px; font:inherit; font-size:14px; font-weight:800; color:var(--navy); text-align:left; cursor:pointer; }
.bv-schmal > .hji { width:20px; height:20px; flex:none; }
.bv-schmal[aria-expanded="true"] .bv-chev { transform:rotate(90deg); }
[data-hj="befunde-alle"][hidden] { display:none; }

/* ---- Detailseite: Dein Wert, Verlauf ---- */
.bv-dein { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:4px; }
.bv-dein--klein { margin:12px 0 2px; }
.bv-vdelta { font-size:14px; font-weight:700; margin:2px 0 10px; }
.bv-vdelta b { font-weight:900; } .bv-vdelta span { color:var(--muted); }
.bv-zr { display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap; }
.bv-zr button { min-height:36px; border:1px solid var(--line); background:var(--card); color:var(--muted); font:inherit; font-size:12.5px; font-weight:800; padding:0 12px; border-radius:15px; cursor:pointer; }
.bv-zr button.an { background:var(--navy); border-color:var(--navy); color:var(--card); }
.bv-vsvg { display:block; width:100%; height:auto; overflow:visible; }
.bv-band-ref { fill:var(--bw-ref); }
.bv-band-opt { fill:var(--bw-opt); fill-opacity:.32; }
.bv-vlinie { fill:none; stroke:var(--muted-2); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.bv-vpkt { fill:var(--card); cursor:pointer; }
.bv-vpkt:focus-visible { outline:none; stroke-width:6; }
.bv-s-gruen { stroke:var(--bw-gruen); } .bv-s-gelb { stroke:var(--bw-gelb); } .bv-s-rot { stroke:var(--bw-rot); } .bv-s-blau { stroke:var(--bw-blau); } .bv-s-grau { stroke:var(--bw-grau); }
.bv-vgr { font-size:10.5px; font-weight:800; fill:var(--muted); font-family:inherit; }
.bv-vgr.o { fill:var(--bw-gruen-t); }
.bv-vax { font-size:10.5px; font-weight:700; fill:var(--muted-2); font-family:inherit; }
.bv-vlw { stroke:var(--muted-2); stroke-width:1.2; stroke-dasharray:3 3; }
.bv-vlwt { font-size:9.5px; font-weight:800; fill:var(--muted-2); font-family:inherit; }
.bv-vinfo { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:13px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.bv-vinfo b { font-weight:900; font-size:14px; }
.bv-vpunkt { width:10px; height:10px; border-radius:50%; flex:none; }
.bv-vhinweis { margin:10px 0 2px; font-size:13px !important; line-height:1.45; font-weight:600; color:var(--muted) !important; }
.bv-messungen { margin-top:14px; border-top:1px solid var(--line-2); }
.bv-messung { display:flex; align-items:center; gap:10px; width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--line-2); background:none; font:inherit;
  font-size:13.5px; font-variant-numeric:tabular-nums; cursor:pointer; text-align:left; color:inherit; }
.bv-messung:last-child { border-bottom:0; }
.bv-md { flex:1; min-width:0; color:var(--ink); font-weight:700; }
.bv-md small { display:block; color:var(--muted-2); font-weight:700; font-size:12px; }
.bv-mv { font-weight:900; }
.bv-messung.an { background:var(--line-2); margin:0 -10px; padding:10px; border-radius:12px; width:calc(100% + 20px); }
.bv-lw-zeile { font-size:11.5px; font-weight:800; color:var(--muted-2); padding:6px 0; border-bottom:1px dashed var(--line); }

/* ---- Befunde vergleichen: Kopf (Modul-Kopf, Themenfarbe Blutwerte) ---- */
[data-mk-farbe="blut"] { --mk-dunkel:#5E1233; --mk-hell:#C2394E; }
.hj-kopf.bv-vkopf { --kopf-grad:radial-gradient(80% 60% at 100% 0%, rgba(194,57,78,.6), transparent 65%), radial-gradient(70% 60% at 0% 100%, rgba(255,130,150,.16), transparent 60%),
    linear-gradient(165deg, #3A0A20, #5E1233 55%, #7E1C3A);
  --tab-on:#fff; --tab-on-ink:#7E1C3A; }
.bv-vkopf .hj-kopf__reiter [role="tab"] { color:#F5C7D1; }
.bv-vkopf .hj-kopf__reiter [role="tab"][aria-selected="true"] { color:#7E1C3A; }
/* 0o B3 (Fabio 09.11., iPhone): die Reiter waren leere weiße Pillen. Die Reiter der Module blenden ihr Wort
   beim Einfahren aus (module.css, --kr) und setzen es unter 420 px als -webkit-box mit Zeilenklammer
   (v1-extra.css); in der Flex-Pille ohne Symbol fiel es dabei auf null Breite. Hier gibt es kein Symbol,
   das Wort steht immer und ganz, wie im Prototyp (.zk-reiter). */
.hj-kopf.bv-vkopf .hj-kopf__reiter .hj-r__wort { display:inline; max-width:none; opacity:1; overflow:visible;
  white-space:nowrap; text-overflow:clip; -webkit-line-clamp:unset; }
.bv-held-kicker { margin-top:8px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#F5C7D1; }
.bv-held-zeile { display:flex; align-items:center; gap:12px; margin-top:6px; }
.bv-held-gross { font-size:64px; font-weight:900; letter-spacing:-2px; line-height:1; color:#C9F7C6; text-shadow:0 0 24px rgba(139,234,143,.45); font-variant-numeric:tabular-nums; }
.bv-held-gross em { font-style:normal; font-size:28px; margin-left:2px; letter-spacing:0; }
.bv-held-text { font-size:14px; font-weight:700; line-height:1.4; color:#FBE4E9; }
.bv-held-text b { color:#C9F7C6; font-weight:900; }
.bv-zh-gut { display:grid; gap:8px; margin-top:14px; }
.bv-zh-r { display:grid; grid-template-columns:44px minmax(0,1fr) 46px; align-items:center; gap:8px; }
.bv-zh-r small { font-size:11.5px; font-weight:800; color:#F5C7D1; }
.bv-zh-r em { font-style:normal; font-size:12px; font-weight:900; text-align:right; color:#F5C7D1; white-space:nowrap; }
.bv-zh-r .bv-vt { margin:0; }
.bv-zh-r:not(.jetzt) .bv-vt { opacity:.55; }
.bv-zh-r.jetzt small, .bv-zh-r.jetzt em { color:#fff; }
.bv-zh-knoepfe { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px; }
.bv-zh-k { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#FBE4E9; border-radius:16px; padding:8px 4px 7px; cursor:pointer;
  display:grid; justify-items:center; gap:1px; font-family:inherit; }
.bv-zh-k b { font-size:22px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; }
.bv-zh-k span { font-size:11.5px; font-weight:800; opacity:.85; }
.bv-zh-k.up b, .bv-zm-k.up b { color:#C9F7C6; text-shadow:0 0 14px rgba(139,234,143,.5); } .bv-zh-k.down b, .bv-zm-k.down b { color:#FFB3B3; }
.bv-zh-k.an, .bv-zm-k.an { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); }
.bv-zh-k:focus-visible, .bv-zm-k:focus-visible, .bv-zk-zurueck:focus-visible { outline:2px solid #fff; outline-offset:2px; }
/* Mini-Zeile: erscheint im letzten Viertel des Einfahrens (--kr von 1 nach 0), mit Zurück. */
.bv-zk-mini { display:flex; align-items:center; gap:6px; overflow:hidden; max-height:calc((1 - var(--kr, 1)) * 40px); opacity:calc(1 - var(--kr, 1));
  margin-top:calc((1 - var(--kr, 1)) * 8px); }
.bv-zk-mini > b { font-size:13px; font-weight:900; white-space:nowrap; margin-right:auto; }
/* 0o B3: „Jan. 25 → Nov. 26“ wurde neben drei Knöpfen abgeschnitten. Beide Daten stehen jetzt ganz; reicht
   die Breite nicht, rutschen die Knöpfe in eine zweite Zeile (Kurzform Monat Jahr wie im Prototyp). */
.bv-zk-mini { flex-wrap:wrap; row-gap:6px; max-height:calc((1 - var(--kr, 1)) * 76px); }
.bv-zk-zurueck { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff;
  display:grid; place-items:center; cursor:pointer; padding:0; }
.bv-zk-zurueck .hji { width:18px; height:18px; }
.bv-zm-k { flex:none; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1); color:#FBE4E9; border-radius:12px; padding:4px 8px; font:inherit;
  font-size:11.5px; font-weight:800; cursor:pointer; white-space:nowrap; }
.bv-zm-k b { font-size:13.5px; font-weight:900; }
.bv-inhalt { display:flex; flex-direction:column; gap:12px; --navy-blut:#8A1F3D; }
.bv-inhalt > .bw-karte { margin-top:0; }
/* Themenfarbe Blutwerte für Auswahl im Vergleich (Chips aktiv Bordeaux), im Dunkelmodus Rosa mit dunkler Schrift. */
.bv-inhalt .bv-chip.an, .bv-inhalt .bv-dchip.an, .bv-inhalt .bv-zr button.an { background:#8A1F3D; border-color:#8A1F3D; color:#fff; }
html[data-theme="dark"] .bv-inhalt .bv-chip.an, html[data-theme="dark"] .bv-inhalt .bv-dchip.an, html[data-theme="dark"] .bv-inhalt .bv-zr button.an { background:#F08AA0; border-color:#F08AA0; color:#2A0714; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bv-inhalt .bv-chip.an, html:not([data-theme="light"]) .bv-inhalt .bv-dchip.an,
  html:not([data-theme="light"]) .bv-inhalt .bv-zr button.an { background:#F08AA0; border-color:#F08AA0; color:#2A0714; }
}

/* ---- Zwei Befunde: Wahl und Zeilen ---- */
.bv-wahl { display:grid; gap:10px; }
.bv-wahl-reihe { display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:8px; }
.bv-wahl-reihe .bv-label { letter-spacing:.06em; }
.bv-dchips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.bv-dchip { border:1.5px solid var(--line); background:var(--card); color:var(--navy); border-radius:14px; padding:8px 0 7px; font:inherit; font-size:13px; font-weight:800;
  cursor:pointer; text-align:center; line-height:1.15; min-height:44px; }
.bv-dchip small { display:block; font-size:10.5px; font-weight:700; color:var(--muted-2); margin-top:2px; }
.bv-dchip.an small { color:inherit; opacity:.75; }
.bv-dchip:disabled { opacity:.35; cursor:default; }
.bv-pz-l2 { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:4px; }
.bv-pz-wert { font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bw--gruen .bv-pz-wert { color:var(--bw-gruen-t); } .bw--gelb .bv-pz-wert { color:var(--bw-gelb-t); } .bw--rot .bv-pz-wert { color:var(--bw-rot-t); } .bw--blau .bv-pz-wert { color:var(--bw-blau-t); }
.bv-pz-dl { font-size:12.5px; font-weight:900; margin-left:8px; white-space:nowrap; color:var(--muted); }
.bv-pz-dl.up { color:var(--bw-gruen-t); } .bv-pz-dl.down { color:var(--bw-rot-t); }
.bv-spur.bv-pz { margin:32px 0 22px; }
.bv-spur.bv-pz .bv-pf { top:1px; bottom:1px; border-radius:3px; background:currentColor; z-index:1; }
.bv-pf.up { color:var(--bw-gruen); } .bv-pf.down { color:var(--bw-rot); } .bv-pf.gleich { color:var(--muted-2); }
.bv-spur.bv-pz .bv-pf::after { content:""; position:absolute; top:-4px; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.bv-spur.bv-pz .bv-pf.r::after { right:-5px; border-left:7px solid currentColor; }
.bv-spur.bv-pz .bv-pf.l::after { left:-5px; border-right:7px solid currentColor; }
.bv-spur .bv-geist { top:-4px; bottom:auto; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--card); border:2px dashed currentColor; z-index:2; box-sizing:border-box; }
.bv-spur.bv-pz .bv-mark { z-index:3; }
.bv-spur .bv-wl { position:absolute; white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1; }
.bv-spur .bv-wl.neu { top:-28px; font-size:13px; font-weight:900; }
.bw--gruen .bv-wl.neu { color:var(--bw-gruen-t); } .bw--gelb .bv-wl.neu { color:var(--bw-gelb-t); } .bw--rot .bv-wl.neu { color:var(--bw-rot-t); } .bw--blau .bv-wl.neu { color:var(--bw-blau-t); }
.bv-spur .bv-wl.alt { top:14px; font-size:11px; font-weight:700; color:var(--muted); }
.bv-hinweis { display:flex; gap:8px; align-items:flex-start; color:var(--muted-2); font-size:11.5px; font-weight:600; line-height:1.45; padding:4px 6px 0; }
.bv-hinweis .hji { flex:none; width:14px; height:14px; margin-top:1px; }

/* ---- Alle Befunde: Kreise je Bereich (2a, immer dunkel), kleiner Verlauf (A1) ---- */
.bv-held { border-radius:28px; color:#fff; padding:14px 16px 16px; overflow:hidden; position:relative;
  background:radial-gradient(80% 60% at 100% 0%, rgba(194,57,78,.6), transparent 65%), radial-gradient(70% 60% at 0% 100%, rgba(255,130,150,.16), transparent 60%),
    linear-gradient(165deg, #3A0A20, #5E1233 55%, #7E1C3A);
  box-shadow:0 18px 40px rgba(94,18,51,.3);
  --bs-name:#fff; --bs-kopf:rgba(255,255,255,.6); --bs-linie:rgba(255,255,255,.14); --bs-leer:rgba(255,255,255,.45); --bs-lw:rgba(255,255,255,.35); }
.bv-bs { display:flex; flex-direction:column; overflow-x:auto; scrollbar-width:none; }
.bv-bs::-webkit-scrollbar { display:none; }
.bv-bs-z { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--bs-linie); }
.bv-bs-z b { font-size:14px; font-weight:800; color:var(--bs-name); line-height:1.3; }
.bv-bs-kopf { border-top:0; padding:0 0 4px; }
.bv-bs-r { display:flex; align-self:stretch; }
.bv-bs-r > span { width:44px; display:flex; justify-content:center; align-items:center; position:relative; }
.bv-bs-r > span.lw::before { content:""; position:absolute; left:0; top:-8px; bottom:-8px; border-left:1.5px dashed var(--bs-lw); }
.bv-bs-kopf .bv-bs-r > span.lw::before { top:2px; bottom:-4px; }
.bv-bs-kopf em { font-style:normal; font-size:10.5px; font-weight:800; color:var(--bs-kopf); white-space:nowrap; }
.bv-bs-kopf em.jetzt { color:#C9F7C6; font-weight:900; }
.bv-bs-p { width:16px; height:16px; border-radius:8px; display:block; box-sizing:border-box; }
.bv-bs-p.g { background:#6FCE78; } .bv-bs-p.a { background:#F5B54E; } .bv-bs-p.r { background:#FF6B6B; }
.bv-bs-p.nm { border:1.5px dashed var(--bs-leer); }
.bv-bs-r > span.neu .bv-bs-p:not(.nm) { width:20px; height:20px; border-radius:10px; }
.bv-bs-r > span.neu .bv-bs-p.g { box-shadow:0 0 0 3px rgba(111,206,120,.25), 0 0 16px 3px rgba(111,206,120,.9); }
.bv-bs-r > span.neu .bv-bs-p.a { box-shadow:0 0 0 3px rgba(245,181,78,.22), 0 0 12px 2px rgba(245,181,78,.65); }
.bv-bs-r > span.neu .bv-bs-p.r { box-shadow:0 0 0 3px rgba(255,107,107,.25), 0 0 16px 3px rgba(255,107,107,.85); }
.bv-bs-leg { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:10px; font-size:11.5px; font-weight:700; color:#F5C7D1; }
.bv-bs-leg span { display:flex; align-items:center; gap:5px; }
.bv-bs-leg .bv-bs-p { width:11px; height:11px; }
.bv-bs-leg i.lw { width:0; height:12px; border-left:1.5px dashed var(--bs-lw); }
.bv-mini { display:block; width:100%; height:auto; margin-top:10px; overflow:visible; }
.bv-mn-zonen { opacity:.72; }
.bv-mn-kante { stroke:#fff; stroke-opacity:.55; stroke-width:.8; }
.bv-mn-linie { fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.bv-mn-rand { fill:none; stroke:#fff; stroke-opacity:.7; stroke-width:1; }
.bv-mn-leer { fill:none; stroke:var(--muted-2); stroke-width:1.3; stroke-dasharray:2 2; }
.bv-kp-glow { opacity:.42; } .bv-kp-ring { opacity:.24; }
.bv-mini .bv-vlw { stroke:#fff; stroke-opacity:.6; }
.bv-mini .bv-vgr { font-size:10.5px; font-weight:800; fill:var(--muted); font-family:inherit; }
.bv-mini .bv-vgr-in { fill:#fff; fill-opacity:.85; paint-order:stroke; stroke:rgba(10,12,40,.55); stroke-width:3px; }
.bv-vwz { font-size:10px; font-weight:900; font-family:inherit; font-variant-numeric:tabular-nums; opacity:.75; }
.bv-vwz.jetzt { font-size:12px; opacity:1; }
.bv-vwz.leer { fill:var(--muted-2); }
/* 0o B2: Verlauf der Detailseite im Design des kleinen Verlaufs (Prototyp .vgross). Die Punkte sind
   durchsichtige Trefferflächen über den gezeichneten Punkten, nur sie nehmen Klicks an. */
.bv-mini--gross { margin-top:4px; }
.bv-mini--gross .bv-vwz { font-size:11.5px; } .bv-mini--gross .bv-vwz.jetzt { font-size:13.5px; }
.bv-mini--gross circle:not(.bv-vpkt), .bv-mini--gross path, .bv-mini--gross rect { pointer-events:none; }
.bv-mini--gross .bv-vpkt { fill:transparent; stroke:none; cursor:pointer; outline:none; }
.bv-mini--gross .bv-vpkt:focus-visible { stroke:var(--navy, #10155F); stroke-width:2; }
.bv-mini--gross .bv-vax.jetzt { fill:var(--navy, #10155F); font-weight:900; }
.bv-vwz.bv-t-gruen { fill:var(--bw-gruen-t); } .bv-vwz.bv-t-gelb { fill:var(--bw-gelb-t); } .bv-vwz.bv-t-rot { fill:var(--bw-rot-t); } .bv-vwz.bv-t-blau { fill:var(--bw-blau-t); }
html[data-theme="dark"] .bv-mn-rand { stroke-opacity:.14; } html[data-theme="dark"] .bv-mn-glas { opacity:.35; } html[data-theme="dark"] .bv-mn-kante { stroke-opacity:.2; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bv-mn-rand { stroke-opacity:.14; }
  html:not([data-theme="light"]) .bv-mn-glas { opacity:.35; }
  html:not([data-theme="light"]) .bv-mn-kante { stroke-opacity:.2; }
}
.bv-zr--held { margin:0; }

@media (prefers-reduced-motion: reduce) { .bv-schmal .bv-chev { transition:none; } }