/* AI Market Analytics · v2 · Ansicht SCHULE (Trading School). Gehoert dem Chat SCHULE (Design-Runde 19.10.: CHEF 3).
   Farben nur ueber die Telegram-Variablen aus app.css. Die Lern-Inhalte der alten App (Spickzettel-Stile in
   schule.css, Bilder viz() in schule_inhalt.js) benutzen alte Variablen, die hier auf Telegram umgelegt werden.
   Diagramm-Flaechen der Spickzettel bleiben dunkel (--dunkel), weil diese Bilder helle Schrift haben. */

/* ---- Alte Variablen auf Telegram umlegen ---- */
.schule{
  --card:var(--sec); --card2:var(--bg); --line:var(--trenn); --line2:var(--hint);
  --ink:var(--text); --dim:var(--text); --faint:var(--hint); --mono:var(--font);
  --green:var(--long); --red:var(--short); --amber:var(--warn);
  --blue:var(--akzent); --blue2:var(--akzent);
  --blueSoft:var(--sec); --greenSoft:var(--sec); --redSoft:var(--sec);
}
.blatt{
  --card:var(--sec); --card2:var(--bg); --line:var(--trenn); --line2:var(--trenn);
  --ink:var(--text); --dim:var(--text); --faint:var(--hint); --mono:var(--font);
  --green:var(--long); --red:var(--short); --amber:var(--warn);
  --blue:var(--akzent); --blue2:var(--akzent);
  --blueSoft:var(--bg); --greenSoft:var(--bg); --redSoft:var(--bg);
}

/* ---- Seite: Reiter-Pillen bleiben beim Scrollen oben ---- */
.schule .s-segment{position:sticky;top:0;z-index:5;background:var(--bg);padding-bottom:10px;transition:box-shadow var(--zeit)}
.schule .s-segment.klebt{box-shadow:0 1px 0 var(--rahmen)}   /* feine Linie wie unter dem Blatt-Kopf, kein Schatten */
.schule .s-oben{margin-top:12px}
.schule .s-fuss{margin-top:18px}   /* links wie in Markt und Coin */

/* ---- Lektionen (aufklappbar, immer nur eine offen) ---- */
.schule .s-lektion{position:relative}
.schule .s-lektion+.s-lektion>.zeile::before{content:"";position:absolute;top:0;left:62px;right:0;border-top:1px solid var(--trenn)}
.schule .s-lektion .chev{transition:transform var(--zeit) ease}
.schule .s-lektion.offen .chev{transform:rotate(90deg)}
.schule .s-lektion.offen>.zeile .mi{font-weight:600}
/* Text buendig mit dem Titel (62 px), Bild und Eselsbruecke als ein Block ueber die ganze Kartenbreite */
.schule .s-lektion-text{padding:0 14px 14px;font-size:15px;line-height:1.55;overflow-wrap:break-word}
.schule .s-lektion-text p{margin:0 0 14px;padding-left:48px}
.schule .s-viz{background:var(--bg);border-radius:12px;padding:12px 8px;margin:0 0 8px}
.schule .s-viz svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.schule .s-esel{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border-radius:12px;padding:12px 14px 12px 12px;font-size:14.5px;line-height:1.55}
.schule .s-esel>div{padding-top:3px;min-width:0}
@supports (color:color-mix(in srgb,red,blue)){html[data-scheme="light"] .schule .s-esel{background:color-mix(in srgb,var(--warn) 9%,var(--sec))}}
.schule .s-esel-ic{flex:0 0 auto;line-height:1}
.schule .s-esel b{font-weight:600}

/* ---- Spickzettel-Liste (auch unten im Blatt) ---- */
.s-spick .mi small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Glossar ---- */
.schule .s-glossar .mi b{font-weight:600}
.schule .s-glossar .mi small{font-size:13.5px;line-height:1.45;margin-top:2px}

/* ---- Quiz ---- */
.schule .s-frage-text .mi{font-size:16px;font-weight:600;line-height:1.4}
.schule .s-antwort{min-height:50px}
.schule .s-antwort:disabled{cursor:default}
.schule .s-punkt{width:24px;height:24px;margin:0 auto;border-radius:50%;border:2px solid var(--hint);display:flex;align-items:center;justify-content:center;
  transition:background var(--zeit),border-color var(--zeit)}
.schule .s-punkt svg{width:14px;height:14px;fill:none;stroke:var(--btn-text);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.schule .s-antwort.richtig .s-punkt{background:var(--long);border-color:var(--long)}
.schule .s-antwort.falsch .s-punkt{background:var(--short);border-color:var(--short)}
.schule .s-antwort.richtig .mi{color:var(--long);font-weight:600}
.schule .s-antwort.falsch .mi{color:var(--short)}
.schule .s-frage.fertig .s-antwort:not(.richtig):not(.falsch) .mi{color:var(--hint)}
.schule .s-frage.fertig .s-antwort:not(.richtig):not(.falsch) .s-punkt{opacity:.5}
.schule .s-warum .mi{font-size:14.5px;font-weight:400;line-height:1.5}
.schule .s-quiz-balken{margin-top:8px}


/* ---- Spickzettel im Blatt: Karten wie im Rest der App ---- */
.blatt .cs-sheet{padding:18px 0 4px}
.blatt .cs-badge{display:block;border:0;border-radius:0;padding:0;margin:0 20px 6px;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--hint)}
.blatt .cs-title{margin:0 20px 6px;font-size:28px;font-weight:600;letter-spacing:-.028em;line-height:1.15;color:var(--text)}
.blatt .cs-sub{margin:0 20px 16px;max-width:none;font-size:15px;line-height:1.5;color:var(--hint)}
.blatt .cs-sub b{color:var(--text);font-weight:600}
.blatt .cs-keys{margin:0 var(--rand) 10px;padding:12px 16px;border:0;border-radius:var(--rund);box-shadow:inset 0 0 0 1px var(--rahmen);gap:8px 16px;font-family:var(--font);font-size:13px}
.blatt .cs-keys .kk{color:var(--hint)}
.blatt .cs-keys .kk b{color:var(--text);font-weight:600}
.blatt .cs-grid{gap:10px}
.blatt .cs-card{border:0;margin:0 var(--rand);border-radius:var(--rund);box-shadow:inset 0 0 0 1px var(--rahmen);overflow:hidden;padding:14px 16px 16px;min-width:0}
.blatt .cs-ch{gap:10px;margin-bottom:10px}
.blatt .cs-ch .lt{flex:0 0 26px;width:26px;height:26px;border:0;border-radius:8px;background:var(--ton);font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--akzent)}
@supports (color:color-mix(in srgb,red,blue)){
  .blatt .cs-ch .lt{background:color-mix(in srgb,var(--akzent) 15%,transparent)}
  html[data-scheme="light"] .blatt .cs-ch .lt{color:color-mix(in srgb,var(--akzent) 75%,#000)}
}
.blatt .cs-ch .tt{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--text)}
.blatt .cs-card p{font-size:15px;line-height:1.55;color:var(--text);margin:0 0 10px}
.blatt .cs-card b{font-weight:600;color:var(--text)}
.blatt .cs-card .pos,.blatt .cs-card .neg{font-weight:600}
.blatt .cs-pm{gap:10px;margin:0 0 12px}
.blatt .cs-pmbox,.blatt .cs-pmbox.p,.blatt .cs-pmbox.m{background:var(--bg);border:0;border-radius:12px;padding:12px 14px;min-width:0}
.blatt .cs-pmbox .sym{font-size:26px;font-weight:700}
.blatt .cs-pmbox .lbl{font-family:var(--font);font-size:12px;letter-spacing:.04em;margin:6px 0 4px}
.blatt .cs-pmbox .d{font-size:14px;font-weight:500;line-height:1.4}
.blatt .cs-pmbox .s{font-family:var(--font);font-size:12.5px;color:var(--hint)}
.blatt .cs-tag{font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--warn);background:transparent;
  border:1px solid var(--warn);border-radius:6px;padding:1px 6px;margin-right:6px;vertical-align:1px}
.blatt .cs-diagram{background:var(--dunkel);border:0;border-radius:12px;margin:2px -4px 12px;padding:12px 6px}   /* dunkle Kachel in der Karte, Rahmen der Karte bleibt ganz */
.blatt .cs-diagram svg{font-family:var(--font)}
.blatt .cs-tips{gap:8px}
/* alte Stile machen jede li zur Flex-Zeile: dann zerfaellt der Satz am Handy in Spalten. Fliesstext mit Pfeil davor. */
.blatt .cs-tips li{display:block;position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--text)}
.blatt .cs-tips li::before{position:absolute;left:0;top:0;color:var(--akzent)}
.blatt .cs-tips li b{font-weight:600}
.blatt .cs-num{gap:10px}
.blatt .cs-numbox{background:var(--bg);border:0;border-radius:12px;padding:12px 14px;min-width:0}
.blatt .cs-numbox .nv{font-family:var(--font);font-size:26px;font-weight:600;letter-spacing:-.02em}
.blatt .cs-numbox .nl{font-size:14px;font-weight:600;margin-top:6px}
.blatt .cs-numbox .ns{font-family:var(--font);font-size:12.5px;color:var(--hint)}
.blatt .cs-merke{margin:10px var(--rand) 0;padding:14px 16px;border:0;border-radius:var(--rund);background:var(--ton);font-size:15px;line-height:1.55;color:var(--text)}
@supports (color:color-mix(in srgb,red,blue)){.blatt .cs-merke{background:color-mix(in srgb,var(--warn) 11%,var(--sec))}}
.blatt .cs-merke b{color:var(--warn);font-weight:600}
.blatt .cs-share{margin:14px 20px 0;font-family:var(--font);font-size:13px;color:var(--hint);text-align:center}