/* AI Market Analytics · v2 · Chart-Rätsel in der Schule. Gehoert dem Chat CHART-RAETSEL.
   Farben nur ueber die Telegram-Variablen aus app.css: Kerzen, Treffer und Kursaenderung gruen/rot (Kurs und Richtung),
   Ziele und Punkte im Akzent, alles andere neutral. Klassen nur mit r- davor. */

/* ---- Karte oben in der Schule ---- */
.r-einstieg{background:var(--sec);margin:12px var(--rand) 4px;border-radius:var(--rund);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rahmen)}
.r-einstieg .zeile .mi{font-weight:600}
.r-einstieg .r-serie{display:flex;align-items:center}
.r-vorschau{display:block;width:100%;padding:0 14px 12px;line-height:0;transition:background var(--zeit)}
.r-vorschau:empty{display:none}
.r-vorschau:active{background:var(--druck)}
.r-flamme{display:flex;align-items:center;gap:3px}
.r-flamme b{font-size:16px;font-weight:600}
.r-neu{font-size:12.5px;color:var(--akzent)}
.r-plus{font-size:12.5px;margin-left:6px;color:var(--akzent)}
@supports (color:color-mix(in srgb,red,blue)){
  .r-neu,.r-plus{background:color-mix(in srgb,var(--akzent) 14%,transparent)}
  html[data-scheme="light"] .r-neu,html[data-scheme="light"] .r-plus{color:color-mix(in srgb,var(--akzent) 75%,#000)}
}
.ikon.r-mini{width:22px;height:22px;border-radius:7px;background:none}
.ikon.r-mini svg{width:19px;height:19px;stroke-width:2}

/* ---- Blatt ---- */
.r-kopf{padding:16px 20px 2px}
.r-kopf small{display:block;color:var(--hint);font-size:13px;font-weight:500}
.r-kopf h2{font-size:21px;font-weight:600;letter-spacing:-.018em;line-height:1.25;margin-top:2px}
.r-chartkarte{background:var(--sec);margin:12px var(--rand) 0;border-radius:var(--rund);box-shadow:inset 0 0 0 1px var(--rahmen);padding:8px 8px 4px;line-height:0;min-height:248px}
.r-chartkarte.r-lade{padding:12px}
.r-chartkarte.r-lade .lade{height:224px;border-radius:10px}
.r-chartkarte.r-lade+.liste{margin-top:12px}
.r-abstand{margin-top:12px}
.r-hinweise{margin-top:8px}
.r-hinweise .kachel b,.r-stat .kachel b{display:flex;align-items:center;gap:3px;min-height:27px;white-space:nowrap}
.r-hinweise .kachel b .pille{font-size:15px}

/* Antwort: drei gleiche Knoepfe, nur die Pfeile in Richtungsfarbe */
.r-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px var(--rand) 0}
.r-wahl button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px 11px;border-radius:14px;background:var(--sec);
  box-shadow:inset 0 0 0 1px var(--rahmen);font-size:15px;font-weight:600;transition:background var(--zeit)}
.r-wahl button:active{background:var(--druck)}
.r-wahl svg{width:24px;height:24px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.r-wahl .r-long svg{stroke:var(--long)}
.r-wahl .r-short svg{stroke:var(--short)}
.r-wahl .r-warten svg{stroke:var(--hint)}
.r-regel{padding-top:10px}

/* Ergebnis */
.r-ergebnis{margin-top:12px}
.r-ergebnis .ava{width:36px;height:36px;font-size:12px}
.r-ergebnis .ava.vier{font-size:10.5px}
.r-ergebnis .re .pille{font-size:14px}
.r-satz .mi{font-size:15px;font-weight:400;line-height:1.5}

/* ---- Chart ---- */
.r-chart{display:block;width:100%;height:auto;font-family:var(--font)}
.r-chart .k-auf{fill:var(--long);stroke:var(--long)}
.r-chart .k-ab{fill:var(--short);stroke:var(--short)}
.r-chart rect.k-auf,.r-chart rect.k-ab{stroke:none}
.r-chart .docht{stroke-width:1}
.r-chart .gitter{stroke:var(--trenn);stroke-width:1}
.r-chart .gitter.null{stroke:var(--hint);stroke-opacity:.5;stroke-dasharray:2 3}
.r-chart .achse{fill:var(--hint);font-size:10px}
.r-chart .jetzt-t{fill:var(--text);font-weight:600}
.r-chart .zukunft{fill:var(--ton)}
.r-chart .jetzt{stroke:var(--hint);stroke-width:1;stroke-dasharray:3 3}
.r-chart .ziel{stroke:var(--akzent);stroke-width:1;stroke-dasharray:4 3;stroke-opacity:.8}
.r-chart .zieltext{fill:var(--akzent);font-size:11px;font-weight:600}
/* hell: Ziel-Text und Ziel-Linie auf der grauen Zukunftsflaeche dunkler (sonst unter 4,5 : 1) */
@supports (color:color-mix(in srgb,red,blue)){
  html[data-scheme="light"] .r-chart .zieltext{fill:color-mix(in srgb,var(--akzent) 75%,#000)}
  html[data-scheme="light"] .r-chart .ziel{stroke:color-mix(in srgb,var(--akzent) 75%,#000);stroke-opacity:1}
}
.r-chart .vol{fill:var(--hint);fill-opacity:.28}
.r-chart .frage{fill:var(--hint);font-size:30px;font-weight:600}
.r-chart .frage.klein{font-size:18px}
.r-chart .treffer{stroke:var(--sec);stroke-width:2}