/* ============================================================
   Beirat Blog — MERKBAR (merkbar.css)
   ============================================================
   Die Merkbar-Bausteine (Kernpunkte, Merksatz, Illustration, Abbildung,
   Abrufkarte) und der Begleiter Lumo im Blog. Die Abrufkarte nutzt die
   Akademie-Styles (interaktionen.css), Lumo begleiter.css, beide die --innen-*-Tokens;
   diese Datei bildet die Tokens auf die Galaxie-Farbwelt ab, hell und dunkel.
   Kanon: .claude/skills/merkbar-content/SKILL.md
   ============================================================ */

article.beitrag {
  --innen-stein: var(--g-karte);
  --innen-stein-hell: var(--g-karte);
  --innen-stein-tief: var(--g-tiefe);
  --innen-fuge: var(--g-linie);
  --innen-tinte: var(--g-text);
  --innen-tinte-dim: var(--g-text-dim);
  --innen-patina: #5fa08c;
  --innen-patina-tief: var(--g-erfolg);
  --innen-gold: var(--g-akzent);
  --innen-bronze: var(--g-akzent);
  --innen-erfolg: var(--g-erfolg);
  --innen-offen: var(--g-warnung);
  --innen-ernst: var(--g-warnung);
}

/* ---- Kernpunkte: die Vorstruktur nach dem Lead */
.galaxie .beirat-kernpunkte { border-left-color: var(--g-erfolg); }
.galaxie .beirat-kernpunkte .beirat-box-label { color: var(--g-erfolg); }
.beirat-kernpunkte ul { margin: 0; padding-left: 1.25rem; display: grid; gap: .35rem; }
.beirat-kernpunkte li::marker { color: var(--g-akzent); }

/* ---- Merksatz: ein Satz, ein Bild im Kopf */
.galaxie .beirat-box--merksatz { border-left-color: var(--g-akzent); font-size: 1.08rem; }
.galaxie .beirat-box--merksatz .beirat-box-label { color: var(--g-akzent); }
.beirat-box--merksatz p { margin: 0; font-weight: 600; }

/* ---- Illustration und Abbildung */
.beirat-illustration, .beirat-abbildung { margin: 28px 0; }
.beirat-illustration-svg { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 12px 34px rgba(7, 11, 24, 0.25); }
.beirat-abbildung img { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.beirat-illustration figcaption, .beirat-abbildung figcaption { margin: 10px 0 0; text-align: center; font-size: .92rem; color: var(--g-text-dim); }

/* ---- Abrufkarte: die Frage am Ende (Akademie-Styles der bak-check, hier auf Galaxie-Grund) */
.galaxie .beirat-abrufkarte { background: var(--g-hauch-leicht); border: 1px solid var(--g-linie); border-left: 4px solid var(--g-erfolg); border-radius: 12px; padding: 18px 20px; margin: 28px 0; }
.galaxie .beirat-abrufkarte::before { content: "Abrufkarte"; display: block; color: var(--g-erfolg); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 6px; }
.galaxie .beirat-abrufkarte .bak-check-antwort { background: var(--g-karte); color: var(--g-text); border: 1px solid var(--g-linie); border-radius: 10px; padding: .7rem 1rem; min-height: 44px; text-align: left; font: inherit; cursor: pointer; }
.galaxie .beirat-abrufkarte .bak-check-antworten { display: grid; gap: .5rem; }
.galaxie .beirat-abrufkarte .bak-check-antwort:hover:not(:disabled) { border-color: var(--g-akzent); filter: none; color: var(--g-text); }
.galaxie .beirat-abrufkarte .bak-check-antwort.ist-richtig { border-color: var(--g-erfolg); background: color-mix(in srgb, var(--g-erfolg) 18%, var(--g-karte)); font-weight: 600; color: var(--g-text); }
.galaxie .beirat-abrufkarte .bak-check-antwort.ist-falsch { border-color: var(--g-warnung); text-decoration: line-through; color: var(--g-text); }
.galaxie .beirat-abrufkarte .bak-check-erklaerung, .galaxie .beirat-abrufkarte .bak-check-korrektur { margin: .85rem 0 0; padding: .6rem .85rem; border-left: 3px solid var(--g-erfolg); background: var(--g-hauch-leicht); }
.galaxie .beirat-abrufkarte .bak-check-korrektur { border-left-color: var(--g-warnung); }

/* ---- Lumo im Blog: Blase auf Kartenfarbe, Text in Buehnenfarbe */
article.beitrag .begleiter-blase { background: var(--g-karte); color: var(--g-text); border-color: var(--g-akzent); }
article.beitrag .begleiter--jubel .begleiter-blase { border-color: var(--g-erfolg); }
article.beitrag .hat-begleiter { padding-top: .5rem; }