/* Lernen (Nutzer 13.11.2026): Abzeichen im Artikelkopf, Lernstand, Seite /blog/lernen/. Ruhig und klein; Farben aus den Variablen
   der Seite (hell und dunkel), nie festes Weiss. Koralle #D97757 nur als zarter Rand. Eingebunden von rahmen.py (Vorschau). */

/* ── Abzeichen ── */
.blog-seite .artikel-kennung { flex-wrap: wrap; }
.blog-seite .lern-abz, .lern-abz {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; margin-left: 12px; padding: 2px 9px 2px 7px;
  font: 500 .78rem/1.35 Raleway, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap;
  color: color-mix(in srgb, var(--fg, #1a1a1a) 62%, var(--bg, #fff));
  background: color-mix(in srgb, #D97757 7%, var(--bg, #fff));
  border: 1px solid color-mix(in srgb, #D97757 38%, var(--bg, #fff)); border-radius: 999px;
}
.lern-abz svg { flex: none; width: 15px; height: 15px; color: #c2532f; }
.lern-abz .la-text b { font-weight: 600; color: color-mix(in srgb, var(--fg, #1a1a1a) 78%, var(--bg, #fff)); }
.lern-abz .la-stand { font-weight: 600; }
.lern-abz .la-stand:empty { display: none; }
@media (max-width: 520px) {
  /* Handy: das Abzeichen bricht bei Platzmangel unter die Kennung */
  .blog-seite .lern-abz, .lern-abz { margin-left: 0; margin-top: 4px; flex-basis: auto; }
}

/* Symbol in Karten und Listen */
.lern-sym-w { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: -2px; }
.lern-sym-karte { color: #c2532f; opacity: .85; }

/* Praesentationskopf: kompakt */
.praes-kopf .lern-abz-praes { margin: 0 8px 0 0; padding: 1px 8px 1px 6px; font-size: .72rem; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.praes-kopf .lern-abz-praes svg { width: 13px; height: 13px; }

/* ── Weiter bei ... ── */
.blog-seite .lern-weiter, .lern-weiter {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 4px 6px 4px 12px;
  font: 500 .88rem/1.4 Raleway, system-ui, sans-serif; border: 1px solid var(--border, #ddd); border-left: 3px solid #D97757; border-radius: 6px;
  background: color-mix(in srgb, var(--fg, #1a1a1a) 3%, var(--bg, #fff));
}
.lern-weiter button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.lern-weiter .lw-knopf { text-align: left; color: var(--link, #0846a8); }
.lern-weiter .lw-knopf:hover { text-decoration: underline; }
.lern-weiter .lw-zu { font-size: 1.2rem; line-height: 1; color: color-mix(in srgb, var(--fg, #1a1a1a) 55%, var(--bg, #fff)); }
.lern-weiter button:focus-visible { outline: 2px solid #2E9E99; outline-offset: 1px; }

/* ── Knopf Praesentation bei Lernartikeln: leichter Koralle-Ring, hoechstens ein sanfter Puls ── */
.vl-kasten.vl-widget > .vl-praes.lern-praes, .vl-kasten .vl-praes.lern-praes { box-shadow: 0 0 0 2px color-mix(in srgb, #D97757 55%, transparent); border-color: #D97757; }
@media (prefers-reduced-motion: no-preference) {
  .vl-kasten .vl-praes.lern-praes { animation: lern-puls 1.6s ease-out 1; }
}
@keyframes lern-puls { 0% { box-shadow: 0 0 0 0 rgba(217,119,87,.55); } 100% { box-shadow: 0 0 0 2px rgba(217,119,87,.55), 0 0 0 7px rgba(217,119,87,0); } }

/* ── Seite /blog/lernen/ ── */
.blog-seite .lernstand-kasten {
  margin: 1.2rem 0 1.6rem; padding: 12px 16px; border: 1px solid var(--border, #ddd); border-left: 3px solid #D97757; border-radius: 8px;
  background: color-mix(in srgb, var(--fg, #1a1a1a) 3%, var(--bg, #fff));
}
.blog-seite .lernstand-kasten p { margin: .15rem 0; }
.blog-seite .lernstand-kasten .lk-titel { font-weight: 700; }
.blog-seite .lernstand-kasten .lk-hinweis { font-size: .82rem; color: color-mix(in srgb, var(--fg, #1a1a1a) 60%, var(--bg, #fff)); }
.blog-seite .lernstand-kasten .lk-weiter a { font-weight: 600; }
.blog-seite .lernen-art { margin: 0 0 2rem; }
.blog-seite .lernen-art h2.la-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: .2rem; }
.blog-seite .lernen-art .lern-sym-art { color: #c2532f; flex: none; }
.blog-seite .lernen-art .la-zahl { margin-left: 4px; font-size: .8rem; font-weight: 500; color: color-mix(in srgb, var(--fg, #1a1a1a) 55%, var(--bg, #fff)); }
.blog-seite .lernen-art .la-text-art { margin: 0 0 .6rem; color: color-mix(in srgb, var(--fg, #1a1a1a) 68%, var(--bg, #fff)); }
.blog-seite .lernen-art h3.la-thema { margin: 1rem 0 .3rem; font-size: 1rem; }
.blog-seite ul.lernen-liste { list-style: none; margin: 0; padding: 0; }
.blog-seite ul.lernen-liste li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid color-mix(in srgb, var(--border, #ddd) 70%, transparent); }
.blog-seite ul.lernen-liste li:first-child { border-top: 0; }
.blog-seite ul.lernen-liste .ll-titel { flex: 1 1 auto; min-width: 0; }
.blog-seite ul.lernen-liste .ll-min { flex: none; font-size: .82rem; color: color-mix(in srgb, var(--fg, #1a1a1a) 55%, var(--bg, #fff)); font-variant-numeric: lining-nums tabular-nums; }
.lern-status { flex: none; font: 600 .72rem/1.4 Raleway, system-ui, sans-serif; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.lern-st-neu { color: #5b6068; background: #eceef1; }
.lern-st-offen { color: #8a5a00; background: #fdf0d0; }
.lern-st-fertig { color: #1f6b3a; background: #dff3e5; }
@media (prefers-color-scheme: dark) {
  body:not(:has(.blog-seite)) .lern-st-neu { color: #c4c8ce; background: #30343a; }
  body:not(:has(.blog-seite)) .lern-st-offen { color: #f1c76b; background: #4a3a14; }
  body:not(:has(.blog-seite)) .lern-st-fertig { color: #8fd7a6; background: #1c3b29; }
}
@media (max-width: 520px) { .blog-seite ul.lernen-liste li { flex-wrap: wrap; } .blog-seite ul.lernen-liste .ll-titel { flex-basis: 100%; } }

/* In der Praesentation stoert die Weiter-Zeile die erste Folie (13.11.2026) */
html.praes-an .lern-weiter { display: none !important; }